Question

我用MediaStreamRecorder编写了一些用于在浏览器中录制音频的代码。它记录并随后将带有录制音频的音频标签发布到DOM。在Chrome中，一切正常，但允许使用麦克风的提示一旦点击允许就不会消失。在firefox中，提示消失，但音频标记未成功附加到DOM。有人可以给我一些建议吗？

$(document).ready(function() {
    var audio = document.createElement('audio');
    var mediaConstraints = { audio: true };
    var mediaRecorder;
    var formData;
    var spinner = "<div id='bouncers'><div class='double-bounce1'></div><div class='double-bounce2'></div></div>";
     $('#start-recording').on('click', function() {
    navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
});

     $('#stop-recording').on('click', function() {
    this.disabled = true;
         $('#start-recording').prop('disabled', false);
         $('#submit-recording').prop('disabled', false);
         $('.spinner').find('#bouncers').remove();
         mediaRecorder.stop();
         audio.controls = true;
         console.log($('audio'));
         $('#audiocontainer').append(audio);
    });

     $('#submit-recording').on('click', function() {
         $.ajax({
             url: $('#posturl').data('posturl'),
             data: formData,
             cache: false,
             contentType: false,
             processData: false,
             type: 'POST'
         });
     });

     function onMediaSuccess(stream) {
          $('#start-recording').prop('disabled', true);
          $('#stop-recording').prop('disabled', false);
         mediaRecorder = new MediaStreamRecorder(stream);
         mediaRecorder.mimeType = 'audio/ogg';
         $('.spinner').prepend(spinner);
         mediaRecorder.ondataavailable = function(blob) {
             this.stop();
             audio.src = URL.createObjectURL(blob);
             formData = new FormData();
             formData.append('recitation[recording]', blob);
         };
         var timeInterval = 30 * 1000;
         mediaRecorder.start(timeInterval);
         $('#stop-recording').disabled = false;
     }

     function onMediaError(e) {
         console.error('media error', e);
     }

     // below function via: http://goo.gl/B3ae8c
    function bytesToSize(bytes) {
        var k = 1000;
        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        if (bytes === 0) return '0 Bytes';
        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)),10);
        return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
     }

     // below function via: http://goo.gl/6QNDcI
     function getTimeLength(milliseconds) {
         var data = new Date(milliseconds);
         return data.getUTCHours()+" hours, "+data.getUTCMinutes()+" minutes and "+data.getUTCSeconds()+" second(s)";
     }

     window.onbeforeunload = function() {
        document.querySelector('#start-recording').disabled = false;
     };
 });

Answer 1

首先是一般的浏览器安全问题。在http上，你将永远被重新推崇。在https上，选择会出现一次并记住答案。

第二个是一般浏览器兼容性问题，其中Firefox和Chrome在多年后仍然处于草案中的规范的工作方式不同。可以在https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API

找到Firefox支持的调用和演示代码

在Chrome和Firefox中访问Mediarecorder的麦克风权限提示问题

1 个答案: