[+] 房间穿肩

taoyao-client-web/src/App.vue

@@ -1,7 +1,7 @@
 <!-- 桃夭 -->
 <template>
-  <SettingRoom :roomVisible="roomVisible" :taoyao="taoyao"></SettingRoom>
-  <SettingSignal :signalVisible="signalVisible" @connectSignal="connectSignal"></SettingSignal>
+  <SettingRoom :roomVisible="roomVisible" :taoyao="taoyao" @buildMedia="buildMedia"></SettingRoom>
+  <SettingSignal :signalVisible="signalVisible" @buildSignal="buildSignal"></SettingSignal>
 </template>
 
 <script>
@@ -26,10 +26,14 @@ export default {
     this.logger.info("桃夭终端开始启动");
   },
   methods: {
-    connectSignal: function() {
+    buildSignal: function() {
       let self = this;
       self.signalVisible = false;
-      self.taoyao.buildChannel(self.callback);
+      self.taoyao.buildSignal(self.callback);
+    },
+    buildMedia: function(roomId) {
+      let self = this;
+      self.taoyao.buildMedia(roomId);
     },
     /**
      * 信令回调

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

@@ -28,6 +28,8 @@ const config = {
   video: {},
   // WebRTC配置
   webrtc: {},
+  // 媒体服务配置
+  mediaServerList: [],
 };
 
 /**
@@ -63,7 +65,6 @@ const protocol = {
       header: {
         v: config.version,
         id: id || this.buildId(),
-        sn: config.sn,
         signal: signal,
       },
       body: body,

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

@@ -23,12 +23,12 @@
         </el-tab-pane>
         <el-tab-pane label="创建房间" name="create">
           <el-form-item label="媒体服务">
-            <el-select v-model="room.mediasoup" placeholder="媒体服务">
+            <el-select v-model="room.mediaName" placeholder="媒体服务">
               <el-option
-                v-for="mediasoup in config.webrtc.mediasoupList"
-                :key="mediasoup.name"
-                :label="mediasoup.name"
-                :value="mediasoup.name"
+                v-for="value in config.mediaServerList"
+                :key="value.name"
+                :label="value.name"
+                :value="value.name"
               />
             </el-select>
           </el-form-item>
@@ -78,22 +78,24 @@ export default {
       this.rooms = response.body;
     },
     async setting() {
+      let roomId;
       this.localVisible = false;
       if (this.activeName === "enter") {
+        roomId = this.room.id;
         await this.taoyao.request(
           protocol.buildMessage("room::enter", {
-            sn: config.sn,
             ...this.room,
           })
         );
       } else {
-        await this.taoyao.request(
+        let response = await this.taoyao.request(
           protocol.buildMessage("room::create", {
-            sn: config.sn,
             ...this.room,
           })
         );
+        roomId = response.body.id;
       }
+      this.$emit("buildMedia", roomId);
     },
   },
 };

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

@@ -46,7 +46,7 @@ export default {
   methods: {
     setting: function () {
       this.localVisible = false;
-      this.$emit("connectSignal");
+      this.$emit("buildSignal");
     },
   },
 };

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

@@ -3,7 +3,7 @@
  */
 import { Logger } from "./Logger.js";
 import { TaoyaoClient } from "./TaoyaoClient.js";
-import * as mediasoupClient from 'mediasoup-client';
+import * as mediasoupClient from "mediasoup-client";
 import {
   config,
   protocol,
@@ -93,7 +93,8 @@ const signalChannel = {
         const battery = await navigator.getBattery();
         self.push(
           protocol.buildMessage("client::register", {
-            ip: 'localhost',
+            ip: "localhost",
+            sn: config.sn,
             signal: 100,
             battery: battery.level * 100,
             charging: battery.charging,
@@ -183,7 +184,7 @@ const signalChannel = {
   },
   /**
    * 异步请求
-   * 
+   *
    * @param {*} data 消息内容
    * @param {*} callback 注册回调
    */
@@ -198,12 +199,12 @@ const signalChannel = {
   },
   /**
    * 同步请求
-   * 
+   *
    * @param {*} data 消息内容
-   * 
+   *
    * @returns Promise
    */
-  request: async function(data) {
+  request: async function (data) {
     let self = this;
     return new Promise((resolve, reject) => {
       let callback = false;
@@ -217,7 +218,7 @@ const signalChannel = {
       self.channel.send(JSON.stringify(data));
       // 设置超时
       setTimeout(() => {
-        if(!callback) {
+        if (!callback) {
           reject("请求超时", data);
         }
       }, 5000);
@@ -244,6 +245,9 @@ const signalChannel = {
       case "client::config":
         self.defaultClientConfig(data);
         break;
+      case "client::reboot":
+        self.defaultClientReboot(data);
+        break;
       case "client::register":
         logger.info("桃夭终端注册成功");
         break;
@@ -258,10 +262,11 @@ const signalChannel = {
    * @param {*} data 消息内容
    */
   defaultClientConfig: function (data) {
-    config.webrtc = data.body.webrtc;
     config.audio = { ...config.defaultAudioConfig, ...data.body.media.audio };
     config.video = { ...config.defaultVideoConfig, ...data.body.media.video };
-    logger.info("终端配置", config.audio, config.video, config.webrtc);
+    config.webrtc = data.body.webrtc;
+    config.mediaServerList = data.body.media.mediaServerList;
+    logger.info("终端配置", config.audio, config.video, config.webrtc, config.mediaServerList);
   },
   /**
    * 默认终端重启回调
@@ -308,9 +313,9 @@ class Taoyao {
   // 视频生产者
   videoProducer = null;
   // 消费者
-	consumers = new Map();
+  consumers = new Map();
   // 数据消费者
-	dataConsumers = new Map();
+  dataConsumers = new Map();
 
   /**
    * 打开信令通道
@@ -319,45 +324,54 @@ class Taoyao {
    *
    * @returns
    */
-  buildChannel = async function (callback) {
+   buildSignal = async function (callback) {
     signalChannel.taoyao = this;
     this.signalChannel = signalChannel;
     // 不能直接this.push = this.signalChannel.push这样导致this对象错误
     this.push = function (data, pushCallback) {
       this.signalChannel.push(data, pushCallback);
     };
-    this.request = async function(data) {
+    this.request = async function (data) {
       return await this.signalChannel.request(data);
-    }
+    };
     return this.signalChannel.connect(config.signal(), callback);
   };
-  /**
-   * 设置本地媒体
-   */
-  buildLocal = function() {
-    new mediasoupClient.Device();
-  };
   /**
    * 打开媒体通道
+   * navigator.mediaDevices.getDisplayMedia();
    */
-  buildMediaTransport = function() {
+  buildMedia = async function (roomId) {
     let self = this;
     // 释放资源
-    self.close();
-
+    self.closeMedia();
+    self.mediasoupDevice = new mediasoupClient.Device();
+    const response = await this.request(protocol.buildMessage(
+      "router::rtp::capabilities",
+      { roomId }
+    ));
+    const routerRtpCapabilities = response.body;
+    console.log(self.mediasoupDevice);
+    console.log(routerRtpCapabilities);
+  };
+  /**
+   * 关闭媒体
+   */
+  closeMedia = function() {
+    let self = this;
+    if (self.sendTransport) {
+      self.sendTransport.close();
+    }
+    if (self.recvTransport) {
+      self.recvTransport.close();
+    }    
   }
   /**
    * 关闭
    */
-  close = function() {
+  close = function () {
     let self = this;
-    if(self.sendTransport) {
-      self.sendTransport.close();
-    }
-    if(self.recvTransport) {
-      self.recvTransport.close();
-    }
-    if(self.signalChannel) {
+    self.closeMedia();
+    if (self.signalChannel) {
       self.signalChannel.close();
     }
   };