Canvas - Video Frame Grabs and Image Uploads - Episode 7
HTML-код
- Опубликовано: 9 фев 2025
- This Canvas tutorial covers quite a few topics. Included is how to do frame grabs from a video, how to convert those frames into binary images that can be used as a video poster image, or the content for an image element, or even a binary file to upload to the server via fetch.
Listening for a variety of possible media events plus converting image data into greyscale is also discussed.
With the information in this tutorial you could create a tool that extracts a series of thumbnail images from a video.
code GIST: gist.github.co...
Canvas Video Playlist - • Learning HTML5 Canvas ...
Cross-origin video - • HTML crossorigin attri... - to deal with cross-origin errors.
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
Great explanation! I was looking for something like this for a long Thanks!
Nice tutorial, well done! Thanks for that,
Happy new year Steve!
Thanks! You too!
Thanks for this informative video, just the exactly what I need...
I was planning to make patterns to LED strips using pexils from a video data, and this seems a way to have it
For me you are Steve Gold!
Hey Steve !
thanks for this very useful tutorial .
I have a question please !
i captured a video and now i'm trying to process only the 1st frame (print some data on it ) and then process the last frame of the video in the same way once i click on pause video !
and fianly get the fianl version of the video .
is it possible or do you have an idea on about how to do it ?
Thanks in advance
When using the Canvas and grabbing frames we are creating new images. We are not editing the actual video.
@@SteveGriffith-Prof3ssorSt3v3 yeah i'm actually trying to edit the video by grabbing the 1st Frame , process it then add it in the begginig of the video or replace the 1st initial frame !
i don't know if it's possible or not but the is the general idea !
otherwise is it possible to edit the video without grabbing frames ?
@@jovision30 Not with JavaScript that I know of.
Why you don't use jQuery for DOM manipulations? Is there some kind of a problem with using it in your project or it's your own preferences?
Thanks for the question. There are many problems with jQuery. It should not be used anywhere anymore.
When jQuery was created over 10 years ago, it served a purpose. I taught it. I supported it. I felt it was very useful. Browsers back then were not consistent in which DOM methods they implemented or in their support for AJAX. jQuery was designed as a library to overcome all those differences and give people a set of standard methods to call for DOM manipulation and AJAX. It was efficient. I didn't have to write all the scripts to handle those different methods and cases. jQuery gave us the 1000 lines of code so we didn't have to write them.
Since about 2010 DOM methods and properties have been standardized across all browsers. This removed the need for most of jQuery. With the addition of the fetch( ) methods for AJAX about 4 years ago there is now NO good reason to use jQuery. If you add it to your project you are adding LITERALLY over 10,000 lines of JavaScript to save a handful of lines of plain vanilla JS. It's like getting in your car to drive from your bedroom to your kitchen, instead of walking.
The main reason that jQuery is still used, at all, is support for older websites that use other libraries that rely on jQuery. Yes, Bootstrap, we are looking at you. The usage statistics for jQuery have been finally starting to decline the last couple years.
I have been actively steering students away from jQuery for 4 years now. Learning proper development skills are more important that trying to simplify a couple of DOM methods at the cost of an extra ~100Kb of downloads for the end user.
@@SteveGriffith-Prof3ssorSt3v3 Thank you for such a comprehensive answer!
@@SteveGriffith-Prof3ssorSt3v3 So, bootstrap uses jQuery and it's better not to use its javascript features, right? But what about grid system? Is it good practice to exclude bootstrap.js from document and rely only on its grid system? Or it's better to use css grid system or find some other framework or even build your own using flexbox?
Oh, i've understood this. I've just watched your video about bootstrap and found out about native bootstrap js. Thanks for your amazing videos!
@@LenTos1337 bootstrap 4 has css that uses flexbox. There is a native JS version of the bootstrap javascript built by the community. That way you can skip the jquery requirement
Hi,
First of all, your videos are great. I have a question to you. What should we do if we want to upload a 10 second long audio file to server(node js server) ? Same as uploading images/videos?
yes. exactly the same.
Hey Steve ?
I have a problem : Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
how can i solve it please ?
I have a video, not specifically about Canvas, which would help - ruclips.net/video/m6lsF8z0hKk/видео.html
The problem is that the Canvas doesn't want to load things from different domains because that could have dangerous data. It is the same CORS issue that we have to deal with in AJAX.
developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_.22tainted.22_canvas.3F
We need to add crossorigin="anonymous" to the image element so that we don't send any data to the server that is giving us the image. The server needs to send us the access-control headers saying that we are allowed to use their data and images.
OR put a copy of the image on our own server (where our HTML file came from) and then we won't ever get the error.
You're amazing
Sir please describe Function object ... in detail ..and difference between function and Function object .. like function is object as date object and math object etc...how we play around with Function object ...please Thanks
Please add this to my Tutorial Request page and I will add it to my list of upcoming videos. I do already have a playlist where I talk about functions and prototypes.
Please make a tutorial on recursion in javascript with many examples and explanation please thanks ..
Please add any requests to my Tutorial Request Video on my channel page.
Remember that you can also search for videos that have already been made from the channel page.
There is a video about recursion already on my channel - ruclips.net/video/AQrYWQyewq8/видео.html
Hi Steve, thank-you for taking the time to read this message.
What i'm tying to do is record a webcam and then, when I stop recording, upload the video the the server (or the fake localhost server for testing) with a click on a button.
I've checked 2 videos of yours that get into this topic:
this one : ruclips.net/video/K6L38xk2rkk/видео.html
and then this one : ruclips.net/video/_2SvAepbCSg/видео.html
So in the first one I see that on line 101 & 102 you have :
let videoURL = window.URL.createObjectURL(blob);
vidSave.src = videoURL;
Ok, so from the first video, I understand that there is a temporary location at videoURL that holds my video data in a mp4 format & that i can download or play in another video tag.
Now, on the second video, you teach us how to use the FormData() and append a blob that actually is an single frame from the canvas and then sending the FormData object (containing the blob (the image)) to a server.
Is it possible that instead of an image, I send to my server (localhost for testing) the vidSave.src so I can save a recorded video that is in the temp location ? I'm talking about the window.URL.createObjectURL(blob) - or the vidSave.src i'm not sure what the difference is - . To be clear, what im asking is is it possible to append to the FormData the mp4 that is in the temp location ? If so how?
Thank-you very much !!
The blob, which is the video that you pass to the createObjectURL method is what you can upload.