复制代码
代码如下：
<！-声明：此div应该在允许使用网络摄像头，网络摄像头之后动态生成宽高：640*480，当然，可以动态控制啦！-><！-理想情况下，直到确认客户端支持视频/摄像机才创建这些元素，但是为了说明所涉及的元素，它们是使用标记（不是JavaScript）创建的-><videoid=“video”width=“640”height=“480”autoplay></video><buttonid=“snap”>快照</button><canvasid=“canvas”width=“640”height=“480“></canvas>
JavaScript只要上面的HTML元素创建完成，那么JavaScript部分将简单的超乎你想象的简单：
复制代码
代码如下：
window.addEventListener（“DOMContentLoaded”，function（）{////设置事件监听器，DOM内容加载完成，和jQuery的$.ready（）效果差不多。function//）{//canvas元素将用于抓拍varcanvas=document.getElementById（“canvas“），context=canvas.getContext（”2d“），//video元素，将用于接收并播放摄像头的数据流video=document.getElementById（”video“），videoObj={”video“：true}，//一个错误的错误函数，在控制台打印错误信息errBack=function（error）{if（“object”===typeofwindow.console）{console.log（“Videocaptureerror：”，error.code）;}};//将视频侦听器放到适当的位置////针对标准的浏览器if（navigator.getUserMedia）{//标准navigator.getUserMedia（videoObj，function（stream）{video.src=stream;
video.play（）;}，errBack）;}elseif（navigator.webkitGetUserMedia）{//WebKit前缀的navigator.webkitGetUserMedia（videoObj，function（stream）{video.src=window.webkitURL.createObjectURL（stream）;video.play（）;}，errBack）;}//对拍摄按钮的事件监听document.getElementById（“快照”）.addEventListener（“click”，function（）{//画到画布上context.drawImage（video，0，0，640，480）;}）;}，错误）；
最后，记得讲您的网页放到网络服务器下面，然后通过http协议来访问哦。另外，需要浏览器版本较新，并支持HTML5的相关新特性才可以。译者不算称职啦，没有按来翻译。使用的浏览器是chrome28。最后，贴上完整的代码，比较呆板。
复制代码
代码如下：
<！DOCTYPEhtml><html><head><title>浏览器网络摄像头</title><metaname=“Generator”content=“EditPlus”><metaname=“Author”content=“renfufei@qq.com”><metaname=“Description”content=“由http://davidwalsh.name/browser-camera”><script>//设置事件监听，DOM内容加载完成，和jQuery的$.ready（）效果差不多。window.addEventListener（“DOMContentLoaded”，function（）{//canvas元素将用于抓拍varcanvas=document.getElementById（“canvas”），context=canvas.getContext（“2d”），//视频元素，将用于接收并播放摄像头的数据流video=document.getElementById（“video”），videoObj={“video”：true}，//一个错误的布局函数，在控制台打印出错信息errBack=function（error）{
if（“object”===typeofwindow.console）{console.log（“Videocaptureerror：”，error.code）;}};////将视频侦听器放到适当位置////针对标准的浏览器if（navigator.getUserMedia）{//标准navigator.getUserMedia（videoObj，function（stream）{video.src=stream;video.play（）;}，errBack）;}elseif（navigator.webkitGetUserMedia）{//WebKit前缀的navigator.webkitGetUserMedia（videoObj，function（stream）{video.src=window.webkitURL.createObjectURL（stream）;video.play（）;}，errBack）;}//对镜头按钮的事件监听document.getElementById（“快照”）.addEventListener（“click”，function（）{//画到画布上
context.drawImage（video，0，0，640，480）;}）;}，错误）；</script></head><body><div><！-声明：此div应该在允许使用网络摄像头，网络摄像头之后动态生成宽高：640*480，当然，可以动态控制啦！-><！-理想情况下，直到确认客户端支持视频/摄像机才创建这些元素，但是为了说明所涉及的元素，它们是使用标记（不是JavaScript）创建的-><videoid=“video”width=“640”height=“480”autoplay></video><buttonid=“snap”>快照</button><canvasid=“canvas”width=“640”height=“
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60719.shtml
