基本信息
源码名称：js调用摄像头截图上传
源码大小：1.29KB
文件格式：.html
开发语言：js
更新时间：2017-08-14
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

js调用摄像头截图上传

见附件 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>截图</title>
	</head>

	<body>

		<video autoplay></video>
		<button id="button">截图</button>
		<button id="button2">查看图片URL</button>
		<canvas id="canvas"></canvas>

		<script type="text/javascript">
			var video = document.querySelector('video');
			var canvas = window.canvas = document.querySelector('canvas');
			var button = document.getElementById('button');
			var button2 = document.getElementById('button2');

			//点击进行截图，需要传入video元素
			button.onclick = function() {
				canvas.width = video.videoWidth;
				canvas.height = video.videoHeight;
				canvas.getContext('2d').
				drawImage(video, 0, 0, canvas.width, canvas.height);
			};

			button2.onclick = function() {
				var strDataURI = canvas.toDataURL("image/jpeg");
				alert(strDataURI);
			};

			//自动打开摄像头
			var constraints = {
				audio: true,
				video: true
			};

			function handleSuccess(stream) {
				window.stream = stream; // make stream available to browser console
				video.srcObject = stream;
			}

			function handleError(error) {
				console.log('navigator.getUserMedia error: ', error);
			}

			navigator.mediaDevices.getUserMedia(constraints).
			then(handleSuccess).catch(handleError);
		</script>
	</body>

</html>