html调用摄像头ios,html5调用摄像头

HTML代码：

Snap Photo

JS代码打开摄像头

var aVideo=document.getElementById('video');

var aCanvas=document.getElementById('canvas');

var ctx=aCanvas.getContext('2d');

navigator.getUserMedia = navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia;//获取媒体对象(这里指摄像头)

navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息

function gotStream(stream) {

video.src = URL.createObjectURL(stream);

video.onerror = function () {

stream.stop();

};

stream.onended = noStream;

video.onloadedmetadata = function () {

alert('摄像头成功打开！');

};

}

function noStream(err) {

alert(err);

}

按钮模拟拍照

document.getElementById("snap").addEventListener("click", function() {

ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上

});

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/8681.html

微信打赏

支付宝打赏

感谢您对作者houjushang的打赏，我们会更加努力！    如果您想成为作者，请点我