qq27800734/taoyao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[*] 日常优化

Browse Source
This commit is contained in:
acgist
2023-07-09 08:02:52 +08:00
parent 245d054661
commit ff74d8330f
6 changed files with 140 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
taoyao-client-web/src/components/SessionClient.vue
View File

@@ -3,7 +3,7 @@
<div class="client">
<audio ref="audio"></audio>
<video ref="video"></video>
<p class="title">{{ client.name || "" }}</p>
<p class="title">{{ client.name || "未知终端" }}</p>
<div class="buttons">
<el-button @click="client.pause('audio')" v-show="client.localAudioEnabled" type="primary" title="关闭本地麦克风" :icon="Mic" circle />
<el-button @click="client.resume('audio')" v-show="!client.localAudioEnabled" type="danger" title="打开本地麦克风" :icon="Mic" circle />
@@ -13,18 +13,18 @@
<el-button @click="taoyao.sessionPause(client.id, 'audio')" v-show="audioStream && client.remoteAudioEnabled" type="primary" title="关闭远程麦克风" :icon="Microphone" circle class="mic" :style="{'--volume': client.volume}" />
<el-button @click="taoyao.sessionResume(client.id, 'video')" v-show="videoStream && !client.remoteVideoEnabled" type="danger" title="打开远程摄像头" :icon="VideoPlay" circle />
<el-button @click="taoyao.sessionPause(client.id, 'video')" v-show="videoStream && client.remoteVideoEnabled" type="primary" title="关闭远程摄像头" :icon="VideoPause" circle />
<el-button @click="taoyao.controlPhotograph(client.clientId)" :icon="Camera" circle title="拍照" />
<el-button @click="taoyao.controlClientRecord(client.clientId, (clientRecord = !clientRecord))" :icon="VideoCamera" circle title="录像" :type="clientRecord ? 'danger' : ''" />
<el-button @click="taoyao.controlPhotograph(client.clientId)" :icon="Camera" circle title="终端拍照" />
<el-button @click="taoyao.controlClientRecord(client.clientId, (clientRecord = !clientRecord))" :icon="VideoCamera" circle title="终端录像" :type="clientRecord ? 'danger' : ''" />
<el-popover placement="top" :width="240" trigger="hover">
<template #reference>
<el-button>视频质量</el-button>
</template>
<el-table :data="taoyao.options">
<el-table @row-click="chooseRatio" :data="taoyao.options">
<el-table-column width="100" property="value" label="标识" />
<el-table-column width="100" property="label" label="名称" />
</el-table>
</el-popover>
<el-button @click="close" title="踢出" :icon="CircleClose" circle />
<el-button @click="taoyao.sessionClose(client.id)" title="踢出" :icon="CircleClose" circle />
</div>
</div>
</template>
@@ -62,18 +62,19 @@ export default {
},
data() {
return {
audio: null,
video: null,
audio : null,
video : null,
clientRecord: false,
serverRecord: false,
audioStream: null,
videoStream: null,
audioStream : null,
videoStream : null,
};
},
async mounted() {
this.audio = this.$refs.audio;
this.video = this.$refs.video;
this.client.proxy = this;
// 状态查询
const status = await this.taoyao.clientStatus(this.client.clientId);
this.clientRecord = status.clientRecording;
this.serverRecord = status.serverRecording;
@@ -87,30 +88,25 @@ export default {
}
},
methods: {
close() {
this.taoyao.sessionClose(this.client.id);
chooseRatio(row) {
const { value, label } = row;
this.taoyao.setVideoConfig(this.client.clientId, label);
},
media(track) {
if(track.kind === 'audio') {
if (this.audioStream) {
// TODO：资源释放
} else {
this.audioStream = new MediaStream();
this.audioStream.addTrack(track);
this.audio.srcObject = this.audioStream;
}
this.taoyao.closeMediaStream(this.audioStream);
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') {
if (this.videoStream) {
// TODO：资源释放
} else {
this.videoStream = new MediaStream();
this.videoStream.addTrack(track);
this.video.srcObject = this.videoStream;
}
this.taoyao.closeMediaStream(this.videoStream);
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);
}
}
}