<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>document.createElement("myHero")</script>
<style>
</style>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
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);//将获取视频绘制在画布上
});
</script>
</body>
</html>
775
05-12
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
