From 004f0603cc35fd79906e17d5a3743f3a235cc916 Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Wed, 31 Jul 2024 23:38:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B0=83=E7=94=A8=E5=AA=92?=
 =?UTF-8?q?=E4=BD=93=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/media/video/index.vue | 87 +++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 src/views/media/video/index.vue

diff --git a/src/views/media/video/index.vue b/src/views/media/video/index.vue
new file mode 100644
index 0000000..5e1a0db
--- /dev/null
+++ b/src/views/media/video/index.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import { onBeforeMount, ref } from 'vue';
+
+const userMediaList = ref();
+const deviceId = ref();
+const videoRef = ref<HTMLVideoElement>();
+const audioRef = ref<HTMLAudioElement>();
+const displayMedia = ref<HTMLVideoElement>();
+const displayMediaStream = ref<MediaStream>();
+
+/**
+ * * 获取设备并初始化内容
+ */
+const getUserMedia = async () => {
+	const mediaStream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true });
+	const mediaDeviceInfos = (userMediaList.value = await navigator.mediaDevices.enumerateDevices());
+	audioRef.value!.srcObject = mediaStream;
+
+	// // 设置媒体播放
+	const deviceInfos = mediaDeviceInfos.filter(device => device.kind == 'videoinput');
+	deviceId.value = deviceInfos[0].deviceId;
+	// videoRef.value!.srcObject = mediaStream;
+
+	// 共享屏幕
+	displayMediaStream.value = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
+	displayMedia.value!.srcObject = displayMediaStream.value;
+};
+
+/**
+ * * 设置媒体内容
+ */
+const setDeviceId = async () => {
+	videoRef.value!.srcObject = await navigator.mediaDevices.getUserMedia({ video: deviceId.value, audio: true });
+};
+
+/**
+ * * 开启屏幕共享
+ */
+const onOpenDisplayMedia = () => {
+	displayMedia.value!.play();
+};
+/**
+ * * 关闭屏幕共享
+ */
+const onCloseDisplayMedia = () => {
+	// displayMediaStream.value?.getVideoTracks().forEach(value => value.stop());
+	displayMedia.value?.pause();
+};
+
+/**
+ * * 开启麦克风
+ */
+const onOpenAudio = () => {
+	audioRef.value?.pause();
+};
+
+/**
+ * * 关闭麦克风
+ */
+const onCLoseAudio = () => {
+	audioRef.value?.play();
+};
+
+onBeforeMount(() => {
+	getUserMedia();
+});
+</script>
+
+<template>
+	<button class="btn btn-primary" @click="onOpenDisplayMedia">开启屏幕共享</button>
+	<button class="btn btn-danger" @click="onCloseDisplayMedia">关闭屏幕共享</button>
+	<button class="btn btn-success" @click="onOpenAudio">开启麦克风</button>
+	<button class="btn btn-danger" @click="onCLoseAudio">关闭麦克风</button>
+	<select class="form-select w-60" @change="setDeviceId">
+		<option v-for="(device, index) in userMediaList" :key="index" :value="(deviceId = device.deviceId)">{{ device.label }}</option>
+	</select>
+
+	<video ref="videoRef" autoplay controls />
+	<video ref="displayMedia" autoplay controls />
+	<audio ref="audioRef" autoplay controls />
+</template>
+
+<style lang="scss" scoped>
+video {
+	width: 500px;
+}
+</style>