2015-01-27 5 views
0

Я написал код для записи звука в браузере с MediaStreamRecorder. Он записывает, а затем отправляет звуковой тег с записанным аудио в DOM. В хроме все работает, за исключением того, что приглашение разрешить использование микрофона не исчезнет после нажатия кнопки. В firefox приглашение уходит, но звуковой тег не добавляется к DOM. Может ли кто-нибудь дать мне совет?Доступ к запросу разрешения микрофона с помощью Mediarecorder в Chrome и Firefox

$(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; 
    }; 
}); 

ответ

1

Первый - общая проблема безопасности браузера. На http, вы всегда будете reprompted. На https выбор представлен один раз, и ответ запоминается.

Во-вторых, это общая проблема совместимости браузеров, в которой Firefox и Chrome работают по-разному для спецификации, которая все еще находится в проекте, через несколько лет. Поддерживаемые звонки и демонстрационный код Firefox можно найти по адресу https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API