@vikasietum_tecknology/record-rtc/simple-demos/show-animated-bar-on-video.html

record-rtc is a library based on recordrtc library. In this forked version of the original library we have optimized the memory management. The video recording is stored in IndexDB in chunks.

<style>
    html, body, video, canvas {
        margin: 0!important;
        padding: 0!important;
    }
</style>

<title>Show Animated Bar on the recorded video | RecordRTC</title>
<h1>Show Animated Bar on the recorded video | RecordRTC</h1>
<p>It will record 10-seconds video and automatically stop the recording.</p>

<video id="video-preview" controls autoplay playsinline></video>

<script src="/RecordRTC.js"></script>
<script>
var videoPreview = document.getElementById('video-preview');

navigator.mediaDevices.getUserMedia({video: true}).then(function(camera) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.style = 'position: absolute; top: 0; left: 0; opacity: 0; margin-top: -9999999999; margin-left: -9999999999; top: -9999999999; left: -9999999999; z-index: -1;';
    document.body.appendChild(canvas);

    var video = document.createElement('video');
    video.autoplay = true;
    video.srcObject = camera;

    var canvasStream = canvas.captureStream(15);

    var audioPlusCanvasStream = new MediaStream();
    canvasStream.getVideoTracks().forEach(function(videoTrack) {
        audioPlusCanvasStream.addTrack(videoTrack);
    });
    camera.getAudioTracks().forEach(function(audioTrack) {
        audioPlusCanvasStream.addTrack(audioTrack);
    });

    var recorder = RecordRTC(audioPlusCanvasStream, {
        type: 'video'
    });

    recorder.setRecordingDuration(10 * 1000).onRecordingStopped(function() {
        var blob = recorder.getBlob();
        recorder = null;
        camera.stop();

        videoPreview.srcObject = null;

        videoPreview.src = URL.createObjectURL(blob);
    });

    recorder.startRecording();

    videoPreview.srcObject = canvasStream;

    var rectX = 240;
    var rectY = 240 - 20;

    (function looper() {
        if(!recorder) return; // ignore/skip on stop-recording

        canvas.width = 320;
        canvas.height = 240;

        rectX-=5;

        if(rectX <= -40) {
            rectX = 240 + 50;
        }

        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        context.save();
        context.fillStyle = 'black';
        context.globalAlpha = 0.4;
        context.fillRect(0, rectY - 20, 1000, 30)
        context.restore();
        context.font = '20px Georgia';
        context.fillStyle = 'white';
        context.fillText('Hello', rectX, rectY);

        // repeat (looper)
        setTimeout(looper, 100);
    })();
}).catch(function(error) {
    alert('Unable to capture camera. Please check console logs.');
    console.error(error);
});
</script>

<footer style="margin-top: 20px;"><small id="send-message"></small></footer>
<script src="https://www.webrtc-experiment.com/common.js"></script>