首页 > Web开发 > 详细

html5调用摄像头

时间:2015-08-27 19:28:34      阅读:230      评论:0      收藏:0      [点我收藏+]

代码片段如下:

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



html5调用摄像头

原文:http://my.oschina.net/hxwny/blog/498201

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!