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>

html页面通过ActiveX控件调用摄像头实现拍照上传demo代码下载

原文:html页面通过ActiveX控件调用摄像头实现拍照上传demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1832077946801152.ht...

2017最新web前端HTML5入门高清视频附源码

课程简介 HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素,用于媒介回放的 video 和 audio...

html5视频点播源码

  • 2017年06月13日 10:31
  • 11.73MB
  • 下载

html5手机视频直播源码

  • 2017年11月05日 17:20
  • 5KB
  • 下载

2017最新VIP课程HTML5梦工厂多个有趣开发实例讲解高清视频附源码

课程介绍: 我们重新摘取了数学中一些几何坐标的知识点, 为大家制作了几个立体图形demo,权当抛砖引玉, 冀望朋友们能重新喜欢上这样一门闪烁着智慧之源的知识、一个描述宇宙的语言! 你可以用鼠标拖...

video-js-html5视频播放器源码例子

  • 2013年09月09日 22:26
  • 78KB
  • 下载

调取手机电话 调取视频聊天 html5调用手机摄像头

调取手机电话 button onclick="callphone()">10086button> script> function callphone(){ windo...

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

本文属于吴统威的博客原创文章,转载:http://www.wutongwei.com/front/infor_showone.tweb?id=103 最近写了一个上传头像的功能,主要是使用了HT...
  • tenyit
  • tenyit
  • 2015年04月06日 10:45
  • 1524
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5打开视频摄像头源码
举报原因:
原因补充:

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