simple video recording

CC0

by s_light

HTML

<button id="button_start"> 
  start 
</button>

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

CSS

button {
  display: block;
}

video {
  display: block;
  border: solid 1px black;
}

JavaScript

const videoEl = document.getElementById('theVideoElement');
let mediaRecorder = null;
let mediaChunks = [];

function recordStart() {
    console.log('recordStart..');
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia (
            {
                audio: true,
                video: true,
            }
        )
        .then( stream => {
            videoEl.srcObject = stream;
            mediaRecorder = new MediaRecorder(stream);

            mediaRecorder.addEventListener('dataavailable', event => {
                mediaChunks.push(event.data);
            });

            mediaRecorder.addEventListener('stop', event => {
                console.log("recorder stopped");
                const blob = new Blob(mediaChunks, { 'type' : 'video/webm' });
                mediaBlobURL = window.URL.createObjectURL(blob);
                mediaChunks = [];
                videoEl.src = mediaBlobURL;
            });

            mediaRecorder.start();
            console.log("recorder started", mediaRecorder.state);

            window.setTimeout(event => {
                console.log("time is over.");
                mediaRecorder.stop();
                console.log(mediaRecorder.state);
                console.log("recorder stopped");
                // stop getUserMedia stream - this way the cam and mic gets released.
                for (const track of stream.getTracks()) {
                    track.stop();
                }
                videoEl.srcObject = null;
                console.log("stream stopped.");
            }, 3000);
        })
        .catch( err => {
            console.error(`The following getUserMedia error occurred:\n ${err}`);
        });
    } else {
        console.error('getUserMedia not supported on your browser!');
    }
}


console.info('******************************************');
window.addEventListener('load', (event) => {
    console.info('All resources finished...