HTML and CSS Reference
In-Depth Information
Figure4-1.
Example4-1
in Opera with a noticeable lag in canvas playback
Example4-2.Updating the video/canvas application to improve performance
<script>
window.onload=function() {
document.getElementById("videoobj").
addEventListener("play", drawVideo, false);
}
function drawVideo() {
var videoObj = document.getElementById("videoobj");
// if not playing, quit
if (videoObj.paused || videoObj.ended) return false;
// draw video on canvas
var canvasObj = document.getElementById("canvasobj");
var ctx = canvasObj.getContext("2d");
ctx.drawImage(videoObj,0,0,480,270);
setTimeout(drawVideo,20);
}
</script>
When we run the application with Firefox, Opera, IE10, and Webkit Nightly, we get a nice,
smooth integration between the video play and the canvas drawing actions. Now we're ready
to add in the filter functionality.
Creating a Video Visual Filter using the Canvas Element
To modify the presentation of the video data in the
canvas
element, we're actually going to
need to create a new
canvas
element as a scratch, or temporary working object, place the ori-
ginal video data into it, apply the filter, and then access the data from the scratch canvas object
and use it to update the displayed canvas object. Yes, it seems like a lot of work, but it's ne-
cessary. We can modify canvas data, but we can't directly modify video data. And we don't
want to use our display
canvas
element to perform all our manipulation.
WARNING
Security protocols currently prohibit accessing the canvas data if the image used (regardless of wheth-
er it's video or a still image) is accessed from a domain other than the one serving the web page with
the canvas application.
