button onclick start Start 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 c1 ctx1 c_tmp ctx_tmp function init video document getElementById video video play c1 document getElementById output canvas ctx1 c1 getContext 2d c_tmp document createElement canvas c_tmp setAttribute width 800 c_tmp setAttribute height 450 ctx_tmp c_tmp getContext 2d video addEventListener play computeFrame function computeFrame ctx_tmp drawImage video 0 0 video videoWidth video videoHeight let frame ctx_tmp getImageData 0 0 video videoWidth video videoHeight ctx1 putImageData frame 0 0 setTimeout computeFrame 0 document addEventListener DOMContentLoaded init function start init console log ready script Image editing processing removing screen background certain color merges video into background color cut out button onclick start Start 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 function init video play video2 muted true video2 autoplay true video2 loop true video2 play c1 document getElementById output canvas ctx1 c1 getContext 2d 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 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 full copy for let i 0 i frame data length i 4 frame data i 0 frame2 data i 0 frame data i 1 frame2 data i 1 frame data i 2 frame2 data i 2 tricky bug the stride length is the video memory width not the canvas width let stride frame data length video2 videoWidth 4 console log stride let w video2 videoWidth c_tmp width for let y 0 y c_tmp height y for let x 0 x c_tmp width x if x c_tmp width 0 5 continue var n w y x 4 frame data n 0 frame2 data n 1 frame data n 1 frame2 data n 2 frame data n 2 frame2 data n 3 mask and replace specific colors blue green areas in original video with another video for let i 0 i frame data length i 4 let r frame data i 4 0 let g frame data i 4 1 let b frame data i 4 2 if r 100 r 100 g 100 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 console log ready script Text with video overlay added Extra features you could try adding Add options to toggle repeat stop at end of film Add feathering finds a pixel processes all surrounding pixels avoid than unpleasant outline around text Add edit feature so user can type in their own text and select size color etc Create image mixing effects Preview option scroll through quick view frames Display video stats e g codec width height length on screen Allow video resizing currently just uses fixed sizes but could resample modify the output video size Create tile effect mixing multiple videos Allow user to select upload their own videos or from external sources button onclick start Start 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 function init video play video2 muted true video2 autoplay true video2 loop true video2 play c1 document getElementById output canvas ctx1 c1 getContext 2d 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 console log ready script
0 i frame data length i 4 let r frame data i 4 0 let g frame data i 4 1 let b frame data i 4 2 if r 100 r 100 g 100 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 console log ready script Text with video overlay added Extra features you could try adding Add options to toggle repeat stop at end of film Add feathering finds a pixel processes all surrounding pixels avoid than unpleasant outline around text Add edit feature so user can type in their own text and select size color etc Create image mixing effects Preview option scroll through quick view frames Display video stats e g codec width height length on screen Allow video resizing currently just uses fixed sizes but could resample modify the output video size Create tile effect mixing multiple videos Allow user to select upload their own videos or from external sources button onclick start Start 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 function init video play video2 muted true video2 autoplay true video2 loop true video2 play c1 document getElementById output canvas ctx1 c1 getContext 2d 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 console log ready script