web调取摄像头 

<!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>
posted @ 2021-09-24 18:18  小泽沐优声  阅读(280)  评论(0)  编辑  收藏  举报