[+] 终端告警信令

taoyao-client-web/src/App.vue

@@ -6,6 +6,7 @@
     width="30%"
     title="终端设置"
     :show-close="false"
+    v-if="taoyao === null"
     v-model="signalVisible"
   >
     <el-form ref="SignalSetting">
@@ -81,7 +82,7 @@
 
   <!-- 菜单 -->
   <div class="menus">
-    <el-button type="primary" @click="signalVisible = true">连接信令</el-button>
+    <el-button type="primary" :disabled="taoyao !== null" @click="signalVisible = true">连接信令</el-button>
     <el-button type="primary" @click="roomActive = 'enter'; roomVisible = true;">选择房间</el-button>
     <el-button type="primary" @click="roomActive = 'create';roomVisible = true;">创建房间</el-button>
     <el-button>邀请终端</el-button>
@@ -107,8 +108,8 @@ export default {
   data() {
     return {
       room: {},
-      rooms: [],
-      medias: [],
+      rooms: null,
+      medias: null,
       config: {
         clientId: "taoyao",
         host: "localhost",
@@ -116,7 +117,7 @@ export default {
         username: "taoyao",
         password: "taoyao",
       },
-      taoyao: {},
+      taoyao: null,
       roomActive: "enter",
       roomVisible: false,
       signalVisible: false,
@@ -131,11 +132,13 @@ export default {
   },
   methods: {
     async connectSignal() {
-      let self = this;
-      self.taoyao = new Taoyao({ ...this.config });
-      self.remoteClients = self.taoyao.remoteClients;
-      await self.taoyao.connectSignal(self.callback, self.callbackMedia);
-      self.signalVisible = false;
+      const me = this;
+      me.taoyao = new Taoyao({ ...this.config });
+      await me.taoyao.connectSignal(me.callback, me.callbackMedia);
+      me.signalVisible = false;
+      me.remoteClients = me.taoyao.remoteClients;
+      // 全局绑定
+      window.taoyao = me.taoyao;
     },
     async loadList() {
       this.rooms = await this.taoyao.roomList();
@@ -208,8 +211,8 @@ export default {
 <style>
 .menus{width:100%;top:1rem;left:0;text-align:center;position:fixed;z-index:1;}
 .clients{width:100%;height:100%;top:0;left:0;position:fixed;}
-.client{float:left;width:50vw;height:50vh;border:1px solid #eee;}
-.client .buttons{width:100%;bottom:1rem;left:0;text-align:center;position:absolute;padding:0.8rem 0;background: rgba(0,0,0,0.6);text-align:center;}
+.client{float:left;width:50vw;height:50vh;box-shadow:0 0 1px 0px rgba(0,0,0,0.4);}
+.client .buttons{width:100%;bottom:1rem;left:0;text-align:center;position:absolute;padding:0.8rem 0;background: rgba(0,0,0,0.4);text-align:center;}
 .client audio{display:none;}
 .client video{width:100%;height:100%;}
 </style>

taoyao-client-web/src/components/LocalClient.vue

@@ -12,14 +12,15 @@
       <el-button title="拍照" :icon="Camera" circle />
       <el-button title="录像" :icon="VideoCamera" circle />
       <el-button title="媒体信息" :icon="InfoFilled" circle />
-      <el-select placeholder="视频质量">
-        <el-option
-          v-for="option in options"
-          :key="option.value"
-          :label="option.label"
-          :value="option.value"
-        />
-      </el-select>
+      <el-popover placement="top" :width="200" trigger="hover">
+        <template #reference>
+          <el-button>视频质量</el-button>
+        </template>
+        <el-table :data="options">
+          <el-table-column width="100" property="value" label="标识" />
+          <el-table-column width="100" property="label" label="名称" />
+        </el-table>
+      </el-popover>
     </div>
   </div>
 </template>

taoyao-client-web/src/components/Taoyao.js

@@ -1,7 +1,6 @@
 /**
  * 桃夭
  */
-import { TaoyaoClient } from "./TaoyaoClient.js";
 import * as mediasoupClient from "mediasoup-client";
 import {
   protocol,
@@ -30,9 +29,7 @@ const signalChannel = {
   channel: null,
   // 地址
   address: null,
-  // 回调
-  callback: null,
-  // 回调事件
+  // 请求回调
   callbackMapping: new Map(),
   // 心跳时间
   heartbeatTime: 30 * 1000,
@@ -156,15 +153,15 @@ const signalChannel = {
         }
         // 前置回调
         if (!done) {
-          await self.preCallback(message);
+          await self.taoyao.preCallback(message);
         }
         // 全局回调
         if (!done && self.callback) {
-          done = await self.callback(message);
+          done = await self.taoyao.callback(message);
         }
         // 后置回调
         if (!done) {
-          await self.postCallback(message);
+          await self.taoyao.postCallback(message);
         }
       };
     });
@@ -257,103 +254,6 @@ const signalChannel = {
     clearTimeout(self.heartbeatTimer);
     clearTimeout(self.reconnectTimer);
   },
-  /**
-   * 前置回调
-   *
-   * @param {*} message
-   */
-  async preCallback(message) {
-    const self = this;
-    switch (message.header.signal) {
-      case "client::config":
-        self.defaultClientConfig(message);
-        break;
-      case "client::register":
-        console.info("终端注册成功");
-        break;
-      case "media::consume":
-        await self.taoyao.consumeMedia(message);
-        break;
-    }
-  },
-  /**
-   * 后置回调
-   *
-   * @param {*} message 消息
-   */
-  async postCallback(message) {
-    const self = this;
-    switch (message.header.signal) {
-      case "client::reboot":
-        self.defaultClientReboot(message);
-        break;
-        case "client::shutdown":
-          self.defaultClientShutdown(message);
-          break;
-      case "room::enter":
-        self.defaultRoomEnter(message);
-        break;
-      case "room::client::list":
-        self.defaultRoomClientList(message);
-        break;
-      case "platform::error":
-        self.callbackError(message);
-        break;
-    }
-  },
-  /**
-   * 配置默认回调
-   *
-   * @param {*} message 消息
-   */
-  defaultClientConfig(message) {
-    const self = this;
-    self.taoyao.audio = { ...defaultAudioConfig, ...message.body.media.audio };
-    self.taoyao.video = { ...defaultVideoConfig, ...message.body.media.video };
-    self.taoyao.webrtc = message.body.webrtc;
-    console.debug(
-      "终端配置",
-      self.taoyao.audio,
-      self.taoyao.video,
-      self.taoyao.webrtc
-    );
-  },
-  /**
-   * 终端重启默认回调
-   *
-   * @param {*} message 消息
-   */
-  defaultClientReboot(message) {
-    console.info("重启终端");
-    location.reload();
-  },
-  /**
-   * 终端重启默认回调
-   *
-   * @param {*} message 消息
-   */
-  defaultClientShutdown(message) {
-    console.info("关闭终端");
-    window.close();
-  },
-  defaultRoomEnter(message) {
-    const { roomId, clientId } = message.body;
-    if(clientId === this.taoyao.clientId) {
-      // 忽略自己
-    } else {
-      this.taoyao.remoteClients.set(clientId, roomId);
-    }
-  },
-  defaultRoomClientList(message) {
-    const self = this;
-    message.body.forEach(v => {
-      if(v.clientId === self.taoyao.clientId) {
-        // 忽略自己
-      } else {
-        self.taoyao.remoteClients.set(v.clientId, self.taoyao.roomId);
-      }
-    });
-  },
 };
 
 /**
@@ -479,6 +379,103 @@ class Taoyao {
       callback
     );
   }
+  /**
+   * 前置回调
+   *
+   * @param {*} message
+   */
+  async preCallback(message) {
+    const self = this;
+    switch (message.header.signal) {
+      case "client::config":
+        self.defaultClientConfig(message);
+        break;
+      case "client::register":
+        console.info("终端注册成功");
+        break;
+      case "media::consume":
+        await self.consumeMedia(message);
+        break;
+    }
+  }
+  /**
+   * 后置回调
+   *
+   * @param {*} message 消息
+   */
+  async postCallback(message) {
+    const self = this;
+    switch (message.header.signal) {
+      case "client::reboot":
+        self.defaultClientReboot(message);
+        break;
+      case "client::shutdown":
+        self.defaultClientShutdown(message);
+        break;
+      case "room::enter":
+        self.defaultRoomEnter(message);
+        break;
+      case "room::client::list":
+        self.defaultRoomClientList(message);
+        break;
+      case "platform::error":
+        self.callbackError(message);
+        break;
+    }
+  }
+  /**
+   * 配置默认回调
+   *
+   * @param {*} message 消息
+   */
+  defaultClientConfig(message) {
+    const self = this;
+    self.audio = { ...defaultAudioConfig, ...message.body.media.audio };
+    self.video = { ...defaultVideoConfig, ...message.body.media.video };
+    self.webrtc = message.body.webrtc;
+    console.debug(
+      "终端配置",
+      self.audio,
+      self.video,
+      self.webrtc
+    );
+  }
+  /**
+   * 终端重启默认回调
+   *
+   * @param {*} message 消息
+   */
+  defaultClientReboot(message) {
+    console.info("重启终端");
+    location.reload();
+  }
+  /**
+   * 终端重启默认回调
+   *
+   * @param {*} message 消息
+   */
+  defaultClientShutdown(message) {
+    console.info("关闭终端");
+    window.close();
+  }
+  defaultRoomEnter(message) {
+    const { roomId, clientId } = message.body;
+    if (clientId === this.clientId) {
+      // 忽略自己
+    } else {
+      this.remoteClients.set(clientId, roomId);
+    }
+  }
+  defaultRoomClientList(message) {
+    const self = this;
+    message.body.forEach((v) => {
+      if (v.clientId === self.clientId) {
+        // 忽略自己
+      } else {
+        self.remoteClients.set(v.clientId, self.roomId);
+      }
+    });
+  }
   /**
    * 错误回调
    */
@@ -1091,7 +1088,7 @@ class Taoyao {
       console.log("消费者", consumer);
 
       self.callbackMedia("remote", consumer.track, consumer);
-      
+
       // If audio-only mode is enabled, pause it.
       if (consumer.kind === "video" && !self.videoProduce) {
         // this.pauseConsumer(consumer);

taoyao-client-web/src/components/TaoyaoClient.js

@@ -1,6 +0,0 @@
-/**
- * 桃夭终端
- */
-class TaoyaoClient {}
-
-export { TaoyaoClient };