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 11:33:06 +08:00
parent 3cbbc8f936
commit 165655c4e6
89 changed files with 343 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -68,22 +68,22 @@
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="sessionCall" v-if="roomActive === 'call'">监控</el-button>
<el-button type="primary" @click="roomCreate" v-if="roomActive === 'create'">创建</el-button>
<el-button type="primary" @click="roomEnter" v-if="roomActive === 'enter'">进入</el-button>
<el-button type="primary" @click="roomInvite" v-if="roomActive === 'invite'">邀请</el-button>
<el-button type="primary" @click="sessionCall" v-if="roomActive === 'call'" >监控</el-button>
<el-button type="primary" @click="roomCreate" v-if="roomActive === 'create'">创建</el-button>
<el-button type="primary" @click="roomEnter" v-if="roomActive === 'enter'" >进入</el-button>
<el-button type="primary" @click="roomInvite" v-if="roomActive === 'invite'">邀请</el-button>
</template>
</el-dialog>
<!-- 菜单 -->
<div class="menus">
<el-button @click="signalVisible = true" type="primary" :disabled="taoyao && taoyao.connect">连接信令</el-button>
<el-button @click="roomActive = 'call'; roomVisible = true;" :disabled="!taoyao">监控终端</el-button>
<el-button @click="roomActive = 'create'; roomVisible = true;" type="primary" :disabled="!taoyao">创建房间</el-button>
<el-button @click="roomActive = 'enter'; roomVisible = true;" type="primary" :disabled="!taoyao">选择房间</el-button>
<el-button @click="roomActive = 'invite'; roomVisible = true;" :disabled="!taoyao || !taoyao.roomId">邀请终端</el-button>
<el-button @click="roomLeave" :disabled="!taoyao || !taoyao.roomId">离开房间</el-button>
<el-button @click="roomClose" :disabled="!taoyao || !taoyao.roomId" type="danger">关闭房间</el-button>
<el-button @click="signalVisible = true" :disabled="taoyao && taoyao.connect" type="primary">连接信令</el-button>
<el-button @click="roomActive = 'call'; roomVisible = true;" :disabled="!taoyao || !taoyao.connect" >监控终端</el-button>
<el-button @click="roomActive = 'create'; roomVisible = true;" :disabled="!taoyao || !taoyao.connect" type="primary">创建房间</el-button>
<el-button @click="roomActive = 'enter'; roomVisible = true;" :disabled="!taoyao || !taoyao.connect" type="primary">选择房间</el-button>
<el-button @click="roomActive = 'invite'; roomVisible = true;" :disabled="!taoyao || !taoyao.connect || !taoyao.roomId" >邀请终端</el-button>
<el-button @click="roomLeave" :disabled="!taoyao || !taoyao.connect || !taoyao.roomId" >离开房间</el-button>
<el-button @click="roomClose" :disabled="!taoyao || !taoyao.connect || !taoyao.roomId" type="danger" >关闭房间</el-button>
</div>
<!-- 终端 -->
@@ -91,18 +91,18 @@
<!-- 本地终端 -->
<LocalClient v-if="taoyao && taoyao.roomId" ref="local-client" :client="taoyao" :taoyao="taoyao"></LocalClient>
<!-- 远程终端 -->
<RemoteClient v-for="(kv, index) in remoteClients" :key="'remote-client-' + kv[0]" :ref="'remote-client-' + kv[0]" :client="kv[1]" :taoyao="taoyao"></RemoteClient>
<RemoteClient v-for="kv in remoteClients" :key="'remote-client-' + kv[0]" :ref="'remote-client-' + kv[0]" :client="kv[1]" :taoyao="taoyao"></RemoteClient>
<!-- 远程会话 -->
<SessionClient v-for="(kv, index) in sessionClients" :key="'session-client-' + kv[0]" :ref="'session-client-' + kv[0]" :client="kv[1]" :taoyao="taoyao"></SessionClient>
<SessionClient v-for="kv in sessionClients" :key="'session-client-' + kv[0]" :ref="'session-client-' + kv[0]" :client="kv[1]" :taoyao="taoyao"></SessionClient>
</div>
</div>
</template>
<script>
import { ElMessage } from 'element-plus'
import { Taoyao } from "./components/Taoyao.js";
import LocalClient from './components/LocalClient.vue';
import RemoteClient from './components/RemoteClient.vue';
import { Taoyao } from './components/Taoyao.js';
import LocalClient from './components/LocalClient.vue';
import RemoteClient from './components/RemoteClient.vue';
import SessionClient from './components/SessionClient.vue';
export default {

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

@@ -152,6 +152,10 @@ const signalChannel = {
me.channel.onclose = async function () {
console.warn("信令通道关闭：", me.channel);
me.taoyao.connect = false;
if(me.channel && me.channel.readyState !== WebSocket.OPEN) {
me.taoyao.closeRoomMedia();
me.taoyao.closeSessionMedia();
}
if (me.reconnection) {
me.reconnect();
}
@@ -160,6 +164,10 @@ const signalChannel = {
me.channel.onerror = async function (e) {
console.error("信令通道异常：", me.channel, e);
me.taoyao.connect = false;
if(me.channel && me.channel.readyState !== WebSocket.OPEN) {
me.taoyao.closeRoomMedia();
me.taoyao.closeSessionMedia();
}
if (me.reconnection) {
me.reconnect();
}
@@ -177,8 +185,6 @@ const signalChannel = {
},
/**
* 重连
* TODO：重连重建会话、房间
* TODO：断开释放所有资源
*/
reconnect() {
const me = this;
@@ -317,6 +323,10 @@ class Session {
}
async close() {
if(this.closed) {
return;
}
console.debug("会话关闭", this.sessionId);
this.closed = true;
this.localAudioEnabled = false;
this.localVideoEnabled = false;
@@ -1477,7 +1487,7 @@ class Taoyao extends RemoteClient {
return;
}
console.info("关闭房间：", roomId);
me.closeMedia();
me.closeRoomMedia();
me.roomId = null;
me.remoteClients.clear();
}
@@ -1620,7 +1630,7 @@ class Taoyao extends RemoteClient {
me.push(protocol.buildMessage("room::leave", {
roomId: me.roomId
}));
me.closeMedia();
me.closeRoomMedia();
me.roomId = null;
me.remoteClients.clear();
}
@@ -1693,7 +1703,7 @@ class Taoyao extends RemoteClient {
// 检查设备
self.checkDevice();
// 释放资源
self.closeMedia();
self.closeRoomMedia();
/**
* 解决浏览器的自动播放策略问题
*/
@@ -2250,7 +2260,6 @@ class Taoyao extends RemoteClient {
const { sessionId } = message.body;
const session = me.sessionClients.get(sessionId);
if(session) {
console.debug("会话关闭", sessionId);
session.close();
me.sessionClients.delete(sessionId);
} else {
@@ -2377,9 +2386,10 @@ class Taoyao extends RemoteClient {
}
/**
* 关闭媒体
* 关闭视频房间媒体
*/
closeMedia() {
closeRoomMedia() {
console.info("关闭视频房间媒体");
let me = this;
if(me.audioTrack) {
me.audioTrack.stop();
@@ -2401,12 +2411,28 @@ class Taoyao extends RemoteClient {
me.consumers.clear();
me.dataConsumers.clear();
}
/**
* 关闭视频会话媒体
*/
closeSessionMedia() {
console.info("关闭视频会话媒体");
const me = this;
me.sessionClients.forEach((session, sessionId) => {
if(session) {
session.close();
} else {
console.debug("关闭会话无效", sessionId);
}
});
me.sessionClients.clear();
}
/**
* 关闭资源
*/
close() {
let me = this;
me.closeMedia();
me.closeRoomMedia();
me.closeSessionMedia();
if (me.signalChannel) {
me.signalChannel.close();
}