HTML and CSS Reference
In-Depth Information
Example 3: Create a Video Puzzle out of User-Captured Video
For our final example of the
getUserMedia()
function, we will use video captured from a
webcam to create the video puzzle from Example 10 (
CH6EX10.html
).
The first thing we need to note is that (currently) the video captured from
getUserMedia()
is fixed to 640×480 and cannot be resized. For this reason, we need to update the code in
CH6EX10.html
to reflect a larger canvas with larger puzzle pieces.
In the HTML, we change the size of the Canvas to 690×530.
<canvas
<canvas id=
"canvasOne"
width=
"690"
height=
"530"
style=
"position: absolute; top:
10px; left: 10px;"
>
Your browser does not support the HTML5 Canvas.
</canvas>
</canvas>
Then, in the JavaScript, we double the size of the pieces. In
CH6EX10.html
, we used 80×60
pieces, so in this example we make them 160×120:
partWidth
=
160
;
partHeight
=
120
;
The rest of the code changes are nearly identical to the last example. We create a
<video>
element in code as
videoElement
and use that as the object to capture video using
getUser-
Media()
:
function
function
eventWindowLoaded
() {
videoElement
=
document
.
createElement
(
"video"
);
videoDiv
=
document
.
createElement
(
'div'
);
document
.
body
.
appendChild
(
videoDiv
);
videoDiv
.
appendChild
(
videoElement
);
videoDiv
.
setAttribute
(
"style"
,
"display:none;"
);
iif
(
userMediaSupported
()) {
startVideo
();
canvasApp
();
}
else
else
{
alert
(
"getUserMedia() Not Supported"
)
}
}
function
function
userMediaSupported
() {
return
return
!!
(
navigator
.
getUserMedia
||
navigator
.
webkitGetUserMedia
||
navigator
.
mozGetUserMedia
||
navigator
.
msGetUserMedia
);
}
