MSR to MSE

by juberti

HTML

<video id="video" autoplay></video>

CSS

#video {
  border: 1px solid black;
}

JavaScript

var constraints = {
  "video": true
  /*{
            "mandatory": {
                "minWidth": 320, "maxWidth": 320,
                "minHeight": 240, "maxHeight": 240
            }, 
        }*/
};
var ms = new MediaSource();
ms.addEventListener('sourceopen', (ev)=>{ console.log(ev.type); });
ms.addEventListener('sourceended', (ev)=>{ console.log(ev.type); });
ms.addEventListener('sourceclose', (ev)=>{ console.log(ev.type); });
ms.sourceBuffers.addEventListener('addsourcebuffer', (ev)=>{ console.log(ev.type); });
ms.sourceBuffers.addEventListener('removesourcebuffer', (ev)=>{ console.log(ev.type); });
  
var sourceBuffer;
var video = document.querySelector('#video');
video.onclick = function() { video.play(); }
video.src = window.URL.createObjectURL(ms);
video.play();
ms.addEventListener('sourceopen', sourceOpen, {once: true});

function gotStream(stream) {
  console.log("stream",stream);
  mediaRecorder = new MediaRecorder(stream, {mimeType: 'video/webm; codecs="vp8"'}); 
  mediaRecorder.ondataavailable = dataAvail;
  mediaRecorder.start(1000);

  sourceBuffer = ms.addSourceBuffer(mediaRecorder.mimeType);
  sourceBuffer.addEventListener('updateend', ()=>console.log("ue"), {once: true});
  sourceBuffer.addEventListener('error', (ev)=>{ console.error(ev.type, ev); });
}

function sourceOpen() {
  console.log('open');
  navigator.getUserMedia(constraints, gotStream, function(e) {});
}

function dataAvail(e) {
    sourceBuffer.appendBuffer(new Uint8Array(e.data));
/*  var reader = new FileReader();
  reader.addEventListener("loadend", function () {
    console.log("append that buffer");// + arr)
//reader.result);
  });
  reader.readAsArrayBuffer(e.data);*/
}