javascript - Chrome 和 Firefox 中 Mediarecorder 访问麦克风权限提示问题

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 的工作方式有所不同。 Firefox 支持的调用和演示代码可以在 https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API 找到。