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

2
taoyao-client-web/src/App.vue
View File

@@ -100,7 +100,7 @@
</template> </template>
<script> <script>
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus';
import { Taoyao } from './components/Taoyao.js'; import { Taoyao } from './components/Taoyao.js';
import LocalClient from './components/LocalClient.vue'; import LocalClient from './components/LocalClient.vue';
import RemoteClient from './components/RemoteClient.vue'; import RemoteClient from './components/RemoteClient.vue';

58
taoyao-client-web/src/components/LocalClient.vue
View File

@@ -3,22 +3,22 @@
<div class="client"> <div class="client">
<audio ref="audio"></audio> <audio ref="audio"></audio>
<video ref="video"></video> <video ref="video"></video>
<p class="title">{{ client.name || "" }}</p> <p class="title">{{ client.name || "未知终端" }}</p>
<div class="buttons"> <div class="buttons">
<el-button @click="taoyao.mediaProducerResume(audioProducer.id)" v-show="audioProducer && audioProducer.paused" type="danger" title="打开麦克风" :icon="Mute" circle /> <el-button @click="taoyao.mediaProducerResume(audioProducer.id)" v-show="audioProducer && audioProducer.paused" type="danger" title="打开麦克风" :icon="Mute" circle />
<el-button @click="taoyao.mediaProducerPause(audioProducer.id)" v-show="audioProducer && !audioProducer.paused" type="primary" title="关闭麦克风" :icon="Microphone" circle class="mic" :style="{'--volume': client.volume}" /> <el-button @click="taoyao.mediaProducerPause(audioProducer.id)" v-show="audioProducer && !audioProducer.paused" type="primary" title="关闭麦克风" :icon="Microphone" circle class="mic" :style="{'--volume': client.volume}" />
<el-button @click="taoyao.mediaProducerResume(videoProducer.id)" v-show="videoProducer && videoProducer.paused" type="danger" title="打开摄像头" :icon="VideoPlay" circle /> <el-button @click="taoyao.mediaProducerResume(videoProducer.id)" v-show="videoProducer && videoProducer.paused" type="danger" title="打开摄像头" :icon="VideoPlay" circle />
<el-button @click="taoyao.mediaProducerPause(videoProducer.id)" v-show="videoProducer && !videoProducer.paused" type="primary" title="关闭摄像头" :icon="VideoPause" circle /> <el-button @click="taoyao.mediaProducerPause(videoProducer.id)" v-show="videoProducer && !videoProducer.paused" type="primary" title="关闭摄像头" :icon="VideoPause" circle />
<el-button @click="exchangeVideoSource" :icon="Refresh" circle title="交换媒体" /> <el-button @click="taoyao.exchangeVideoSource()" :icon="Refresh" circle title="交换媒体" />
<el-button @click="localPhotograph" :icon="Camera" circle title="拍照" /> <el-button @click="taoyao.localPhotograph(video)" :icon="Camera" circle title="本地拍照" />
<el-button @click="localClientRecord" :icon="VideoCamera" circle title="录像" :type="clientRecord ? 'danger' : ''" /> <el-button @click="taoyao.localClientRecord(audioStream, videoStream, (clientRecord = !clientRecord))" :icon="VideoCamera" circle title="本地录像" :type="clientRecord ? 'danger' : ''" />
<el-button @click="taoyao.controlServerRecord(client.clientId, (serverRecord = !serverRecord))" :icon="MostlyCloudy" circle title="录像" :type="serverRecord ? 'danger' : ''" /> <el-button @click="taoyao.controlServerRecord(client.clientId, (serverRecord = !serverRecord))" :icon="MostlyCloudy" circle title="服务端录像" :type="serverRecord ? 'danger' : ''" />
<el-button @click="taoyao.mediaProducerStatus()" :icon="InfoFilled" circle title="媒体信息" /> <el-button @click="taoyao.mediaProducerStatus()" :icon="InfoFilled" circle title="媒体信息" />
<el-popover placement="top" :width="240" trigger="hover"> <el-popover placement="top" :width="240" trigger="hover">
<template #reference> <template #reference>
<el-button>视频质量</el-button> <el-button>视频质量</el-button>
</template> </template>
<el-table :data="taoyao.options"> <el-table @cell-click="chooseRatio" :data="taoyao.options">
<el-table-column width="100" property="value" label="标识" /> <el-table-column width="100" property="value" label="标识" />
<el-table-column width="100" property="label" label="名称" /> <el-table-column width="100" property="label" label="名称" />
</el-table> </el-table>
@@ -58,13 +58,13 @@ export default {
}, },
data() { data() {
return { return {
audio: null, audio : null,
video: null, video : null,
clientRecord: false, clientRecord : false,
serverRecord: false, serverRecord : false,
audioStream: null, audioStream : null,
videoStream: null, videoStream : null,
dataProducer: null, dataProducer : null,
audioProducer: null, audioProducer: null,
videoProducer: null, videoProducer: null,
}; };
@@ -83,44 +83,26 @@ export default {
} }
}, },
methods: { methods: {
localPhotograph() { chooseRatio(row) {
this.taoyao.localPhotograph(this.video); const { value, label } = row;
}, this.taoyao.setLocalVideoConfig(label);
localClientRecord() {
this.clientRecord = !this.clientRecord;
this.taoyao.localClientRecord(this.audioStream, this.videoStream, this.clientRecord);
},
exchangeVideoSource() {
// TODO：文件支持
this.taoyao.videoSource = this.taoyao.videoSource === "camera" ? "screen" : "camera";
this.taoyao.updateVideoProducer();
}, },
media(track, producer) { media(track, producer) {
if(track.kind === "audio") { if(track.kind === "audio") {
this.audioProducer = producer; this.audioProducer = producer;
if (this.audioStream) { this.taoyao.closeMediaStream(this.audioStream);
this.audioStream.getAudioTracks().forEach(oldTrack => {
console.debug("关闭旧的媒体：", oldTrack);
oldTrack.stop();
});
}
this.audioStream = new MediaStream(); this.audioStream = new MediaStream();
this.audioStream.addTrack(track); this.audioStream.addTrack(track);
// 不用加载音频 // 不用加载音频
} else if (track.kind === "video") { } else if (track.kind === "video") {
this.videoProducer = producer; this.videoProducer = producer;
if (this.videoStream) { this.taoyao.closeMediaStream(this.videoStream);
this.videoStream.getVideoTracks().forEach(oldTrack => {
console.debug("关闭旧的媒体：", oldTrack);
oldTrack.stop();
});
}
this.videoStream = new MediaStream(); this.videoStream = new MediaStream();
this.videoStream.addTrack(track); this.videoStream.addTrack(track);
this.video.srcObject = this.videoStream; this.video.srcObject = this.videoStream;
this.video.play().catch((error) => console.warn("视频播放失败", error)); this.video.play().catch((error) => console.warn("视频播放失败", error));
} else { } else {
console.debug("本地不支持的媒体类型：", track); console.debug("不支持的媒体类型", track);
} }
}, },
}, },

