使用html5绘图技术事项调用摄像头拍照；
2021-07-12 17:04
标签：UI 对象 data class top document 信息 loaded 技术 在mui框架中调用手机摄像头进行拍照可以直接使用原声的HTML5； 以下是HTML代码 以下是JavaScript代码 使用html5绘图技术事项调用摄像头拍照； 标签：UI 对象 data class top document 信息 loaded 技术 原文地址：http://www.cnblogs.com/qqfontofweb/p/7081536.html
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);//将获取视频绘制在画布上
});
上一篇：HTML&CSS
下一篇：JS转化HTML标签
文章标题：使用html5绘图技术事项调用摄像头拍照；
文章链接：http://soscw.com/index.php/essay/104243.html