最新消息:文章中包含代码时,请遵守代码高亮规范!

html5调用摄像头

JavaScript Jason 11951浏览 0评论

HTML代码:

	<video id="video" width="640" height="480" autoplay></video>
	<button id="snap">Snap Photo</button>
	<canvas id="canvas" width="640" height="480"></canvas>

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);
}


<h2>按钮模拟拍照</h2>


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

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

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/8681.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者houjushang的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!