【浏览器硬件交互篇】浏览器js调用摄像头拍照

狼丶宇先森

已于 2022-05-07 16:39:21 修改

阅读量4.4k

点赞数 4

分类专栏：前端文章标签： javascript 前端开发语言浏览器调用相机浏览器USB硬件交互

于 2022-05-07 16:30:20 首次发布

本文链接：https://blog.csdn.net/qq_33270001/article/details/124632110

版权

前端专栏收录该内容

82 篇文章 2 订阅

订阅专栏

一、写在前面

调用外部摄像头需要找到浏览器支持的api才行.

navigator 对象里就包含有 MediaDevices属性.其中就有个getUserMedia() 的方法。

语法

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

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

文档在这里: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

浏览器调用USB硬件系列

关注公众号“笔优站长”可阅读全部文章哟。

二、直接上代码

上面的小节拿到了浏览器的媒体设备列表了,下面就需要展示输出的mediaStream了.

需要用到video对象的 srcObject属性了.

HTMLMediaElement 接口的 srcObject 属性设定或返回一个对象，这个对象提供了一个与HTMLMediaElement关联的媒体源，这个对象通常是 MediaStream ，但根据规范可以是 MediaSource， Blob 或者 File。

需要注意: 截至 2020 年 3 月, 只有Safari 支持设置 MediaStream 之外的对象。在其他浏览器跟上之前, 对MediaSource, Blob 和 File, 请考虑返回创建具有{domxref(“URL.createObjectURL()”)}} 的 URL，并将其赋值给HTMLMediaElement.src 有关示例，请参阅下文。

文档在这里 :https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/srcObject

代码如下:
在这里插入图片描述

插上相机测试

在这里插入图片描述

完整的代码在这里,只需要新建一个.html后缀的文件,把下面的代码完整的复制进去就可以了.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>相机测试</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.btn {
				width: 100px;
				padding: 10px 0;
				border-radius: 4px;
				background: #ff5415;
				text-align: center;
				color: #fff;
				cursor: pointer;
				border: none;
				font-size: 16px;
			}

			video,
			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #ff5415;
				border-radius: 4px;
				margin-left: 5px;
			}

			.camera-warpper {
				padding: 20px 0;
				width: 100%;
			}

			.video-container {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btns {
				padding: 20px 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			button+button {
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="camera-warpper">
			<div class="video-container">
				<video id="camera-video"></video>
				<canvas id="camera-canvas" width="500" height="500"></canvas>
			</div>
			<div class="btns">
				<button class="btn" onclick="openCamera()">开启摄像<button>
				<button class="btn" onclick="takePicture()">拍照<button>
				<button class="btn" onclick="downPhoto()">下载</button>
			</div>
		</div>
	</body>
	<script>
		const config = {
			// video属性设置
			video: {
				width: 500,
				height: 500
			},
			// audio属性设置
			audio: true
		}

		const video = document.getElementById('camera-video');
		const canvas = document.getElementById("camera-canvas");

		/**
		 * 开启摄像
		 */
		function openCamera() {
			navigator.mediaDevices.getUserMedia(config).then(mediaStream => {
				//接收一个mediaStream参数与video标签进行对接
				console.log(mediaStream);
				video.srcObject = mediaStream;
				video.play();
			}).catch((err) => {
				console.error(err);
			});
		}

		/**
		 * 拍照、canvas绘制
		 */
		function takePicture() {
			let ctx = canvas.getContext('2d');
			ctx.drawImage(video, 0, 0, config.video.width, config.video.height);
		}

		/**
		 * canvas下载图片
		 */
		function downPhoto() {
			const MIME_TYPE = "image/png";
			const dlLink = document.createElement('a');
			dlLink.download = '测试照片';
			dlLink.href = canvas.toDataURL(MIME_TYPE);
			dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
			document.body.appendChild(dlLink);
			dlLink.click();
			document.body.removeChild(dlLink);
		}
	</script>
</html>