Minimal h264

by juberti

HTML

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

CSS

#video {
  border: 1px solid black;
}

JavaScript

//var mediaSource = new MediaSource();
//var sourceBuffer;
//var video = document.querySelector('#video');
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
var stream = canvas.captureStream(1);
var mediaRecorder = new MediaRecorder(stream);
var chunks = [];



function stop() {
  mediaRecorder.stop();
  download();

}

mediaRecorder.ondataavailable = function (e) {
  console.log(e.data.size);
  chunks.push (e.data);
  /*reader.addEventListener("loadend", function () {
    var arr = new Uint8Array(reader.result);
    sourceBuffer.appendBuffer(arr);
  });
  reader.readAsArrayBuffer(e.data);*/
};
mediaRecorder.start();
ctx.fillStyle = (0) ? 'white' : 'black';
ctx.fillRect(0, 0, 16, 16);
setTimeout(stop, 1000);

/*video.srcObject = 
mediaSource.addEventListener('sourceopen', function (e) {
  sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp9"');
}, false);*/

function download() {
  var blob = new Blob(chunks, {
    type: 'video/mp4'
  });
  var url = URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.innerHTML = "Download";
  document.body.appendChild(a);
  //a.style = 'display: none';
  a.href = url;
  a.download = 'test.mp4';
  //a.click();
  //window.URL.revokeObjectURL(url);
}