html5调用摄像头

最新推荐文章于 2021-03-03 16:45:38 发布

不净之心

最新推荐文章于 2021-03-03 16:45:38 发布

阅读量173

点赞数

分类专栏：前台&美工

本文链接：https://blog.csdn.net/pyzheng/article/details/84739516

版权

前台&美工专栏收录该内容

118 篇文章 1 订阅

订阅专栏

[url]http://my.oschina.net/hxwny/blog/498201[/url]

代码片段如下：

css部分代码：

video { border: 1px solid #ccc; display:inline-block; }
 #canvas { border: 1px solid #ccc; display:inline-block;}
 #take_photo{background-color:orange;width:100px;height:30px;border:0px;}

html部分代码：

id="video" width="480" height="320" autoplay>
id="canvas" width="480" height="320">
id="take_photo" type="button" value="take_photo"/>

window.addEventListener("DOMContentLoaded", function() {
  var canvas = document.getElementByIdx_x("canvas"),
  context = canvas.getContext("2d"),
  video = document.getElementByIdx_x("video"),
  videoobj = {"video": true },
  errback = function(error) {
          console.log("error", error.code);
 };
  if(navigator.getUserMedia) {
            navigator.getUserMedia(videoobj, function( stream) {
                       video.src = stream;
                       video.play();
             }, errback);
  } else if (navigator.webkitGetUserMedia) {
                navigator.webkitGetUserMedia(videoobj,function(stream) {
                video.src = window.webkitURL.createObjectURL(stream);
                } , errback)
 }
  document.getElementByIdx_x("take_photo").addEventListener("click", function(){
         context.drawImage(video, 0, 0, 480, 320);
  });
}, false);