JavaDemo/konva-demo
JavaDemo
/
konva-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: JavaDemo:ff6dcd05a331676fecbbc3bec1f4abacaf9a037c
Branches Tags
JavaDemo:master
..
compare: JavaDemo:3da5abd9795b73c0ea0723e219708970008b3690
Branches Tags
JavaDemo:master

No commits in common. "ff6dcd05a331676fecbbc3bec1f4abacaf9a037c" and "3da5abd9795b73c0ea0723e219708970008b3690" have entirely different histories.
ff6dcd05a3 ... 3da5abd979

1 changed files with 0 additions and 87 deletions
Show Stats Expand all files Collapse all files

87
src/views/media/video/index.vue
View File

@ -1,87 +0,0 @@
<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>