JavaScript: How to capture image from video?

Ever wondered how to capture image from video using JavaScript? No? Follow my lead.

Basically, what we can do is draw the current instance of the video element on the canvas and then retrieve the blob from canvas and use that blob as source for image or upload the blob directly to storage like AWS or any other service.

Line 6: We are drawing the video element on the canvas using drawImage function of canvas element.

Arguments: drawImage(element, startX, startY, widthOfImageToBeDrawn, heightOfImageToBeDrawn)

Line 7: Canvas element gives a callback to listen to the event after blob is prepared from canvas and is ready to be consumed.

Line 9: window object comes with static function of URL class that can be used to get URL from blob.

In case, you want to merge a image with this generated image, you can:

Line 12: Image element gives the callback when media is loaded.

Thanks for reading. 🙂