New course! Every coder should learn Generative AI!
Try a free lesson+ 13
you can see my own version
https://code.sololearn.com/W75xsy8pRMmV/?ref=app
+ 7
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
}
+ 3
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...
+ 3
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
+ 3
Html
+ 3
ChillPill thanks so much
+ 1
It will be fun if we try it
+ 1
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>
+ 1
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/
0
Yes very possible
0
I did So!
0
yes it is posisble
0
Keep quite
0
Yes it's possible
0
Yes sure
0
ya we can do it with js for playing videos and audios continuesly