55
taoyao-client-web/src/components/RemoteClient.vue
View File

@@ -1,32 +1,31 @@
<!-- 远程终端 --> <!-- 远程终端 -->
<!-- <!--
注意：当生产者关闭以后不能操作该生产者生产的消费者 注意：当生产者关闭以后不能操作消费该生产者的消费者
--> -->
<template> <template>
<div class="client"> <div class="client">
<audio ref="audio"></audio> <audio ref="audio"></audio>
<video ref="video"></video> <video ref="video"></video>
<p class="title">{{ client.name || "" }}</p> <p class="title">{{ client.name || "未知终端" }}</p>
<div class="buttons"> <div class="buttons">
<el-button @click="taoyao.mediaConsumerResume(audioConsumer.id)" v-show="audioConsumer && audioConsumer.paused" type="danger" title="打开麦克风" :icon="Mute" circle /> <el-button @click="taoyao.mediaConsumerResume(audioConsumer.id)" v-show="audioConsumer && audioConsumer.paused" type="danger" title="打开麦克风" :icon="Mute" circle />
<el-button @click="taoyao.mediaConsumerPause(audioConsumer.id)" v-show="audioConsumer && !audioConsumer.paused" type="primary" title="关闭麦克风" :icon="Microphone" circle class="mic" :style="{'--volume': client.volume}" /> <el-button @click="taoyao.mediaConsumerPause(audioConsumer.id)" v-show="audioConsumer && !audioConsumer.paused" type="primary" title="关闭麦克风" :icon="Microphone" circle class="mic" :style="{'--volume': client.volume}" />
<el-button @click="taoyao.mediaConsumerResume(videoConsumer.id)" v-show="videoConsumer && videoConsumer.paused" type="danger" title="打开摄像头" :icon="VideoPlay" circle /> <el-button @click="taoyao.mediaConsumerResume(videoConsumer.id)" v-show="videoConsumer && videoConsumer.paused" type="danger" title="打开摄像头" :icon="VideoPlay" circle />
<el-button @click="taoyao.mediaConsumerPause(videoConsumer.id)" v-show="videoConsumer && !videoConsumer.paused" type="primary" title="关闭摄像头" :icon="VideoPause" circle /> <el-button @click="taoyao.mediaConsumerPause(videoConsumer.id)" v-show="videoConsumer && !videoConsumer.paused" type="primary" title="关闭摄像头" :icon="VideoPause" circle />
<el-button @click="taoyao.controlPhotograph(client.clientId)" :icon="Camera" circle title="拍照" /> <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.controlClientRecord(client.clientId, (clientRecord = !clientRecord))" :icon="VideoCamera" circle title="终端录像" :type="clientRecord ? 'danger' : ''" />
<el-button @click="taoyao.controlServerRecord(client.clientId, (serverRecord = !serverRecord))" :icon="MostlyCloudy" circle title="服务端录像" :type="serverRecord ? 'danger' : ''" /> <el-button @click="taoyao.controlServerRecord(client.clientId, (serverRecord = !serverRecord))" :icon="MostlyCloudy" circle title="服务端录像" :type="serverRecord ? 'danger' : ''" />
<el-button @click="taoyao.mediaConsumerStatus()" :icon="InfoFilled" circle title="媒体信息" /> <el-button @click="taoyao.mediaConsumerStatus()" :icon="InfoFilled" circle title="媒体信息" />
<el-popover placement="top" :width="240" trigger="hover"> <el-popover placement="top" :width="240" trigger="hover">
<template #reference> <template #reference>
<el-button>视频质量</el-button> <el-button>视频质量</el-button>
</template> </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="value" label="标识" />
<el-table-column width="100" property="label" label="名称" /> <el-table-column width="100" property="label" label="名称" />
</el-table> </el-table>
</el-popover> </el-popover>
<el-button @click="roomExpel" title="踢出" :icon="CircleClose" circle /> <el-button @click="taoyao.roomExpel(client.clientId)" title="踢出" :icon="CircleClose" circle />
</div> </div>
</div> </div>
</template> </template>
@@ -62,13 +61,13 @@ export default {
}, },
data() { data() {
return { return {
audio: null, audio : null,
video: null, video : null,
clientRecord: false, clientRecord : false,
serverRecord: false, serverRecord : false,
audioStream: null, audioStream : null,
videoStream: null, videoStream : null,
dataConsumer: null, dataConsumer : null,
audioConsumer: null, audioConsumer: null,
videoConsumer: null, videoConsumer: null,
}; };
@@ -77,6 +76,7 @@ export default {
this.audio = this.$refs.audio; this.audio = this.$refs.audio;
this.video = this.$refs.video; this.video = this.$refs.video;
this.client.proxy = this; this.client.proxy = this;
// 状态查询
const status = await this.taoyao.clientStatus(this.client.clientId); const status = await this.taoyao.clientStatus(this.client.clientId);
this.clientRecord = status.clientRecording; this.clientRecord = status.clientRecording;
this.serverRecord = status.serverRecording; this.serverRecord = status.serverRecording;
@@ -90,32 +90,27 @@ export default {
} }
}, },
methods: { methods: {
roomExpel() { chooseRatio(row) {
this.taoyao.roomExpel(this.client.clientId); const { value, label } = row;
this.taoyao.setVideoConfig(this.client.clientId, label);
}, },
media(track, consumer) { media(track, consumer) {
if(track.kind === 'audio') { if(track.kind === 'audio') {
this.audioConsumer = consumer; this.audioConsumer = consumer;
if (this.audioStream) { this.taoyao.closeMediaStream(this.audioStream);
// TODO：资源释放 this.audioStream = new MediaStream();
} else { this.audioStream.addTrack(track);
this.audioStream = new MediaStream(); this.audio.srcObject = this.audioStream;
this.audioStream.addTrack(track);
this.audio.srcObject = this.audioStream;
}
this.audio.play().catch((error) => console.warn("音频播放失败", error)); this.audio.play().catch((error) => console.warn("音频播放失败", error));
} else if(track.kind === 'video') { } else if(track.kind === 'video') {
this.videoConsumer = consumer; this.videoConsumer = consumer;
if (this.videoStream) { this.taoyao.closeMediaStream(this.videoStream);
// TODO：资源释放 this.videoStream = new MediaStream();
} else { this.videoStream.addTrack(track);
this.videoStream = new MediaStream(); this.video.srcObject = this.videoStream;
this.videoStream.addTrack(track);
this.video.srcObject = this.videoStream;
}
this.video.play().catch((error) => console.warn("视频播放失败", error)); this.video.play().catch((error) => console.warn("视频播放失败", error));
} else { } else {
console.debug("不支持的媒体类型", track);
} }
} }
} }

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

