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>
<script>
import { ElMessage } from 'element-plus'
import { ElMessage } from 'element-plus';
import { Taoyao } from './components/Taoyao.js';
import LocalClient from './components/LocalClient.vue';
import RemoteClient from './components/RemoteClient.vue';

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

@@ -3,22 +3,22 @@
<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="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.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="exchangeVideoSource" :icon="Refresh" circle title="交换媒体" />
<el-button @click="localPhotograph" :icon="Camera" circle title="拍照" />
<el-button @click="localClientRecord" :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.mediaProducerStatus()" :icon="InfoFilled" circle title="媒体信息" />
<el-button @click="taoyao.exchangeVideoSource()" :icon="Refresh" circle title="交换媒体" />
<el-button @click="taoyao.localPhotograph(video)" :icon="Camera" circle title="本地拍照" />
<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.mediaProducerStatus()" :icon="InfoFilled" circle title="媒体信息" />
<el-popover placement="top" :width="240" trigger="hover">
<template #reference>
<el-button>视频质量</el-button>
</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="label" label="名称" />
</el-table>
@@ -58,13 +58,13 @@ export default {
},
data() {
return {
audio: null,
video: null,
clientRecord: false,
serverRecord: false,
audioStream: null,
videoStream: null,
dataProducer: null,
audio : null,
video : null,
clientRecord : false,
serverRecord : false,
audioStream : null,
videoStream : null,
dataProducer : null,
audioProducer: null,
videoProducer: null,
};
@@ -83,44 +83,26 @@ export default {
}
},
methods: {
localPhotograph() {
this.taoyao.localPhotograph(this.video);
},
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();
chooseRatio(row) {
const { value, label } = row;
this.taoyao.setLocalVideoConfig(label);
},
media(track, producer) {
if(track.kind === "audio") {
this.audioProducer = producer;
if (this.audioStream) {
this.audioStream.getAudioTracks().forEach(oldTrack => {
console.debug("关闭旧的媒体：", oldTrack);
oldTrack.stop();
});
}
this.taoyao.closeMediaStream(this.audioStream);
this.audioStream = new MediaStream();
this.audioStream.addTrack(track);
// 不用加载音频
} else if (track.kind === "video") {
this.videoProducer = producer;
if (this.videoStream) {
this.videoStream.getVideoTracks().forEach(oldTrack => {
console.debug("关闭旧的媒体：", oldTrack);
oldTrack.stop();
});
}
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);
console.debug("不支持的媒体类型", track);
}
},
},

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

@@ -1,32 +1,31 @@
<!-- 远程终端 -->
<!--
注意：当生产者关闭以后不能操作该生产者生产的消费者
注意：当生产者关闭以后不能操作消费该生产者的消费者
-->
<template>
<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="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.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.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.controlServerRecord(client.clientId, (serverRecord = !serverRecord))" :icon="MostlyCloudy" circle title="服务端录像" :type="serverRecord ? 'danger' : ''" />
<el-button @click="taoyao.mediaConsumerStatus()" :icon="InfoFilled" circle title="媒体信息" />
<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="roomExpel" title="踢出" :icon="CircleClose" circle />
<el-button @click="taoyao.roomExpel(client.clientId)" title="踢出" :icon="CircleClose" circle />
</div>
</div>
</template>
@@ -62,13 +61,13 @@ export default {
},
data() {
return {
audio: null,
video: null,
clientRecord: false,
serverRecord: false,
audioStream: null,
videoStream: null,
dataConsumer: null,
audio : null,
video : null,
clientRecord : false,
serverRecord : false,
audioStream : null,
videoStream : null,
dataConsumer : null,
audioConsumer: null,
videoConsumer: null,
};
@@ -77,6 +76,7 @@ export default {
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;
@@ -90,32 +90,27 @@ export default {
}
},
methods: {
roomExpel() {
this.taoyao.roomExpel(this.client.clientId);
chooseRatio(row) {
const { value, label } = row;
this.taoyao.setVideoConfig(this.client.clientId, label);
},
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.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') {
this.videoConsumer = consumer;
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);
}
}
}

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);
}
}
}

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;
if (!self.roomId) {
this.callbackError("无效房间");
@@ -1943,8 +1945,8 @@ class Taoyao extends RemoteClient {
} = response.body;
self.recvTransport = self.mediasoupDevice.createRecvTransport({
id: transportId,
iceParameters,
iceCandidates,
iceParameters,
dtlsParameters: {
...dtlsParameters,
role: "auto",
@@ -1987,6 +1989,7 @@ class Taoyao extends RemoteClient {
}
/**
* 生产音频
*
* TODO：重复点击
*/
async produceAudio() {
@@ -2242,6 +2245,28 @@ class Taoyao extends RemoteClient {
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配置
*
@@ -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 };

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

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