<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>
