HTML and CSS Reference
In-Depth Information
8.4. Combining user input with video to build a telestrator
As we mentioned earlier, the telestrator allows the user to draw directly on a playing video
to illustrate the action to the television audience. To create this feature in your applica-
tion, you'll need a way to combine the video with other image data. For this you'll use the
<canvas>
element. You should be familiar with Canvas from
chapter 6
. In that chapter
you learned about the drawing capabilities of Canvas to create an interactive game. In
this chapter you'll concentrate on the general-purpose, image data-manipulation features to
combine images and other content with a video feed.
In this section, you'll learn
• How to use the
<canvas>
element to play a video
• How to create controls for video playback (because the
<canvas>
element
renders the video image data, not the
<video>
element)
• How to combine the video on the canvas with other content, such as images
• How to perform basic image-processing using the
<canvas>
element
• How to capture the user's drawings (telestrations) and add them to the video during
playback
Your work on the telestrator will happen in three groups of steps:
Group 1: Playing video through a
<canvas> element
Group 2: Manipulating video as it's
playing
Group 3: Building the telestrator
feature
• Step 1: Add a frame image
to the video.
• Step 2: Adjust how the
frame and video combine on
the canvas.
• Step 3: Adjust the opacity of
the video.
• Step 4: Grayscale the video
being played back.
• Step 1: Add the <canvas>
element.
• Step 2: Grab and display
image data.
• Step 3: Add markup for and
implement video player
controls.
• Step 1: Capture mouse
movement.
• Step 2: Display the captured
path over the video.
• Step 3: Add a “clear” button
so users can remove
telestrations and start again.
Let's start with how to play video through the
<canvas>
element.
