html5打开视频摄像头源码

原创 2016年05月30日 16:36:59
<!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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML5 Camera(摄像头) 和 Video(视频)控制

本文属于吴统威的博客原创文章,转载:http://www.wutongwei.com/front/infor_showone.tweb?id=103 最近写了一个上传头像的功能,主要是使用了HT...
  • tenyit
  • tenyit
  • 2015-04-06 10:45
  • 1261

HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)

最近公司做的app关键是使用的问题,所以直接贴代码。

web/html5调用摄像头实现二维码扫描

利用html5(navigator.getUserMedia)调用摄像头抓拍图片媒体流,通过php调用java接口解析图片二维码,实现二维码解析,可结合自己的业务!不过目前支持的浏览器不多是个问题。

html5视频点播源码

  • 2017-06-13 10:31
  • 11.73MB
  • 下载

HTML5在线摄像头应用

最近在搞一个考试系统,系统要求要有随机拍照的功能,并且摄像头能够收到js的控制。在线摄像头嘛,就那两种实现的方式:cab或者flash。 暂且不论本人从没学过的flash(事实上我已经做了一个fla...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)