getusermediaデータをmediasourceに追加する

Question

私はmediastreamとmediasource apisに関する経験は限られていますが、getusermediaからデータを取得し、そのデータをメディアソースに追加する最良の方法は何だと思いますか？今私は、MediaRecorderを使ってデータを記録し、それを新しいメディアソースオブジェクトに追加しています。しかし、それは空のビデオを返すだけです。ここに私が現在やっていることがあります。

function createElem (tagName) { 
    var elem = document.createElement(tagName) 
    elem.controls = true 
    elem.autoplay = true 
    elem.play() 
    document.body.appendChild(elem) 
    return elem 
} 

navigator.getUserMedia({ video: true, audio: false }, function (stream) { 
    var recorder = new MediaRecorder(stream) 
    var wrapper = new MediaSource() 

    var elem = createElem('video') 
    elem.src = window.URL.createObjectURL(wrapper) 
    wrapper.addEventListener('sourceopen', sourceOpen) 

    function sourceOpen() { 
    var source = wrapper.addSourceBuffer('video/webm;codecs=vp9') 
    recorder.ondataavailable = function (e) { 
     source.appendBuffer(new Uint8Array(e.data)) 
    } 
    } 
    recorder.start(1000) 
}, function() {}) 

私はあなただけvideo.src = window.URL.createObjectURL(stream)を使用することができます知っているが、私は、生データを処理したいと思います。このようにすることは可能ですか？あなたはitで遊ぶことができるので、ここではフィドルです。

Answer 1

私は同様の問題があり、this answerが私のために働いていました。
問題は、MediaRecorder APIがBlobを返すが、ArrayBufferが必要だということだ。 the MDN documentationによると： "ブロブからコンテンツを読む唯一の方法は、FileReaderを使用することです"。

私はあなたのfiddleを適応しますが、私はChromeのみ53に

navigator.getUserMedia({ video: true, audio: false }, successCallback, function (err) { console.error('Error:', err, err.stack); }) 

function successCallback(stream) { 
    var recorder, source = new MediaSource() 

    var elem = createVideoElem() 
    elem.src = URL.createObjectURL(source) 
    source.addEventListener('sourceopen', sourceOpen) 

    function sourceOpen() { 
     var buffer = source.addSourceBuffer('video/webm;codecs=vp9') 
     recorder = new MediaRecorder(stream) 
     recorder.start(1000) 

     recorder.ondataavailable = function (e) { 
      var fileReader = new FileReader(); 
      fileReader.onload = function() { 
       buffer.appendBuffer(fileReader.result); 
      }; 
      fileReader.readAsArrayBuffer(e.data); 
     } 
    } 
} 

function createVideoElem() { 
    var elem = document.createElement('video') 
    elem.controls = true 
    elem.autoplay = true // for chrome 
    elem.play() // for firefox 
    document.body.appendChild(elem) 
    return elem 
} 

をそれをテスト