html5 直接调用摄像头,HTML5如何调用摄像头

创建媒体对象

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;

本文由职坐标整理发布，关注职坐标，学习更多的一手H5开发知识！