Question

我一直在玩MediaRecorder来保存由MediaStream创建的getUserMedia。我对结果非常满意，但是我需要类似的东西来提供更好的跨浏览器支持。

以下是我使用MediaRecorder的方式示例代码（仅为您提供一些背景信息）：

var mediaRec;
navigator.getUserMedia({
    audio:true
},function(stream){
    mediaRec=new MediaRecorder(stream);
    mediaRec.start(10000);
    mediaRec.ondataavailable=function(e){

    };
},function(err){});

似乎MediaRecorder only works in the Firefox browser and the Firefox OS。

然而MediaRecorder is part of the W3C Specification和Google Chrome has stated it intends to support it in a future release，但我在此期间有哪些选择？

我知道Flash和Silverlight等插件可以达到MediaRecorder执行的功能，但我需要的是一个javascript解决方案。

有人可以帮忙吗？

Answer 1

所有其他可用选项都将使用高级API并在浏览器/ JavaScript级别实现。因此，没有一个真正可与Firefox提供的MediaRecorder API相媲美，因为它集成到浏览器中，并且在浏览器的实现中具有“较低级别”的好处。

我知道一个可行的选项（尽管使用Web Audio API）是Matt Diamond's Recorderjs。

使用来自Matt的github的Recorderjs的例子。

  var audio_context;
  var recorder;

  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);

    input.connect(audio_context.destination);

    recorder = new Recorder(input);
  }

  function startRecording() {
    recorder.record();
  }

  function stopRecording(button) {
    recorder.stop();
    createDownloadLink();

    recorder.clear();
  }

  function createDownloadLink() {
    recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');

      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
    });
  }

  window.onload = function init() {
    try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;

      audio_context = new AudioContext;

    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      console.log('No live audio input: ' + e);
    });

MediaRecorder替代品

1 个答案: