[*] 踢人 拉人 切换视频媒体

This commit is contained in:
acgist
2023-03-12 12:29:53 +08:00
parent 1bf8fbe415
commit ab8646a21f
39 changed files with 1779 additions and 352 deletions

View File

@@ -5,11 +5,11 @@
<video ref="video"></video>
<p class="title">{{ client?.name || "" }}</p>
<div class="buttons" :style="{'--volume': client?.volume}">
<el-button v-show="!client.audioActive" type="primary" title="打开麦克风" :icon="Microphone" circle />
<el-button v-show="client.audioActive" type="danger" title="关闭麦克风" :icon="Mute" circle />
<el-button v-show="!client.videoActive" type="primary" title="打开摄像头" :icon="VideoPlay" circle />
<el-button v-show="client.videoActive" type="danger" title="关闭摄像头" :icon="VideoPause" circle />
<el-button title="交换媒体" :icon="Refresh" circle />
<el-button @click="taoyao.mediaProducerResume(audioProducer.id)" v-show="audioProducer && audioProducer.paused" type="primary" title="打开麦克风" :icon="Microphone" circle />
<el-button @click="taoyao.mediaProducerPause(audioProducer.id)" v-show="audioProducer && !audioProducer.paused" type="danger" title="关闭麦克风" :icon="Mute" circle />
<el-button @click="taoyao.mediaProducerResume(videoProducer.id)" v-show="videoProducer && videoProducer.paused" type="primary" title="打开摄像头" :icon="VideoPlay" circle />
<el-button @click="taoyao.mediaProducerPause(videoProducer.id)" v-show="videoProducer && !videoProducer.paused" type="danger" title="关闭摄像头" :icon="VideoPause" circle />
<el-button @click="exchangeVideoSource" title="交换媒体" :icon="Refresh" circle />
<el-button title="拍照" :icon="Camera" circle />
<el-button title="录像" :icon="VideoCamera" circle />
<el-button title="媒体信息" :icon="InfoFilled" circle />
@@ -104,15 +104,26 @@ export default {
}
},
methods: {
media(track) {
if (track.kind === "video") {
exchangeVideoSource() {
// TODO文件支持
this.taoyao.videoSource = this.taoyao.videoSource === "camera" ? "screen" : "camera";
this.taoyao.updateVideoProducer();
},
media(track, producer) {
if(track.kind === "audio") {
// 不用加载音频
this.audioProducer = producer;
} else if (track.kind === "video") {
this.videoProducer = producer;
if (this.videoStream) {
// TODO资源释放
} else {
this.videoStream = new MediaStream();
this.videoStream.addTrack(track);
this.video.srcObject = this.videoStream;
this.videoStream.getVideoTracks().forEach(oldTrack => {
console.debug("关闭旧的媒体:", oldTrack);
oldTrack.stop();
});
}
this.videoStream = new MediaStream();
this.videoStream.addTrack(track);
this.video.srcObject = this.videoStream;
this.video.play().catch((error) => console.warn("视频播放失败", error));
} else {
console.debug("本地不支持的媒体类型:", track);