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-04-30 15:09:47 +08:00
parent 10551daf31
commit b57c077eb9
5 changed files with 57 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
taoyao-client-media/src/Taoyao.js
View File

@@ -837,8 +837,12 @@ class Taoyao {
consumer.close(); consumer.close();
}); });
consumer.on("producerpause", () => { consumer.on("producerpause", () => {
// 本地暂停不要操作
if(consumer.localPaused) {
return;
}
console.info("consumer producerpause：", consumer.id); console.info("consumer producerpause：", consumer.id);
// consumer.pause(); consumer.pause();
this.push( this.push(
protocol.buildMessage("media::consumer::pause", { protocol.buildMessage("media::consumer::pause", {
roomId: roomId, roomId: roomId,
@@ -847,8 +851,12 @@ class Taoyao {
); );
}); });
consumer.on("producerresume", () => { consumer.on("producerresume", () => {
// 本地暂停不要操作
if(consumer.localPaused) {
return;
}
console.info("consumer producerresume：", consumer.id); console.info("consumer producerresume：", consumer.id);
// consumer.resume(); consumer.resume();
this.push( this.push(
protocol.buildMessage("media::consumer::resume", { protocol.buildMessage("media::consumer::resume", {
roomId: roomId, roomId: roomId,
@@ -936,6 +944,7 @@ class Taoyao {
}) })
); );
await consumer.resume(); await consumer.resume();
consumer.localPaused = false;
this.push( this.push(
protocol.buildMessage("media::consumer::score", { protocol.buildMessage("media::consumer::score", {
score: consumer.score, score: consumer.score,
@@ -983,6 +992,7 @@ class Taoyao {
const room = this.rooms.get(roomId); const room = this.rooms.get(roomId);
const consumer = room?.consumers.get(consumerId); const consumer = room?.consumers.get(consumerId);
if(consumer) { if(consumer) {
consumer.localPaused = true;
console.info("暂停消费者：", consumerId); console.info("暂停消费者：", consumerId);
await consumer.pause(); await consumer.pause();
} else { } else {
@@ -1022,6 +1032,7 @@ class Taoyao {
const room = this.rooms.get(roomId); const room = this.rooms.get(roomId);
const consumer = room.consumers.get(consumerId); const consumer = room.consumers.get(consumerId);
if(consumer) { if(consumer) {
consumer.localPaused = false;
console.info("恢复消费者：", consumerId); console.info("恢复消费者：", consumerId);
await consumer.resume(); await consumer.resume();
} else { } else {

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

@@ -5,19 +5,19 @@
<video ref="video"></video> <video ref="video"></video>
<p class="title">{{ client?.name || "" }}</p> <p class="title">{{ client?.name || "" }}</p>
<div class="buttons" :style="{'--volume': client?.volume}"> <div class="buttons" :style="{'--volume': client?.volume}">
<el-button @click="taoyao.mediaProducerResume(audioProducer.id)" v-show="audioProducer && audioProducer.paused" type="primary" title="打开麦克风" :icon="Microphone" 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.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.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="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 @click="exchangeVideoSource" :icon="Refresh" circle title="交换媒体" />
<el-button title="拍照" :icon="Camera" circle /> <el-button :icon="Camera" circle title="拍照" />
<el-button title="录像" :icon="VideoCamera" circle /> <el-button :icon="VideoCamera" circle title="录像" />
<el-button title="媒体信息" :icon="InfoFilled" circle /> <el-button @click="taoyao.mediaConsumerStatus()" :icon="InfoFilled" circle title="媒体信息" />
<el-popover placement="top" :width="200" 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="options"> <el-table :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>
@@ -62,32 +62,6 @@ export default {
dataProducer: null, dataProducer: null,
audioProducer: null, audioProducer: null,
videoProducer: null, videoProducer: null,
options: [
{
value: "HD",
label: "高清",
},
{
value: "SD",
label: "标签",
},
{
value: "FD",
label: "超清",
},
{
value: "BD",
label: "蓝光",
},
{
value: "QD",
label: "2K",
},
{
value: "UD",
label: "4K",
},
],
}; };
}, },
mounted() { mounted() {

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

@@ -5,13 +5,23 @@
<video ref="video"></video> <video ref="video"></video>
<p class="title">{{ client?.name || "" }}</p> <p class="title">{{ client?.name || "" }}</p>
<div class="buttons" :style="{'--volume': client?.volume}"> <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 /> <!-- TODO：本地状态+远程状态计算当前状态 -->
<el-button @click="taoyao.mediaConsumerPause(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="primary" title="打开麦克风" :icon="Microphone" circle />
<el-button @click="taoyao.mediaConsumerResume(videoConsumer.id)" v-show="videoConsumer && videoConsumer.paused" type="primary" title="打开摄像头" :icon="VideoPlay" circle /> <el-button @click="taoyao.mediaConsumerPause(audioConsumer.id)" v-show="audioConsumer && !audioConsumer.paused" type="danger" title="关闭麦克风" :icon="Mute" circle />
<el-button @click="taoyao.mediaConsumerPause(videoConsumer.id)" v-show="videoConsumer && !videoConsumer.paused" type="danger" title="关闭摄像头" :icon="VideoPause" circle /> <el-button @click="taoyao.mediaConsumerResume(videoConsumer.id)" v-show="videoConsumer && videoConsumer.paused" type="primary" title="打开摄像头" :icon="VideoPlay" circle />
<el-button @click="taoyao.controlPhotograph(client.clientId)" title="拍照" :icon="Camera" circle /> <el-button @click="taoyao.mediaConsumerPause(videoConsumer.id)" v-show="videoConsumer && !videoConsumer.paused" type="danger" title="关闭摄像头" :icon="VideoPause" circle />
<el-button @click="taoyao.controlRecord(client.clientId, (record = !record))" title="录像" :type="record ? 'danger' : ''" :icon="VideoCamera" circle /> <el-button @click="taoyao.controlPhotograph(client.clientId)" :icon="Camera" circle title="拍照" />
<el-button title="媒体信息" :icon="InfoFilled" circle /> <el-button @click="taoyao.controlRecord(client.clientId, (record = !record))" :icon="VideoCamera" circle title="录像" :type="record ? '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-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="roomExpel" title="踢出" :icon="CircleClose" circle />
</div> </div>
</div> </div>

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

@@ -6,11 +6,20 @@
<p class="title">{{ client?.name || "" }}</p> <p class="title">{{ client?.name || "" }}</p>
<div class="buttons"> <div class="buttons">
<el-button @click="taoyao.sessionResume(client.id, 'audio')" v-show="audioStream && !client.remoteAudioEnabled" type="primary" title="打开麦克风" :icon="Microphone" circle /> <el-button @click="taoyao.sessionResume(client.id, 'audio')" v-show="audioStream && !client.remoteAudioEnabled" type="primary" title="打开麦克风" :icon="Microphone" circle />
<el-button @click="taoyao.sessionPause(client.id, 'audio')" v-show="audioStream && client.remoteAudioEnabled" type="danger" title="关闭麦克风" :icon="Mute" circle /> <el-button @click="taoyao.sessionPause(client.id, 'audio')" v-show="audioStream && client.remoteAudioEnabled" type="danger" title="关闭麦克风" :icon="Mute" circle />
<el-button @click="taoyao.sessionResume(client.id, 'video')" v-show="videoStream && !client.remoteVideoEnabled" type="primary" title="打开摄像头" :icon="VideoPlay" circle /> <el-button @click="taoyao.sessionResume(client.id, 'video')" v-show="videoStream && !client.remoteVideoEnabled" type="primary" title="打开摄像头" :icon="VideoPlay" circle />
<el-button @click="taoyao.sessionPause(client.id, 'video')" v-show="videoStream && client.remoteVideoEnabled" type="danger" title="关闭摄像头" :icon="VideoPause" circle /> <el-button @click="taoyao.sessionPause(client.id, 'video')" v-show="videoStream && client.remoteVideoEnabled" type="danger" title="关闭摄像头" :icon="VideoPause" circle />
<el-button @click="taoyao.controlPhotograph(client.clientId)" title="拍照" :icon="Camera" circle /> <el-button @click="taoyao.controlPhotograph(client.clientId)" :icon="Camera" circle title="拍照" />
<el-button @click="taoyao.controlRecord(client.clientId, (record = !record))" title="录像" :type="record ? 'danger' : ''" :icon="VideoCamera" circle /> <el-button @click="taoyao.controlRecord(client.clientId, (record = !record))" :icon="VideoCamera" circle title="录像" :type="record ? 'danger' : ''" />
<el-popover placement="top" :width="240" trigger="hover">
<template #reference>
<el-button>视频质量</el-button>
</template>
<el-table :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="close" title="踢出" :icon="CircleClose" circle />
</div> </div>
</div> </div>

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

@@ -431,6 +431,8 @@ class Taoyao extends RemoteClient {
password; password;
// 房间标识 // 房间标识
roomId; roomId;
// 视频质量
options;
// 回调事件 // 回调事件
callback; callback;
// 请求回调 // 请求回调
@@ -864,6 +866,7 @@ class Taoyao extends RemoteClient {
ideal: video.frameRate, ideal: video.frameRate,
max: media.maxFrameRate, max: media.maxFrameRate,
}; };
me.options = Object.keys(media.videos).map(key => ({value: key, label: media.videos[key].resolution}));
me.mediaConfig = media; me.mediaConfig = media;
me.webrtcConfig = webrtc; me.webrtcConfig = webrtc;
console.debug( console.debug(