How to Play or Capture video in HTML5 Canvas

Advertisement

In this tutorial we will draw a playing video frame as an image inside HTML5 Canvas. Canvas provides a method drawImage which draws from any source inside a Canvas.

Define the Video Block

Lets define a video block first inside your HTML code. And put a video source URL for the demo.


Define the Canvas

Now define a canvas beside the Video where the video frame would be shown.

Sorry, no canvas available

Now put up a link which would trigger the activity of drawing the image from the video.

Pause and Capture image frame from video

Draw the Video Frame

We will use JavaScript to capture and draw the video. Lets define a variable to get our defined Video tag.

var v=document.getElementById("myvideo");

Now add an eventListener of the link that we created to trigger the event.

pause_lnk.addEventListener('click', pause_and_capture, false);

Once the link is clicked, we will perform below activities in order:

a) Pause the video when link is clicked
HTML5 Video tag provides pause() event which pause the Video.

v.pause(); // Pause the video to capture

b) Get a handle to the target Canvas

var c = document.getElementById("mycanvas"); // Get the canvas
var ctx = c.getContext("2d");

c) Capture and draw the frame
Canvas provides a drawImage function which takes input the Video tag handle for the source to draw the frame from the video. You can put this piece of code inside a timer to play the Video live in the Canvas. Other two arguments are the co-ordinates in the Canvas where to draw the frame.

ctx.drawImage(v,1,1); // Draw the paused frame of the video to canvas

Demo

Now, putting this all together, I have prepared a demo to show how it works.

View Demo

Entire Code:

Download Code






www.debugpoint.com

<< Back to Article

Draw video on HTML5 Canvas - Demo

Play the video and click below link:


Sorry, no canvas available

<< Back to Article


View Demo Download Code

You may also like...

Translate »