html5打开视频摄像头源码

最新推荐文章于 2024-01-12 15:24:24 发布

吕佳瑞

最新推荐文章于 2024-01-12 15:24:24 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/f5912766/article/details/51539006

版权

<!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>

吕佳瑞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5打开视频摄像头源码

document.createElement("myHero") Snap Photo var aVideo=document.getElementById('video'); var aCanvas=document.getElementById('canvas'); var ctx=aCanvas.g
复制链接

扫一扫