Appending getusermedia data to mediasource

Question

I have limited experience with the mediastream and mediasource apis, what do you think is the best way to go about getting data from getusermedia and then appending that data to a mediasource. Right now i am using the MediaRecorder to record the data and then append it onto a new mediasource object. But it just returns a blank video. Here is what i am currently doing.

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

I know you can just use video.src = window.URL.createObjectURL(stream) but i would like to handle the raw data. Is it possible to do it this way. Here is a fiddle so you can play around with it.

Answer 1

I had a similar problem, and this answer worked for me.
I guess the problem is that the MediaRecorder API returns a Blob, but an ArrayBuffer is needed. According to the MDN documentation: "The only way to read content from a Blob is to use a FileReader".

I adapted your fiddle, but I only tested it in 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
}

Answer 2

here is my working demo. even i was struggling with this mimeTypes from many days finally my code is working demo

var mediasource = new MediaSource(),video = document.querySelector("video"),
    mime = 'video/webm;codecs=vp9,opus'
video.src = URL.createObjectURL(mediasource)

mediasource.addEventListener("sourceopen",function(_){
    var source = mediasource.addSourceBuffer(mime)
    navigator.mediaDevices.getUserMedia({video: true,audio: true}).then(stream=>{
        var recorder = new MediaRecorder(stream,{mimeType:mime})
        recorder.ondataavailable = d =>{
            var r = new Response(d.data).arrayBuffer() // convert blob to arraybuffer
            r.then(arraybuffer=>{
                source.appendBuffer(arraybuffer)
            })
        }
        recorder.start(5000)
    })
})