From ff74d8330f9fdb64ed177ab55c8609153a9b90e2 Mon Sep 17 00:00:00 2001
From: acgist <289547414@qq.com>
Date: Sun, 9 Jul 2023 08:02:52 +0800
Subject: [PATCH] =?UTF-8?q?[*]=20=E6=97=A5=E5=B8=B8=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 taoyao-client-web/src/App.vue                 |  2 +-
 .../src/components/LocalClient.vue            | 58 +++++----------
 .../src/components/RemoteClient.vue           | 55 +++++++-------
 .../src/components/SessionClient.vue          | 48 ++++++------
 taoyao-client-web/src/components/Taoyao.js    | 73 ++++++++++++++++++-
 taoyao-client-web/src/main.js                 |  4 +-
 6 files changed, 140 insertions(+), 100 deletions(-)

diff --git a/taoyao-client-web/src/App.vue b/taoyao-client-web/src/App.vue
index 41faaa1..298f89d 100644
--- a/taoyao-client-web/src/App.vue
+++ b/taoyao-client-web/src/App.vue
@@ -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';
diff --git a/taoyao-client-web/src/components/LocalClient.vue b/taoyao-client-web/src/components/LocalClient.vue
index cd11d8d..059078c 100644
--- a/taoyao-client-web/src/components/LocalClient.vue
+++ b/taoyao-client-web/src/components/LocalClient.vue
@@ -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);
       }
     },
   },
diff --git a/taoyao-client-web/src/components/RemoteClient.vue b/taoyao-client-web/src/components/RemoteClient.vue
index 21f7ea4..f960db8 100644
--- a/taoyao-client-web/src/components/RemoteClient.vue
+++ b/taoyao-client-web/src/components/RemoteClient.vue
@@ -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);
       }
     }
   }
diff --git a/taoyao-client-web/src/components/SessionClient.vue b/taoyao-client-web/src/components/SessionClient.vue
index 415be70..b65fc32 100644
--- a/taoyao-client-web/src/components/SessionClient.vue
+++ b/taoyao-client-web/src/components/SessionClient.vue
@@ -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);
       }
     }
   }
diff --git a/taoyao-client-web/src/components/Taoyao.js b/taoyao-client-web/src/components/Taoyao.js
index 2c10999..7c7f39e 100644
--- a/taoyao-client-web/src/components/Taoyao.js
+++ b/taoyao-client-web/src/components/Taoyao.js
@@ -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 };
-
diff --git a/taoyao-client-web/src/main.js b/taoyao-client-web/src/main.js
index 478ee49..36c00d0 100644
--- a/taoyao-client-web/src/main.js
+++ b/taoyao-client-web/src/main.js
@@ -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);