Have you ever thought of processing / playing video in a HTML canvas element? | SoloLearn: Learn to code for FREE!


Have you ever thought of processing / playing video in a HTML canvas element?

Is it possible? I imagine it is but I have never done it. What I would like to do, is to apply some image filters on video that plays in real time on the canvas. Anyone knows how to do this with javascript?

7/4/2020 11:53:43 PM


24 Answers

New Answer


you can see my own version https://code.sololearn.com/W75xsy8pRMmV/?ref=app


I had done this in the past but with still image. I d like to do same with video. https://code.sololearn.com/W0qXDCi19va5/?ref=app


thanks luis I just figured now how to play a video in canvas using ctx.drawImage(video,0,0) as you explained. https://code.sololearn.com/WzCYoQIugPpU/?ref=app sorry for the digusting video. is hard to find free video source.


luis calderón thanks for bringing an example.


Musa Jamiu processing would mean to alter the video, either filtering the images, or rotating/translating the pixels or mix in many videos in one screen, etc


Yes sir, you can do it but applying the filters with jascript takes time and playing it in real time can cause lag because you have to apply the filters to each frame. I didn't try it without prerendere but you can try. I thought in this: const vid = document.querySelector("#videoElement"); const screen = document.createElement("canvas"); const screenCtx= screen.getContext("2d"); document.body.appendChild(screen) //Prerendere objects const buffer = document.createElement ("canvas"); const bufferCtx = buffer.getContext ("2d"); function renderer(){ bufferCtx.drawImage (vid, 0,0); applyFilter(buffer); screenCtx.drawImage(buffer, 0,0); requestAnimationFrame(renderer); } function applyFilter(image){ //filter algorithm }


well yes it could be kind of same as some css transformations, but quite a bit more possibilities to do here with canvas and javascript as we have complete control over individual pixels of the video.


Hi, i would like to understand what processing a video mean in this context, i tot the <video> tag in html5 is used for this. Thanks...


Okay thank you very much, so we can say processing an image using Css include using properties like, transform, skew, translate and so on ryt? And for html using canvas + js


ChillPill thanks so much



It will be fun if we try it


The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format. The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element. <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>


wes bos has a great tutorial on this in javascript30 called webcam fun where he outputs the users webcam to the canvas and shows you some filters: https://javascript30.com/


ya we can do it with js for playing videos and audios continuesly


Yes very possible


I did So!


yes it is posisble


Keep quite


Yes it's possible