web调取摄像头

2021-09-24 18:35:17 阅读：190 来源： 互联网

标签：function web 调取 window video var canvas1 navigator 摄像头

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>摄像头</title>
		<style type="text/css">
			#video{
				position: fixed;
				left: -999999px;
				top: -999999px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>
				<button onclick="openMedia()">打开</button>
				<button onclick="closeMedia()">关闭</button>
			</p>
			<video id="video" class="bg"></video>
			<canvas id="qr-canvas"></canvas>
		</div>
		<script type="text/javascript">
			var video = document.querySelector('video');
			var text = document.getElementById('text');
			var canvas1 = document.getElementById('qr-canvas');
			var context1 = canvas1.getContext('2d');
			var mediaStreamTrack;
			// 一堆兼容代码
			// window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
			// if (navigator.mediaDevices === undefined) {
			// 	navigator.mediaDevices = {};
			// }
			// if (navigator.mediaDevices.getUserMedia === undefined) {
			// 	navigator.mediaDevices.getUserMedia = function(constraints) {
			// 		var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
			// 		if (!getUserMedia) {
			// 			return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
			// 		}
			// 		return new Promise(function(resolve, reject) {
			// 			getUserMedia.call(navigator, constraints, resolve, reject);
			// 		});
			// 	}
			// }
			//摄像头调用配置
			var mediaOpts = {
				audio: false,
				video: true,
				// video: {
				// 	facingMode: "environment"
				// } // 或者 "user"
				video: { width: 500, height: 500 }
				// video: { facingMode: { exact: "environment" } }// 或者 "user"
			}

			// 回调
			function successFunc(stream) {
				mediaStreamTrack = stream;
				video = document.querySelector('video');
				if ("srcObject" in video) {
					video.srcObject = stream;
				} else {
					video.src = window.URL && window.URL.createObjectURL(stream) || stream
				};
				video.play();
				canvas_play();
			}
			// canvas播放
			function canvas_play(){
				canvas1.height = video.videoHeight ; 
				canvas1.width = video.videoWidth ;
				context1.fillRect(0,0,canvas1.width,canvas1.height)
				context1.drawImage(video,0,0,canvas1.width,canvas1.height);
				setTimeout(()=>{
					if(!video.paused){
						canvas_play();
					}
				},100)
			}

			function errorFunc(err) {
				alert(err.name);
			}

			// 正式启动摄像头
			function openMedia() {
				navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);
			}

			//关闭摄像头
			function closeMedia() {
				video.pause();
				context1.fillStyle = "deeppink";
				context1.clearRect(0, 0, canvas1.width, canvas1.height)
				
				mediaStreamTrack.getVideoTracks().forEach(function(track) {
					track.stop();
				})
			}
		</script>
	</body>
</html>

标签：function,web,调取,window,video,var,canvas1,navigator,摄像头
来源： https://www.cnblogs.com/ooo51o/p/15331626.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

web调取摄像头