Extension of the previous version but with the added option to record and download the created video button onclick start Play button br button onclick startrecord Start Record button button onclick stoprecord Stop Record button br video id video width 400 src https notebook xbdev net var resources test mp4 muted loop video br canvas id output canvas width 400 height 200 canvas script let video video2 c1 ctx1 c_tmp ctx_tmp video document getElementById video video2 document createElement video video2 src https notebook xbdev net var resources fire2 mp4 video oncanplay console log video1 video videoWidth video videoHeight video2 oncanplay console log video2 video2 videoWidth video2 videoHeight c1 document getElementById output canvas ctx1 c1 getContext 2d function init video play video2 muted true video2 autoplay true video2 loop true video2 play c_tmp document createElement canvas c_tmp width 400 c_tmp height 200 ctx_tmp c_tmp getContext 2d video addEventListener play computeFrame function computeFrame if video paused video ended return ctx_tmp drawImage video 0 0 video videoWidth video videoHeight ctx_tmp font 110px Georgia ctx_tmp fillStyle rgb 255 0 0 ctx_tmp fillText XBDEV 10 120 let frame ctx_tmp getImageData 0 0 video videoWidth video videoHeight ctx_tmp drawImage video2 0 0 video2 videoWidth video2 videoHeight let frame2 ctx_tmp getImageData 0 0 video2 videoWidth video2 videoHeight for let i 0 i frame data length 4 i let r frame data i 4 0 let g frame data i 4 1 let b frame data i 4 2 if r 200 g 50 b 50 frame data i 4 0 frame2 data i 4 0 frame data i 4 1 frame2 data i 4 1 frame data i 4 2 frame2 data i 4 2 ctx1 putImageData frame 0 0 setTimeout computeFrame 0 document addEventListener DOMContentLoaded init function start init function record canvas time var recordedChunks return new Promise function res rej var stream canvas captureStream 25 fps mediaRecorder new MediaRecorder stream mimeType video webm codecs vp9 mimeType video webm codecs vp9 ondataavailable will fire in interval of time 4000 ms mediaRecorder start time 4000 mediaRecorder ondataavailable function event recordedChunks push event data after stop dataavilable event run one more time if mediaRecorder state recording mediaRecorder stop mediaRecorder onstop function event var blob new Blob recordedChunks type video webm var url URL createObjectURL blob console log url url const a document createElement a a href url a download url split pop document body appendChild a a click document body removeChild a var recorder null function startrecord init record c1 console log recorder mediaRecorder mediaRecorder start 4000 function stoprecord console log stopping mediaRecorder stop console log ready script
b frame data i 4 2 if r 200 g 50 b 50 frame data i 4 0 frame2 data i 4 0 frame data i 4 1 frame2 data i 4 1 frame data i 4 2 frame2 data i 4 2 ctx1 putImageData frame 0 0 setTimeout computeFrame 0 document addEventListener DOMContentLoaded init function start init function record canvas time var recordedChunks return new Promise function res rej var stream canvas captureStream 25 fps mediaRecorder new MediaRecorder stream mimeType video webm codecs vp9 mimeType video webm codecs vp9 ondataavailable will fire in interval of time 4000 ms mediaRecorder start time 4000 mediaRecorder ondataavailable function event recordedChunks push event data after stop dataavilable event run one more time if mediaRecorder state recording mediaRecorder stop mediaRecorder onstop function event var blob new Blob recordedChunks type video webm var url URL createObjectURL blob console log url url const a document createElement a a href url a download url split pop document body appendChild a a click document body removeChild a var recorder null function startrecord init record c1 console log recorder mediaRecorder mediaRecorder start 4000 function stoprecord console log stopping mediaRecorder stop console log ready script