首页 > Web开发 > 详细

使用html5绘图技术事项调用摄像头拍照;

时间:2017-06-26 17:50:36      阅读:238      评论:0      收藏:0      [点我收藏+]

 在mui框架中调用手机摄像头进行拍照可以直接使用原声的HTML5;

  以下是HTML代码

<video id="video" width="640" height="480" autoplay></video>   <!--这一行是调用摄像头之后呈现的画面-->
<button id="snap">Snap Photo</button>   <!--拍照按钮-->
<canvas id="canvas" width="640" height="480"></canvas><!--这一行是拍照之后呈现在网页上的画面-->

  以下是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);//将获取视频绘制在画布上
	});

  

使用html5绘图技术事项调用摄像头拍照;

原文:http://www.cnblogs.com/qqfontofweb/p/7081536.html

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