创建媒体对象
navigator.getUserMedia详情介绍点击下面链接
MediaDevices.getUserMedia() - Web API 接口 | MDN
//创建媒体对象开启摄像头
if (navigator.getUserMedia) { 旧版本方法
alert('请调整好摄像头');
navigator.getUserMedia({
video:true,
audio:false
},function(strem){
摄像头成功回调。
/* console.log(strem); */
mediaStreamTrack = stream.getTracks()[0];
video.src = vendorUrl.createObjectURL(strem);
video.play();
},function(error){
//error.code
摄像头失败回调。
alert('摄像头是否正确安装');
});
}
else {
alert('浏览器不支持摄像头');
}
//新版本方法
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true }).then(function(stream) {
console.log(stream);
mediaStreamTrack =typeofstream.stop === 'function' ? stream : stream.getTracks()[1];
video.src = (window.URL || window.webkitURL).createObjectURL(stream);
video.play();
}).catch(function(err) {
console.log(err);
})
}
与旧版类似，不过该方法返回了一个Promise对象，可以使用then和catch表示成功与失败的回调
更多参照文档
点击拍照
snap.addEventListener('click', function(){
//绘制canvas图形
canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);
//把canvas图像转为img图片
/* img.src = canvas.toDataURL("image/png"); */
/* alert(canvas.toDataURL("image/png")); */
});
//删除相机
close.addEventListener('click',function() {
mediaStreamTrack && mediaStreamTrack.stop();
}, false);
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
snap = document.getElementById('savePhotoId'),
img = document.getElementById('img'),
close = document.getElementById('close'),
mediaStreamTrack;
HTML就比较简单，在下就自己创建咯！