@@ -3,7 +3,7 @@
<div class="client"> <div class="client">
<audio ref="audio"></audio> <audio ref="audio"></audio>
<video ref="video"></video> <video ref="video"></video>
<p class="title">{{ client.name || "" }}</p> <p class="title">{{ client.name || "未知终端" }}</p>
<div class="buttons"> <div class="buttons">
<el-button @click="client.pause('audio')" v-show="client.localAudioEnabled" type="primary" title="关闭本地麦克风" :icon="Mic" circle /> <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 /> <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.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.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.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.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.controlClientRecord(client.clientId, (clientRecord = !clientRecord))" :icon="VideoCamera" circle title="终端录像" :type="clientRecord ? 'danger' : ''" />
<el-popover placement="top" :width="240" trigger="hover"> <el-popover placement="top" :width="240" trigger="hover">
<template #reference> <template #reference>
<el-button>视频质量</el-button> <el-button>视频质量</el-button>
</template> </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="value" label="标识" />
<el-table-column width="100" property="label" label="名称" /> <el-table-column width="100" property="label" label="名称" />
</el-table> </el-table>
</el-popover> </el-popover>
<el-button @click="close" title="踢出" :icon="CircleClose" circle /> <el-button @click="taoyao.sessionClose(client.id)" title="踢出" :icon="CircleClose" circle />
</div> </div>
</div> </div>
</template> </template>
@@ -62,18 +62,19 @@ export default {
}, },
data() { data() {
return { return {
audio: null, audio : null,
video: null, video : null,
clientRecord: false, clientRecord: false,
serverRecord: false, serverRecord: false,
audioStream: null, audioStream : null,
videoStream: null, videoStream : null,
}; };
}, },
async mounted() { async mounted() {
this.audio = this.$refs.audio; this.audio = this.$refs.audio;
this.video = this.$refs.video; this.video = this.$refs.video;
this.client.proxy = this; this.client.proxy = this;
// 状态查询
const status = await this.taoyao.clientStatus(this.client.clientId); const status = await this.taoyao.clientStatus(this.client.clientId);
this.clientRecord = status.clientRecording; this.clientRecord = status.clientRecording;
this.serverRecord = status.serverRecording; this.serverRecord = status.serverRecording;
@@ -87,30 +88,25 @@ export default {
} }
}, },
methods: { methods: {
close() { chooseRatio(row) {
this.taoyao.sessionClose(this.client.id); const { value, label } = row;
this.taoyao.setVideoConfig(this.client.clientId, label);
}, },
media(track) { media(track) {
if(track.kind === 'audio') { if(track.kind === 'audio') {
if (this.audioStream) { this.taoyao.closeMediaStream(this.audioStream);
// TODO：资源释放 this.audioStream = new MediaStream();
} else { this.audioStream.addTrack(track);
this.audioStream = new MediaStream(); this.audio.srcObject = this.audioStream;
this.audioStream.addTrack(track);
this.audio.srcObject = this.audioStream;
}
this.audio.play().catch((error) => console.warn("音频播放失败", error)); this.audio.play().catch((error) => console.warn("音频播放失败", error));
} else if(track.kind === 'video') { } else if(track.kind === 'video') {
if (this.videoStream) { this.taoyao.closeMediaStream(this.videoStream);
// TODO：资源释放 this.videoStream = new MediaStream();
} else { this.videoStream.addTrack(track);
this.videoStream = new MediaStream(); this.video.srcObject = this.videoStream;
this.videoStream.addTrack(track);
this.video.srcObject = this.videoStream;
}
this.video.play().catch((error) => console.warn("视频播放失败", error)); this.video.play().catch((error) => console.warn("视频播放失败", error));
} else { } else {
console.debug("不支持的媒体类型", track);
} }
} }
} }

