[*] 踢人 拉人 切换视频媒体

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

@@ -5,11 +5,11 @@
     <video ref="video"></video>
     <p class="title">{{ client?.name || "" }}</p>
     <div class="buttons" :style="{'--volume': client?.volume}">
-      <el-button v-show="!client.audioActive" type="primary" title="打开麦克风" :icon="Microphone" circle />
-      <el-button v-show="client.audioActive" type="danger" title="关闭麦克风" :icon="Mute" circle />
-      <el-button v-show="!client.videoActive" type="primary" title="打开摄像头" :icon="VideoPlay" circle />
-      <el-button v-show="client.videoActive" type="danger" title="关闭摄像头" :icon="VideoPause" circle />
-      <el-button title="交换媒体" :icon="Refresh" 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.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="exchangeVideoSource" title="交换媒体" :icon="Refresh" circle />
       <el-button title="拍照" :icon="Camera" circle />
       <el-button title="录像" :icon="VideoCamera" circle />
       <el-button title="媒体信息" :icon="InfoFilled" circle />
@@ -104,15 +104,26 @@ export default {
     }
   },
   methods: {
-    media(track) {
-      if (track.kind === "video") {
+    exchangeVideoSource() {
+      // TODO：文件支持
+      this.taoyao.videoSource = this.taoyao.videoSource === "camera" ? "screen" : "camera";
+      this.taoyao.updateVideoProducer();
+    },
+    media(track, producer) {
+      if(track.kind === "audio") {
+        // 不用加载音频
+        this.audioProducer = producer;
+      } else if (track.kind === "video") {
+        this.videoProducer = producer;
         if (this.videoStream) {
-          // TODO：资源释放
-        } else {
-          this.videoStream = new MediaStream();
-          this.videoStream.addTrack(track);
-          this.video.srcObject = this.videoStream;
+          this.videoStream.getVideoTracks().forEach(oldTrack => {
+            console.debug("关闭旧的媒体：", oldTrack);
+            oldTrack.stop();
+          });
         }
+        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);

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

@@ -5,14 +5,14 @@
     <video ref="video"></video>
     <p class="title">{{ client?.name || "" }}</p>
     <div class="buttons" :style="{'--volume': client?.volume}">
-      <el-button v-show="!client.audioActive" type="primary" title="打开麦克风" :icon="Microphone" circle />
-      <el-button v-show="client.audioActive" type="danger" title="关闭麦克风" :icon="Mute" circle />
-      <el-button v-show="!client.videoActive" type="primary" title="打开摄像头" :icon="VideoPlay" circle />
-      <el-button v-show="client.videoActive" type="danger" title="关闭摄像头" :icon="VideoPause" circle />
+      <el-button @click="taoyao.mediaConsumerResume(audioConsumer.id)" v-show="audioConsumer && audioConsumer.paused" type="primary" title="打开麦克风" :icon="Microphone" circle />
+      <el-button @click="taoyao.mediaConsumerPause(audioConsumer.id)" v-show="audioConsumer && !audioConsumer.paused" type="danger" title="关闭麦克风" :icon="Mute" circle />
+      <el-button @click="taoyao.mediaConsumerResume(videoConsumer.id)" v-show="videoConsumer && videoConsumer.paused" type="primary" title="打开摄像头" :icon="VideoPlay" circle />
+      <el-button @click="taoyao.mediaConsumerPause(videoConsumer.id)" v-show="videoConsumer && !videoConsumer.paused" type="danger" title="关闭摄像头" :icon="VideoPause" circle />
       <el-button title="拍照" :icon="Camera" circle />
       <el-button title="录像" :icon="VideoCamera" circle />
       <el-button title="媒体信息" :icon="InfoFilled" circle />
-      <el-button title="踢出" :icon="CircleClose" circle />
+      <el-button @click="roomExpel" title="踢出" :icon="CircleClose" circle />
     </div>
   </div>
 </template>
@@ -69,8 +69,12 @@ export default {
     }
   },
   methods: {
+    roomExpel() {
+      this.taoyao.roomExpel(this.client.clientId);
+    },
     media(track, consumer) {
       if(track.kind === 'audio') {
+        this.audioConsumer = consumer;
         if (this.audioStream) {
           // TODO：资源释放
         } else {
@@ -80,6 +84,7 @@ export default {
         }
         this.audio.play().catch((error) => console.warn("视频播放失败", error));
       } else if(track.kind === 'video') {
+        this.videoConsumer = consumer;
         if (this.videoStream) {
           // TODO：资源释放
         } else {