25-例2_在Canvas上播放视频并截图

接下来，调用函数userMediaSupported()检测是否支持摄像头。如果支持，则调用函数startVideo()开始捕获视频，同时调用函数canvasApp()启动程序。

function eventWindowLoaded() {
　　videoElement = document.createElement("video");
　　videoDiv = document.createElement('div');
　　document.body.appendChild(videoDiv);
　　videoDiv.appendChild(videoElement);
　　videoDiv.setAttribute("style", "display:none;");
　　if (userMediaSupported()) {
　　　　startVideo();
　　　　canvasApp();
　　} else {
　　　　alert("getUserMedia() Not Supported")
　　}
}

函数startVideo()和上一个例子中的函数基本一样。首先获取到浏览器函数getUserMedia()的引用，然后传递3个参数（说明捕获内容的对象，失败时的回调函数，成功时的回调函数）并调用该函数。

function startVideo() {
　　navigator.getUserMedia = navigator.getUserMedia ||
　　　　　　　　　　　　　　　　　 navigator.webkitGetUserMedia ||
　　navigator.mozGetUserMedia || navigator.msGetUserMedia;
　　navigator.getUserMedia({video: true, audio:true}, mediaSuccess, mediaFail);
}

如果调用函数getUserMedia()成功，就在回调函数mediaSuccess()中将获取到的视频设置为video的视频源。

function mediaSuccess(userMedia) {
　　window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
　　videoElement.src = window.URL.createObjectURL(userMedia);
}

在函数canvasApp()里，为了播放视频，需要调用视频的play()函数。

videoElement.play();

同CH6EX6.html一样，需要在循环里调用函数drawScreen()来展示video的新一帧画面。否则，就只能展示一个静态的画面。

function gameLoop() {
　　window.setTimeout(gameLoop, 20);
　　drawScreen();
}
gameLoop();

在函数drawScreen()中调用函数drawImage()，将videoElement里新的画面更新到Canvas上。

function drawScreen () {
　　context.drawImage(videoElement , 10, 10); 
}

另外，代码中还提供了一个按钮，点击该按钮可以用摄像头进行拍照。这里的代码和第3章里的一样。在页面上放置一个按钮，id为createImageData。

<canvas id="canvasOne" width="660" height="500">
 Your browser does not support the HTML 5 Canvas.
</canvas>
<form>
<input type="button" id="createImageData" value="Take Photo!">
</form>

在JavaScript中为该按钮添加一个处理点击事件的函数。

formElement = document.getElementById("createImageData");
formElement.addEventListener("click", createImageDataPressed, false);

该点击函数通过调用函数toDataUrl()打开一个新的界面，用来显示从视频里截取的图片。

function createImageDataPressed(e) {
window.open(theCanvas.toDataURL(),"canvasImage","left=0,top=0,width="
　 + theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0");
}

这就是程序的基本内容。图6-15所示为从Canvas里截取的照片。至此，用户不仅能从摄像头里获取的视频并进行播放，而且还能对视频的播放进行控制。读者可以从本书代码包中的CH6EX14.html文件查看程序的详细代码。