MediaRecorder备选方案

Question

我一直在尝试使用MediaRecorder来保存由getUserMedia创建的MediaStream。我对结果非常满意，但我需要一个类似的东西，它具有更好的跨浏览器支持。

这里是我如何使用MediaRecorder的示例代码（仅为了让您了解情况）：

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

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

看起来MediaRecorder只能在Firefox浏览器和Firefox OS中使用。

但是MediaRecorder是W3C规范的一部分, Google Chrome已经声明将在未来的版本中支持它, 但与此同时我有哪些选择呢？

我知道像Flash和Silverlight这样的插件可以实现MediaRecorder的相同功能，但我需要一个javascript解决方案。

有人可以帮忙吗？

- Jimmery

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

- Benjamin Trent