1、实现头的方法代码。
2、编写CSS样式的方法代码。
3、html上传代码。
4、JS处理方法代码。
5、测试结果如下。
注意事项：
JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。
1）获取视频流添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源
var video = document.getElementByIdx_x_x("video")；
navigator.getUserMedia({video:true}， function (stream) {
video.src = window.webkitURL.createObjectURL(stream)；
}， function (error) { alert(error)； })；
2）拍照
关于拍照功能，采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入
function scamera() {
var videoElement = document.getElementByIdx_x_x('video')；
var canvasObj = document.getElementByIdx_x_x('canvas1')；
var context1 = canvasObj.getContext('2d')；
context1.fillStyle = "#ffffff"；
context1.fillRect(0， 0， 320， 240)；
context1.drawImage(videoElement， 0， 0， 320， 240)；
}
3）图片获取
要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像
var imgData=canvas.toDataURL(“image/png”)；
imgData格式如下:”data:image/pngbase64,xxxxx“
真正图像数据是base64编码逗号之后的部分。
先简单的添加需要的控件
<video id="video" autoplay=""style='width:640pxheight:480px'></video>
<button id='picture'>PICTURE</button>
<canvas id="canvas" width="640" height="480"></canvas>
并在script中定义
var video = document.getElementById("video")
var context = canvas.getContext("2d")
var errocb = function () {
console.log('sth wrong!')
}
然后，简单的说就是利用html5的api navigator.getUserMedia来开启设备的摄像头，浏览器上会出现图示中的提示
if (navigator.getUserMedia) { // 标准的API
navigator.getUserMedia({ "video": true }, function (stream) {
video.src = stream
video.play()
}, errocb)
} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
navigator.webkitGetUserMedia({ "video": true }, function (stream) {
video.src = window.webkitURL.createObjectURL(stream)
video.play()
}, errocb)
}
网上有些例子中，navigator.getUserMedia第一个参数是‘video’，这可能是早期的版本，现在必须是obj
还有关于getUserMedia和webkitGetUserMedia 的判断，网上有这么写的
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia)
但要注意，他们绑定video.src的方法不一样，本人没有测过createObjectURL是否通用
拍照功能就是简单的调用canvas中的drawImage即可
document.getElementById("picture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480)
})
所有script代码如图示
然后浏览器中就能看到摄像头，点击picture，就会在把当前摄像头的图片就会出现在右边了
