添加调用媒体功能

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>