JS调用多个摄像头

Mr_ZhangAdd

已于 2023-07-26 21:50:29 修改

阅读量1.1k

点赞数 1

文章标签： javascript 前端开发语言

于 2022-11-02 15:13:34 首次发布

本文链接：https://blog.csdn.net/Mr_ZhangAdd/article/details/127651602

版权

根据文档可以获知指定deviceId，获取指定的设备，文档地址：MediaDevices.getUserMedia() - Web APIs | MDNThe MediaDevices.getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#specifications

deviceId获取方式

let deviceIds = new Array();
navigator.mediaDevices.enumerateDevices().then((devicesList) => {
			console.log(devicesList)
			for(var i = 0; i < devicesList.length; i++) {
				if(devicesList[i]['kind'] == 'videoinput') {
					deviceIds.push(devicesList[i]['deviceId'])
				}
			}
		});

全部的html

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>拍照</title>
	</head>

	<body>
		<button onclick="openMedia()">开启摄像头</button>
		<button onclick="closeMedia()">关闭摄像头</button>
		<button onclick="takePhoto()">拍照</button><br/><br/>
		<video style="display: none;" class="src-video" width="300px" height="300px" autoplay="autoplay"></video>
		<canvas id="canvas" width="300px" height="300px" style="display: none;"></canvas>
		<img src="" alt="" class="photo">

		<button onclick="openMedia1()">开启摄像头1</button>
		<button onclick="closeMedia1()">关闭摄像头1</button>
		<button onclick="takePhoto1()">拍照1</button><br/><br/>
		<video style="display: none;" class="src-video1" width="300px" height="300px" autoplay="autoplay"></video>
		<canvas id="canvas1" width="300px" height="300px" style="display: none;"></canvas>
		<img src="" alt="" class="photo1">

	</body>
	<script>
		let deviceIds = new Array();
		navigator.mediaDevices.enumerateDevices().then((devicesList) => {
			console.log(devicesList)
			for(var i = 0; i < devicesList.length; i++) {
				if(devicesList[i]['kind'] == 'videoinput') {
					deviceIds.push(devicesList[i]['deviceId'])
				}
			}
		});

		let srcVideo = document.querySelector('video.src-video');
		let mediaStream;
		let photo = document.querySelector('img.photo');
		// 开启摄像头
		function openMedia() {
			photo.src = '';
			srcVideo.style.display = 'block';
			let constraints = {
				audio: false, //音频轨道
				video: {
					width: 300,
					height: 300,
					deviceId: deviceIds[0]
				} //视频轨道
			}
			let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
			mediaPromise.then(function(stream) {
				/* 使用这个stream stream */
				mediaStream = stream;
				srcVideo.srcObject = stream;
				srcVideo.play();
			}).catch(function(err) {
				/* 处理error */
				alert(err);
			});

			navigator.mediaDevices.enumerateDevices().then((devicesList) => {
				console.log(devicesList)
			});

		};

		// 拍照
		let takePhoto = function() {
			let canvas = document.querySelector('#canvas');
			//获取 `canvas`元素，根据`srcVideo`中的数据进行图片绘制 `ctx.drawImage()`；
			let ctx = canvas.getContext('2d');
			ctx.drawImage(srcVideo, 0, 0, 300, 300);
			//将 `canvas`绘制的图片信息，展示在 `img`标签中；
			photo.src = canvas.toDataURL();
			console.log(photo.src);
		};

		// 关闭摄像头
		let closeMedia = function() {
			mediaStream.getTracks().forEach(track => {
				track.stop();
			});
			srcVideo.style.display = 'none';
		};

		let srcVideo1 = document.querySelector('video.src-video1');
		let mediaStream1;
		let photo1 = document.querySelector('img.photo1');
		// 开启摄像头
		function openMedia1() {
			console.log(deviceIds)
			photo1.src = '';
			srcVideo1.style.display = 'block';
			let constraints = {
				audio: false, //音频轨道
				video: {
					width: 300,
					height: 300,
					deviceId: deviceIds[1]
				} //视频轨道
			}
			let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
			mediaPromise.then(function(stream) {
				/* 使用这个stream stream */
				mediaStream1 = stream;
				srcVideo1.srcObject = stream;
				srcVideo1.play();
			}).catch(function(err) {
				/* 处理error */
				alert(err);
			});
		};

		// 拍照
		let takePhoto1 = function() {
			let canvas = document.querySelector('#canvas1');
			//获取 `canvas`元素，根据`srcVideo1`中的数据进行图片绘制 `ctx.drawImage()`；
			let ctx = canvas.getContext('2d');
			ctx.drawImage(srcVideo1, 0, 0, 300, 300);
			//将 `canvas`绘制的图片信息，展示在 `img`标签中；
			photo1.src = canvas.toDataURL();
			console.log(photo1.src);
		};

		// 关闭摄像头
		let closeMedia1 = function() {
			mediaStream1.getTracks().forEach(track => {
				track.stop();
			});
			srcVideo1.style.display = 'none';
		};
	</script>

</html>