Video/Audio Recording

JavaScript

let recorder,
    chunks = [],
    videoEl = document.createElement('video'),
    counterEl = document.createElement('h1'),
    durationEl = document.createElement('h1'),
    counter = 3;

videoEl.controls = true;
videoEl.autoplay = true;
videoEl.width = 300;
videoEl.height = 200;

document.body.appendChild(counterEl);
document.body.appendChild(videoEl);
document.body.appendChild(durationEl);

window.URL = (
	  window.URL || 
    window.webkitURL || 
    window.mozURL || 
    window.msURL);
    
navigator.mediaDevices.getUserMedia({audio: true, video: true})
    .then(stream => {
        videoEl.src = URL.createObjectURL(stream);
        videoEl.play();
      
	      recorder = new MediaRecorder(stream, {mimeType: 'video/webm'});
        recorder.start(1000);
        recorder.addEventListener('dataavailable', e => {
      	    e.data.size && chunks.push(e.data);
        });
        recorder.addEventListener('stop', e => {
      	  	let blob = new Blob(chunks, {type: 'video/webm'});
            videoEl.autoplay = false;
      	    videoEl.src = URL.createObjectURL(blob);
					  videoEl.addEventListener('canplay', e => {
                durationEl.innerText = 'duration: ' + videoEl.duration;
            });
          
            console.log('play video');
            // downaload file for further inspection
            let a = document.createElement('a');
            a.download = 'recording.webm';
            a.innerText = 'click to download';
            a.href = videoEl.src;
            console.log('create download link');
            document.body.appendChild(a);
          
            // stop the stream
            console.log('stop stream');
            stream.getTracks().forEach(t => {
                t.stop();
            })
      });      
      
      counterEl.innerText = counter;
      counterId = setInterval(() => {
      	  counter--;
          counterEl.innerText = counter;        
        
          if (counter < 1) {
        	    recorder.stop();
 ...