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
window.onload=function() {
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");
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.
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.
Search WWH ::

Custom Search