medias için getusermedia verilerinin eklenmesi

Question

Mediastream ve mediasource apis konusunda sınırlı deneyime sahibim, sizce getusermedia'dan veri almanın ve bu verileri bir medias kaynağına eklemenin en iyi yolu nedir? Şu anda verileri kaydetmek ve daha sonra yeni bir mediasource nesnesine eklemek için MediaRecorder kullanıyorum. Ama sadece boş bir video döndürür. İşte şu anda yapıyorum.

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() {}) 

Ben sadece video.src = window.URL.createObjectURL(stream) kullanabilirsiniz biliyorum ama ham verileri işlemek istiyorum. Bunu bu şekilde yapmak mümkün mü? İşte bir keman, böylece it ile oynayabilirsiniz.

Answer 1

Benzer bir sorunla karşılaştım ve this answer benim için çalıştı.
Sorun şu ki, MediaRecorder API'sı bir Blob döndürüyor, ancak bir ArrayBuffer gerekli. the MDN documentation'a göre: "Blob'dan içerik okumanın tek yolu, FileReader kullanmasıdır".

Ben senin fiddle uyarlanmış, ama sadece Chrome 53 yılında

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 
} 

bunu test