73
taoyao-client-web/src/components/Taoyao.js
View File

@@ -1809,8 +1809,10 @@ class Taoyao extends RemoteClient {
/************************ 媒体 ************************/ /************************ 媒体 ************************/
/** /**
* 生产媒体 * 生产媒体
*
* TODO：优先使用外部传入数据
*/ */
async mediaProduce() { async mediaProduce(audioTrack, videoTrack) {
const self = this; const self = this;
if (!self.roomId) { if (!self.roomId) {
this.callbackError("无效房间"); this.callbackError("无效房间");
@@ -1943,8 +1945,8 @@ class Taoyao extends RemoteClient {
} = response.body; } = response.body;
self.recvTransport = self.mediasoupDevice.createRecvTransport({ self.recvTransport = self.mediasoupDevice.createRecvTransport({
id: transportId, id: transportId,
iceParameters,
iceCandidates, iceCandidates,
iceParameters,
dtlsParameters: { dtlsParameters: {
...dtlsParameters, ...dtlsParameters,
role: "auto", role: "auto",
@@ -1987,6 +1989,7 @@ class Taoyao extends RemoteClient {
} }
/** /**
* 生产音频 * 生产音频
*
* TODO：重复点击 * TODO：重复点击
*/ */
async produceAudio() { async produceAudio() {
@@ -2242,6 +2245,28 @@ class Taoyao extends RemoteClient {
this.mediaProducerResume(this.videoProducer.id); this.mediaProducerResume(this.videoProducer.id);
} }
/**
* 切换视频来源
*/
async exchangeVideoSource(videoSource) {
const me = this;
if(videoSource) {
me.videoSource = videoSource;
} else {
if(me.videoSource === "file") {
me.videoSource = "camera";
} else if(me.videoSource === "camera") {
me.videoSource = "screen";
} else if(me.videoSource === "screen") {
me.videoSource = "file";
} else {
me.videoSource = "camera";
}
}
console.debug("切换视频来源", videoSource, me.videoSource);
await me.updateVideoProducer();
}
/** /**
* 更新视频生产者 * 更新视频生产者
*/ */
@@ -2606,6 +2631,30 @@ class Taoyao extends RemoteClient {
} }
} }
/**
* 配置视频
*
* @param {*} label 配置
*/
setLocalVideoConfig(label) {
const me = this;
// TODO：设置本地配置
me.updateVideoProducer();
}
/**
* 配置视频
*
* @param {*} label 配置
*/
setVideoConfig(clientId, label) {
const me = this;
if(clientId === me.clientId) {
me.setLocalVideoConfig(label);
}
// TODO：更新远程配置
}
/** /**
* TODO：设置track配置 * TODO：设置track配置
* *
@@ -2626,6 +2675,25 @@ class Taoyao extends RemoteClient {
*/ */
} }
/**
* 关闭媒体资源
*
* @param {*} mediaStream 媒体资源
*/
closeMediaStream(mediaStream) {
if(!mediaStream) {
return;
}
mediaStream.getAudioTracks().forEach(oldTrack => {
console.debug("关闭音频媒体", oldTrack);
oldTrack.stop();
});
mediaStream.getVideoTracks().forEach(oldTrack => {
console.debug("关闭视频媒体", oldTrack);
oldTrack.stop();
});
}
/** /**
* 关闭视频房间媒体 * 关闭视频房间媒体
*/ */
@@ -2696,4 +2764,3 @@ class Taoyao extends RemoteClient {
} }
export { Taoyao }; export { Taoyao };

4
taoyao-client-web/src/main.js
View File

@@ -1,7 +1,7 @@
import { createApp } from "vue";
import App from "./App.vue"; import App from "./App.vue";
import "./assets/main.css"; import { createApp } from "vue";
import ElementPlus from "element-plus"; import ElementPlus from "element-plus";
import "./assets/main.css";
import "element-plus/dist/index.css"; import "element-plus/dist/index.css";
const app = createApp(App); const app = createApp(App);