HTML5拍摄首先，我们看看HTML代码结构，当然，这部分的DOM内容应该是在用户允许使用其摄像头事件出发后，动态加载生成的，寻找的朋友可以了解下
演示地址：HTML5拍摄演示
首先，我们看看HTML代码结构，当然，这部分的DOM内容应该是在用户允许使用其摄像头事件出发后，动态加载生成的。
注意：我们采用的是640X480的分辨率，如果采用JS动态生成，那么您是可以灵活控制分辨率的。
复制代码
代码如下：
<！-声明
：此div应该在允许使用网络摄像头，网络摄像头之后动态生成
宽高：640 * 480，当然，可以动态控制啦！
- >
<！ -
在理想情况下不创建这些元素，直到它确认
客户端支持视频/摄像头，但为了说明的缘故
涉及的元素，它们与标记（没有的JavaScript）创建
- >
<视频ID =“ video” width =“ 640” height =“ 480” autoplay> </ video>
<button id =“ snap”>快照</ button>
<canvas id =“ canvas” width =“ 640” height =“ 480 “> </ canvas>
JavaScript
只要上面的HTML元素创建完成，那么JavaScript部分将简单的超乎你想象的简单：
复制代码
代码如下：
//设置事件监听，DOM内容加载完成，和jQuery的的$。就绪（）效果差不多。
window.addEventListener（ “DOMContentLoaded”，函数（）{
//画布元素将用于抓拍
变种画布=的document.getElementById（” canvas“），
context = canvas.getContext（” 2d“），
// video元素，将用于接收并播放摄像头的数据流
video = document.getElementById（” video“），
videoObj = {” video“：true} ，
//一个错误的错误函数，在控制台打印错误信息
errBack = function（error）{
if（“ object” === typeof window.console）{
console.log（“ Video capture error：”，error.code ）;
}
};
//将视频侦听器放到适当的位置
// //针对标准的浏览器
if（navigator.getUserMedia）{//标准
navigator.getUserMedia（videoObj，function（stream）{
video.src = stream;
video.play（）;
}，errBack）;
} else if（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。最后，贴上完整的代码，比较呆板。
复制代码
代码如下：
<！DOCTYPE html>
<html>
<head>
<title>浏览器网络摄像头</ title>
<meta name =“ Generator” content =“ EditPlus”>
<meta name =“ Author” content =“ renfufei@qq.com” >
<meta name =“ Description” content =“由：http://davidwalsh.name/browser-camera”>
<script>
//设置事件监听，DOM内容加载完成，和jQuery的$ .ready（）效果差不多。window.addEventListener
（“ DOMContentLoaded”，function（）{
// canvas元素将用于抓拍
var canvas = document.getElementById（“ canvas”），
context = canvas.getContext（“ 2d”），
//视频元素，将用于接收并播放摄像头的数据流
video = document.getElementById（“ video”），
videoObj = {“ video”：true}，
//一个错误的布局函数，在控制台打印出错信息
errBack = function（error）{
if（“ object” === typeof window.console）{
console.log（“视频捕获错误：”，error.code）;
}
};
// //将视频侦听器放到适当的位置
//按照标准的浏览器
if（navigator.getUserMedia）{//标准
navigator.getUserMedia（videoObj，function（stream）{
video.src = stream;
video.play（）;
}，errBack ）;
} else if（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）创建
- >
<视频ID =“ video” width =“ 640” height =“ 480” autoplay> </ video>
<button id =“ snap”>快照</ button>
<canvas id =“ canvas” width =“ 640” height =“
如果您觉得本文的内容对您的学习有所帮助：
关键字：
css