[*] 每日优化

2023-05-17 08:56:42 +08:00
parent 0f16d6d227
commit 786323fe01
14 changed files with 196 additions and 45 deletions
--- a/taoyao-client-web/src/App.vue
+++ b/taoyao-client-web/src/App.vue
@@ -218,9 +218,10 @@ export default {
 .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;box-shadow:0 0 1px 0px rgba(0,0,0,0.4);}
-.client .buttons{width:100%;bottom:2px;left:0;text-align:center;position:absolute;padding:0.8rem 0;background:rgba(0,0,0,0.4);}
-.client .buttons:after{width:0;height:2px;bottom:0;left:0;position:absolute;background:#C00;content:"";transition: all 400ms linear;}
 .client audio{display:none;}
 .client video{width:100%;height:100%;}
+.client .mic{background:linear-gradient(to top, var(--el-color-primary) 10%, transparent 0%);}
 .client .title{position:absolute;top:0;left:0;text-align:center;width:100%;}
-</style>
+.client .buttons{width:100%;bottom:0;left:0;text-align:center;position:absolute;padding:0.8rem 0;background:rgba(0,0,0,0.4);}
+.client .buttons .el-button{margin:0 6px;}
+</style>
--- a/taoyao-client-web/src/components/Config.js
+++ b/taoyao-client-web/src/components/Config.js
@@ -1,6 +1,11 @@
 /**
 * 音频默认配置
- * TODO：MediaStreamTrack.applyConstraints()
+ * TODO：MediaStreamTrack.applyConstraints().then().catch();
+ * let setting = {
+ *   autoGainControl:  true,
+ *   noiseSuppression: true
+ * }
+  await track.applyConstraints(Object.assign(track.getSettings(), setting));
 * TODO：播放音量（audio标签配置）、采集音量
 * 支持属性：navigator.mediaDevices.getSupportedConstraints()
 * https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings
--- a/taoyao-client-web/src/components/LocalClient.vue
+++ b/taoyao-client-web/src/components/LocalClient.vue
@@ -4,11 +4,11 @@
    <audio ref="audio"></audio>
    <video ref="video"></video>
    <p class="title">{{ client?.name || "" }}</p>
-    <div class="buttons" :style="{'--volume': client?.volume}">
-      <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 />
+    <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 :icon="Camera"      circle title="拍照" />
      <el-button :icon="VideoCamera" circle title="录像" />
@@ -107,5 +107,5 @@ export default {
 };
 </script>
 <style scoped>
-.client .buttons:after{width:var(--volume);}
-</style>
+.client .mic{background:linear-gradient(to top, var(--el-color-primary) var(--volume), transparent 0%);}
+</style>
--- a/taoyao-client-web/src/components/RemoteClient.vue
+++ b/taoyao-client-web/src/components/RemoteClient.vue
@@ -1,15 +1,17 @@
 <!-- 远程终端 -->
+<!--
+注意：当生产者关闭以后不能操作该生产者生产的消费者
+-->
 <template>
  <div class="client">
    <audio ref="audio"></audio>
    <video ref="video"></video>
    <p class="title">{{ client?.name || "" }}</p>
-    <div class="buttons" :style="{'--volume': client?.volume}">
-      <!-- TODO：本地状态+远程状态计算当前状态 -->
-      <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 />
+    <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.controlRecord(client.clientId, (record = !record))" :icon="VideoCamera" circle title="录像" :type="record ? 'danger' : ''" />
      <el-button @click="taoyao.mediaConsumerStatus()"                              :icon="InfoFilled"  circle title="媒体信息" />
@@ -112,5 +114,5 @@ export default {
 };
 </script>
 <style scoped>
-.client .buttons:after{width:var(--volume);}
-</style>
+.client .mic{background:linear-gradient(to top, var(--el-color-primary) var(--volume), transparent 0%);}
+</style>
--- a/taoyao-client-web/src/components/SessionClient.vue
+++ b/taoyao-client-web/src/components/SessionClient.vue
@@ -5,10 +5,10 @@
    <video ref="video"></video>
    <p class="title">{{ client?.name || "" }}</p>
    <div class="buttons">
-      <el-button @click="taoyao.sessionResume(client.id, 'audio')" v-show="audioStream && !client.remoteAudioEnabled" type="primary" title="打开麦克风" :icon="Microphone" circle />
-      <el-button @click="taoyao.sessionPause(client.id, 'audio')"  v-show="audioStream &&  client.remoteAudioEnabled" type="danger"  title="关闭麦克风" :icon="Mute"       circle />
-      <el-button @click="taoyao.sessionResume(client.id, 'video')" v-show="videoStream && !client.remoteVideoEnabled" type="primary" title="打开摄像头" :icon="VideoPlay"  circle />
-      <el-button @click="taoyao.sessionPause(client.id, 'video')"  v-show="videoStream &&  client.remoteVideoEnabled" type="danger"  title="关闭摄像头" :icon="VideoPause" circle />
+      <el-button @click="taoyao.sessionResume(client.id, 'audio')" v-show="audioStream && !client.remoteAudioEnabled" type="danger"  title="打开麦克风" :icon="Mute"       circle />
+      <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.controlRecord(client.clientId, (record = !record))" :icon="VideoCamera" circle title="录像" :type="record ? 'danger' : ''" />
      <el-popover placement="top" :width="240" trigger="hover">
@@ -104,3 +104,6 @@ export default {
  }
 };
 </script>
+<style scoped>
+.client .mic{background:linear-gradient(to top, var(--el-color-primary) var(--volume), transparent 0%);}
+</style>
--- a/taoyao-client-web/src/components/Taoyao.js
+++ b/taoyao-client-web/src/components/Taoyao.js
@@ -243,6 +243,8 @@ class Session {
  id;
  // 远程终端名称
  name;
+  // 音量
+  volume = 100;
  // 是否关闭
  closed;
  // 远程终端ID