106 lines
3.2 KiB
Vue
106 lines
3.2 KiB
Vue
<!-- 远程终端 -->
|
||
<template>
|
||
<div class="client">
|
||
<audio ref="audio"></audio>
|
||
<video ref="video"></video>
|
||
<p class="title">{{ client?.name || "" }}</p>
|
||
<div class="buttons" :style="{'--volume': client?.volume}">
|
||
<el-button @click="taoyao.mediaConsumerResume(audioConsumer.id)" v-show="audioConsumer && audioConsumer.paused" type="primary" title="打开麦克风" :icon="Microphone" circle />
|
||
<el-button @click="taoyao.mediaConsumerPause(audioConsumer.id)" v-show="audioConsumer && !audioConsumer.paused" type="danger" title="关闭麦克风" :icon="Mute" circle />
|
||
<el-button @click="taoyao.mediaConsumerResume(videoConsumer.id)" v-show="videoConsumer && videoConsumer.paused" type="primary" title="打开摄像头" :icon="VideoPlay" circle />
|
||
<el-button @click="taoyao.mediaConsumerPause(videoConsumer.id)" v-show="videoConsumer && !videoConsumer.paused" type="danger" title="关闭摄像头" :icon="VideoPause" circle />
|
||
<el-button @click="taoyao.controlPhotograph(client.clientId)" title="拍照" :icon="Camera" circle />
|
||
<el-button @click="taoyao.controlRecord(client.clientId, (record = !record))" title="录像" :type="record ? 'danger' : ''" :icon="VideoCamera" circle />
|
||
<el-button title="媒体信息" :icon="InfoFilled" circle />
|
||
<el-button @click="roomExpel" title="踢出" :icon="CircleClose" circle />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
Mute,
|
||
Camera,
|
||
Refresh,
|
||
VideoPlay,
|
||
VideoPause,
|
||
InfoFilled,
|
||
Microphone,
|
||
VideoCamera,
|
||
CircleClose,
|
||
} from "@element-plus/icons-vue";
|
||
export default {
|
||
name: "RemoteClient",
|
||
setup() {
|
||
return {
|
||
Mute,
|
||
Camera,
|
||
Refresh,
|
||
VideoPlay,
|
||
VideoPause,
|
||
InfoFilled,
|
||
Microphone,
|
||
VideoCamera,
|
||
CircleClose,
|
||
};
|
||
},
|
||
data() {
|
||
return {
|
||
audio: null,
|
||
video: null,
|
||
record: false,
|
||
audioStream: null,
|
||
videoStream: null,
|
||
dataConsumer: null,
|
||
audioConsumer: null,
|
||
videoConsumer: null,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.audio = this.$refs.audio;
|
||
this.video = this.$refs.video;
|
||
this.client.proxy = this;
|
||
},
|
||
props: {
|
||
"client": {
|
||
type: Object
|
||
},
|
||
"taoyao": {
|
||
type: Object
|
||
}
|
||
},
|
||
methods: {
|
||
roomExpel() {
|
||
this.taoyao.roomExpel(this.client.clientId);
|
||
},
|
||
media(track, consumer) {
|
||
if(track.kind === 'audio') {
|
||
this.audioConsumer = consumer;
|
||
if (this.audioStream) {
|
||
// TODO：资源释放
|
||
} else {
|
||
this.audioStream = new MediaStream();
|
||
this.audioStream.addTrack(track);
|
||
this.audio.srcObject = this.audioStream;
|
||
}
|
||
this.audio.play().catch((error) => console.warn("视频播放失败", error));
|
||
} else if(track.kind === 'video') {
|
||
this.videoConsumer = consumer;
|
||
if (this.videoStream) {
|
||
// TODO：资源释放
|
||
} else {
|
||
this.videoStream = new MediaStream();
|
||
this.videoStream.addTrack(track);
|
||
this.video.srcObject = this.videoStream;
|
||
}
|
||
this.video.play().catch((error) => console.warn("视频播放失败", error));
|
||
} else {
|
||
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.client .buttons:after{width:var(--volume);}
|
||
</style> |