【js】获取媒体流实现拍照功能，摄像头切换

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue'

	const videoConstraints = reactive({
		width: 500,
		height: 300
	});
	let picArr = reactive([])
	let videoNode = ref(null)
	let show = ref(true)
	let stream = reactive({})
	onMounted(async () => {
	// 获取视频流，并用 video 标签播放
		videoNode.value = document.querySelector('#video');
		stream = await navigator.mediaDevices.getUserMedia({
			audio: true,
			video: videoConstraints
		});
		videoNode.value.srcObject = stream;
		videoNode.value.play();
	})
	// 拍照
	const photo = () => {
		// 通过canvas捕捉video流，生成base64格式图片
		const canvas = document.createElement('canvas');
		const context = canvas.getContext('2d');
		canvas.width = 500;
		canvas.height = 300;
		context.drawImage(videoNode.value, 0, 0, canvas.width, canvas.height);
		// download(canvas.toDataURL('image/jpeg'));
		picArr.push(canvas.toDataURL('image/jpeg'))
		// 下载图片
		// function download(src) {
		// 	if (!src) return;
		// 	const a = document.createElement('a');
		// 	a.setAttribute('download', new Date());
		// 	a.href = src;
		// 	a.click();
		// }
	}
	// 切换镜头
	const switchs = async () => {
		show.value = !show.value
		// enumerateDevices获取所有媒体设备
		const mediaDevices = await navigator.mediaDevices.enumerateDevices();

		// 通过设备实例king属性videoinput，过滤获取摄像头设备
		const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput') || [];
		console.log(mediaDevices, videoDevices, 'videoDevices')

		if (show.value) {
			// 获取前置摄像头
			const videoDeviceId = videoDevices[0].deviceId;
			videoConstraints.deviceId = {
				exact: videoDeviceId
			}
			stream = await navigator.mediaDevices.getUserMedia({
				audio: true,
				video: videoConstraints
			});

		} else {
			// 获取后置摄像头
			if (videoDevices[1]) {
				const videoDeviceId = videoDevices[1].deviceId;
				videoConstraints.deviceId = {
					exact: videoDeviceId
				}
				stream = await navigator.mediaDevices.getUserMedia({
					audio: true,
					video: videoConstraints
				});
			}

		}

		videoNode.value.srcObject = stream;
		videoNode.value.play();

	}
	const close = async () => {
		stream.getTracks().forEach(track => track.stop());
		stream = null;
	}
</script>

<template>
	<video id="video" autoplay playsinline muted></video>
	<button @click="photo">拍照</button>
	<button @click="switchs">{{show?'切换至后镜头':'切换至前镜头'}}</button>
	<button @click="close">关闭摄像头设备
	</button>
	<br />
	<img v-for="(pic,index) in picArr" :src="pic" :key="index" alt="" />
</template>

<style scoped>
	img {
		width: 500px;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105