HTML and CSS Reference
In-Depth Information
}
After a successful call to
getUserMedia()
, we set the source of
videoElement
to the object
representedbythe
userMedia
argumentpassedautomaticallyto
mediaSuccess()
afterasuc-
cessful connection with
getUserMedia()
:
function
function
mediaSuccess
(
userMedia
) {
window
.
URL
=
window
.
URL
||
window
.
webkitURL
||
window
.
mozURL
||
window
.
msURL
;
videoElement
.
src
=
window
.
URL
.
createObjectURL
(
userMedia
);
}
In the
canvasApp()
function, we need to make sure that we call the
play()
function of the
video, or nothing will be displayed:
videoElement
.
play
();
Just like in Example 6 (
CH6EX6.html
), we need to call
drawScreen()
in a loop to display
new frames of the video. If we leave this out, the video will look like a static image:
function
function
gameLoop
() {
window
.
setTimeout
(
gameLoop
,
20
);
drawScreen
();
}
gameLoop
();
In the
drawScreen()
function, we call
drawImage()
to display the updated image data from
videoElement
:
function
function
drawScreen
() {
context
.
drawImage
(
videoElement
,
10
,
10
);
}
Wealsowanttocreateabuttonfortheusertopresstotakeascreenshotoftheimagefromthe
webcam. We will accomplish this essentially the same way that we did it in
Chapter 3
. First,
we create a button on the HTML page with the
id
of
createImageData
:
<canvas
<canvas id=
"canvasOne"
width=
"660"
height=
"500"
>
Your browser does not support the HTML 5 Canvas.
</canvas>
</canvas>
<form>
<form>
<input
<input type=
"button"
id=
"createImageData"
value=
"Take Photo!"
>
</form>
</form>
Then, in our JavaScript, we retrieve a reference to the button and add a click event handler:
