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.

user_11645980 · Answer

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

Appending getusermedia data to mediasource

2 Answers