html5调用摄像头

最新推荐文章于 2022-01-15 21:02:21 发布

weixin_34150224

最新推荐文章于 2022-01-15 21:02:21 发布

阅读量90

点赞数

原文链接：https://my.oschina.net/hxwny/blog/498201

版权

为什么80%的码农都做不了架构师？>>>

代码片段如下：

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);

转载于:https://my.oschina.net/hxwny/blog/498201