HTML and CSS Reference
In-Depth Information
formElement
=
document
.
getElementById
(
"createImageData"
);
formElement
.
addEventListener
(
"click"
,
createImageDataPressed
,
false
false
);
Theclickeventhandlercalls
toDataUrl()
toopenanewwindow,usingtheimagetakenfrom
the video as the source:
function
function
createImageDataPressed
(
e
) {
window
.
open
(
theCanvas
.
toDataURL
(),
"canvasImage"
,
"left=0,top=0,width="
+
theCanvas
.
width
+
",height="
+
theCanvas
.
height
+
",toolbar=0,resizable=0"
);
}
Figure 6-15. getUserMedia() taking screenshot from Canvas
And that's it!
Figure 6-15
shows what it might look like when you export the Canvas to an
image. Now, not only are we showing the video from the web cam on the Canvas, we can
manipulate it too! You can see the full code for this example in
CH6EX14.html
in the code
distribution.
