Record webm file

by Ben Gillbanks

HTML

<canvas id="canvas"></canvas>

JavaScript

const ctx = canvas.getContext('2d');
var x = 0;
anim();
startRecording();

// Use howler.ctx to record the audiocontext
// https://github.com/Akimyou/ts-whammy

function startRecording() {

    const chunks = []; // here we will store our recorded media chunks (Blobs)
    const stream = canvas.captureStream(); // grab our canvas MediaStream
    const rec = new MediaRecorder(stream); // init the recorder
    
    // every time the recorder has new data, we will store it in our array
    rec.ondataavailable = e => {
	    console.log('save data', e.data);
    	chunks.push(e.data);
    }

	// only when the recorder stops, we construct a complete Blob from all the chunks
    rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/webm'}));

    rec.start();
    setTimeout(()=>rec.stop(), 5000); // stop recording in 3s

}

function exportVid(blob) {

	// Display video.
    const vid = document.createElement('video');
    vid.src = URL.createObjectURL(blob);
    vid.controls = true;
    document.body.appendChild(vid);
  
    // Download link.
    const a = document.createElement('a');
    a.download = 'myvid.webm';
    a.href = vid.src;
    a.textContent = 'download the video';
    document.body.appendChild(a);
  
}

function anim(){

    x = (x + 1) % canvas.width;
    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.fillStyle = 'black';
    ctx.fillRect(x - 20, 0, 40, 40);
    requestAnimationFrame(anim);
    
}