HTML and CSS Reference
In-Depth Information
function
function mediaFail ( error ) {
//error code 1 = permission Denied
alert ( "Failed To get user media:" + error . code )
}
function
function startVideo () {
navigator . getUserMedia = navigator . getUserMedia ||
navigator . webkitGetUserMedia ||
navigator . mozGetUserMedia || navigator . msGetUserMedia ;
navigator . getUserMedia ({ video : true
true , audio : true
true }, mediaSuccess , mediaFail );
}
function
function mediaSuccess ( userMedia ) {
window . URL = window . URL || window . webkitURL || window . mozURL || window . msURL ;
videoElement . src = window . URL . createObjectURL ( userMedia );
}
In our drawScreen() function, we use videoElement as the source for the puzzle pieces we
display with drawImage() :
function
function drawScreen () {
...
context . drawImage ( videoElement , imageX , imageY , partWidth , partHeight ,
placeX , placeY , partWidth , partHeight );
...
}
There you go. Just a few simple changes, and we now can use a video stream from a webcam
as the source for video on the canvas and then manipulate it into an interactive application.
You can see what this might look like in Figure 6-16 . You can see the full code for this ex-
ample in CH6EX15.html in the code distribution.
Search WWH ::




Custom Search