前端调用摄像头

2021-09-18 20:03:03 阅读：157 来源： 互联网

标签：function canvas 调用前端 let video 摄像头 MediaStream

<!DOCTYPE html>

<html>

<head>
	<title>Photo</title>
	<style>
		video {
			transform: rotateY(180deg);
		}
	</style>
</head>

<body>
	<button onclick="showCamera()">开启摄像头</button>
	<div class="bg-content" style="display: none;">
		<div class="show-photo">
			<video id="video" width="600px" height="600px" autoplay="autoplay"></video>
			<canvas id="canvas" width="600px" height="600px" style="display: none;"></canvas>
			<a id="downloadA"></a>
		</div>
		<div class="take-photo">
			<button type="button" onclick="takePhoto()">
				拍照
			</button>
		</div>
		<div class="close-photo">
			<button type="button" onclick="closePhoto()">
				关闭
			</button>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
		/**
		 * 开启摄像头
		 */
		let mediaStreamTrack = null; // 视频对象(全局)

		function showCamera() {
			$(".bg-content").css("display", "block");
			let constraints = {
				video: {
					width: 600,
					height: 600
				},
				audio: true
			};
			//获得video摄像头区域
			let video = document.getElementById("video");
			//这里介绍新的方法，返回一个 Promise对象
			// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
			// then()是Promise对象里的方法
			// then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
			// 避免数据没有获取到

			let promise = navigator.mediaDevices.getUserMedia(constraints);

			promise.then(function(MediaStream) {
				mediaStreamTrack = typeof MediaStream.stop === 'function' ? MediaStream : MediaStream.getTracks()[1];
				video.srcObject = MediaStream;
				video.muted = true;
				video.play();
			});
		}

		/**
		 * 拍摄照片
		 */
		function takePhoto() {
			let video = document.getElementById("video");
			let canvas = document.getElementById("canvas");
			let ctx = canvas.getContext('2d');
			ctx.drawImage(video, 10, 10);
			ctx.translate(canvas.width, 0);
			ctx.scale(-1, 1);
			let img = document.getElementById("canvas").toDataURL("image/png");
			var triggerDownload = $("#downloadA").attr("href", img).attr("download", "micro-blog.png");
			triggerDownload[0].click();
		}

		/**
		 * 关闭摄像头
		 */
		function closePhoto() {
			mediaStreamTrack.stop();
			$(".bg-content").css("display", "none");
		}
	</script>
</body>

</html>

报 Uncaught TypeError: Cannot read property ‘getUserMedia‘ of undefined 解决方法：
https://blog.csdn.net/weixin_44493841/article/details/108073810

标签：function,canvas,调用,前端,let,video,摄像头,MediaStream
来源： https://blog.csdn.net/jeason_1/article/details/120373066

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

ICode9

前端调用摄像头