mdm-client 1.0.0

package/src/components/other/settingDialog.vue

@@ -0,0 +1,756 @@
+<template>
+  <div class="addressbox">
+    <el-dialog :visible.sync="isaddressShow" append-to-body :show-close="false" class="setting-dialog" width="588px">
+      <div slot="title" class="dialog-title">
+        <div class="tabs">
+          <div v-for="item in tablsList" :key="item.id"
+            :class="['tabItem', activeIndex == item.id ? 'activeBorder' : '']" @click="activeIndex = item.id">
+            {{ item.name }}
+          </div>
+        </div>
+        <span class="close-icon" @click="isaddressShow = false"></span>
+      </div>
+      <div class="fgx"></div>
+      <div class="setter-content" v-if="activeIndex == 0">
+        <div class="setter-item" style="margin-bottom: 19px">
+          <div class="setter-item-title">扬声器</div>
+          <div class="setter-item-content">
+            <div class="setter-item-tool">
+              <el-select v-model="activeOutputDeviceId">
+                <el-option v-for="device of outputDevices" :key="device.value" :label="device.label"
+                  :value="device.value">
+                </el-option>
+              </el-select>
+              <div class="detect-btn" @click="detectOutput">
+                {{ isOutputDetectStart ? "停止监测" : "扬声器监测" }}
+              </div>
+            </div>
+            <div class="setter-item-show">
+              <div class="setter-item-show-title">
+                <span>输出等级</span>
+                <div class="icon"></div>
+              </div>
+              <div class="setter-item-show-outter">
+                <div class="setter-item-show-split-layer">
+                  <div class="setter-item-show-split" v-for="n in 9"></div>
+                </div>
+                <div class="setter-item-show-inner" :style="{ width: curOutputLevel }"></div>
+              </div>
+            </div>
+            <div class="setter-item-control">
+              <div class="setter-item-show-title">
+                <span>输出等级</span>
+                <div class="icon"></div>
+              </div>
+              <el-slider v-model="outputLevel" />
+            </div>
+          </div>
+        </div>
+        <div class="setter-item">
+          <div class="setter-item-title">麦克风</div>
+          <div class="setter-item-content">
+            <div class="setter-item-tool">
+              <el-select v-model="activeMicroDeviceId">
+                <el-option v-for="device of audioDevices" :key="device.value" :label="device.label"
+                  :value="device.value">
+                </el-option>
+              </el-select>
+              <div class="detect-btn" @click="detectMicro">
+                {{ isMicroDetectStart ? "停止监测" : "开始监测" }}
+              </div>
+            </div>
+            <div class="setter-item-show">
+              <div class="setter-item-show-title">
+                <span>输出等级</span>
+                <div class="icon"></div>
+              </div>
+              <div class="setter-item-show-outter">
+                <div class="setter-item-show-split-layer">
+                  <div class="setter-item-show-split" v-for="n in 9"></div>
+                </div>
+                <div class="setter-item-show-inner" :style="{ width: curMicroLevel }"></div>
+              </div>
+            </div>
+            <div class="setter-item-control">
+              <div class="setter-item-show-title">
+                <span>输出等级</span>
+                <div class="icon"></div>
+              </div>
+              <el-slider v-model="microLevel" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="setter-content" style="padding: 6px 12px 24px;" v-else-if="activeIndex == 1">
+        <div class="camera-setter">
+          <video id="camera-setter-video-ele" class="camera-setter-video" muted autoplay></video>
+        </div>
+        <div class="camera-setter-foot">
+          <el-select style="width: 100%;" v-model="activeVideoDeviceId">
+            <el-option v-for="device of videoDevices" :key="device.value" :label="device.label"
+              :value="device.value">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { ShowMessage } from "@/utils/index";
+import moonLight from "@/assets/audio/moon_light.ogg";
+
+export default {
+  name: "SettingDialog",
+  props: {
+    outputDevices: {
+      type: Array,
+      default: () => []
+    },
+    audioDevices: {
+      type: Array,
+      default: () => []
+    },
+    videoDevices: {
+      type: Array,
+      default: () => []
+    },
+    activeDevice: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      isaddressShow: false,
+      activeIndex: 0,
+      activeOutputDeviceId: "",
+      curOutputLevel: "0%",
+      outputLevel: 100,
+      activeMicroDeviceId: "",
+      curMicroLevel: "0%",
+      microLevel: 100,
+      allTracks: [],
+      activeVideoDeviceId: "",
+      microVolumn: 0,
+      isMicroDetectStart: false,
+      outputVolumn: 0,
+      isOutputDetectStart: false,
+      audioContext: null,
+      analyserNode: null,
+      gainNode: null,
+      showMessage: new ShowMessage()
+    };
+  },
+  computed: {
+    tablsList() {
+      return [
+        { id: 0, name: "音频设置" },
+        { id: 1, name: "视频设置" }
+      ];
+    }
+  },
+  watch: {
+    activeMicroDeviceId(newVal) {
+      if (newVal) {
+        this.stopmicroVolumnCheck();
+      }
+    },
+    microLevel(newVal) {
+      this.setMicroOutputVolumn(newVal / 100);
+    },
+    microVolumn(newVal) {
+      this.curMicroLevel = newVal > 50 ? "100%" : (newVal / 50).toFixed(2) * 100 + "%";
+    },
+    outputLevel(newVal) {
+      this.setOutputVolumn(newVal / 100);
+    },
+    outputVolumn(newVal) {
+      this.curOutputLevel = newVal > 24 ? "100%" : (newVal / 24).toFixed(2) * 100 + "%";
+    },
+    activeOutputDeviceId(newVal) {
+      if (this.isOutputDetectStart) {
+        this.stopOutputVolumeCheck();
+      }
+    },
+    activeIndex() {
+      if (this.isMicroDetectStart) {
+        this.stopmicroVolumnCheck();
+      }
+      if (this.isOutputDetectStart) {
+        this.stopOutputVolumeCheck();
+      }
+      this.streamPause();
+      this.initVideoStream();
+    },
+    activeVideoDeviceId(newVal) {
+      this.$emit("setterVideoDeviceChange", newVal);
+    },
+    isaddressShow(newVal) {
+      if (!newVal) {
+        this.$nextTick(() => {
+          this.streamPause();
+        });
+      }
+    }
+  },
+  methods: {
+    // 麦克风检测方法
+    startmicroVolumnCheck(_source, _audioContext, deviceId, _outputDeviceId, initLevel) {
+      let source = _source;
+      if (!this.audioContext) {
+        if (_audioContext) {
+          this.audioContext = _audioContext;
+        } else {
+          this.audioContext = new AudioContext();
+        }
+      }
+      if (!_outputDeviceId) {
+        this.showMessage.message("error", `请先选择音频输出扬声器`);
+        return;
+      }
+      this.switchOutputDevice(_outputDeviceId)
+        .then(async () => {
+          this.isMicroDetectStart = true;
+          const mediaOptions = {
+            audio: deviceId && deviceId !== "default" ? {
+              deviceId: deviceId,
+            } : "default",
+          };
+          if (!source) {
+            const stream = await navigator.mediaDevices.getUserMedia(mediaOptions);
+            source = this.audioContext.createMediaStreamSource(stream);
+          }
+          this.analyserNode = this.audioContext.createAnalyser();
+          this.gainNode = this.audioContext.createGain();
+          this.gainNode.gain.value = initLevel;
+          this.analyserNode.fftSize = 32;
+          source.connect(this.analyserNode);
+          this.analyserNode.connect(this.gainNode);
+          this.gainNode.connect(this.audioContext.destination);
+          // 创建数据缓冲区
+          const bufferLength = this.analyserNode.frequencyBinCount;
+          const dataArray = new Uint8Array(bufferLength);
+
+          const updateMicroVolumn = () => {
+            this.analyserNode.getByteFrequencyData(dataArray);
+
+            let sum = 0;
+            let i = 0;
+            while (i < bufferLength) {
+              sum += dataArray[i];
+              i++;
+            }
+            this.microVolumn = Math.floor((sum / bufferLength / 255) * 100);
+            if (this.isMicroDetectStart) {
+              requestAnimationFrame(updateMicroVolumn);
+            } else {
+              this.microVolumn = 0;
+            }
+            console.log("microVolumn", this.microVolumn);
+          };
+
+          updateMicroVolumn();
+        })
+        .catch((error) => {
+          console.error(error);
+          this.showMessage.message("error", `设置${_outputDeviceId}扬声器失败`);
+        });
+    },
+    
+    stopmicroVolumnCheck() {
+      this.isMicroDetectStart = false;
+      if (this.gainNode) {
+        this.gainNode.disconnect();
+      }
+      if (this.analyserNode) {
+        this.analyserNode.disconnect();
+      }
+    },
+    
+    setMicroOutputVolumn(level) {
+      if (!this.isMicroDetectStart) {
+        return;
+      } else {
+        this.gainNode.gain.value = level;
+        console.log('修改后的音量', this.gainNode.gain.value);
+      }
+    },
+    
+    // 输出设备检测方法
+    switchOutputDevice(_deviceId) {
+      return new Promise((resolve, reject) => {
+        if (this.audioContext && this.audioContext.setSinkId) {
+          this.audioContext.setSinkId(_deviceId)
+            .then(() => {
+              resolve();
+            })
+            .catch((err) => {
+              reject(err);
+            });
+        } else {
+          this.showMessage.message("error", "当前浏览器版本不支持指定扬声器设备");
+          reject();
+        }
+      });
+    },
+    
+    startOutputVolumeCheck(_source, _audioContext, _audioElmId = "audio-detect-player", _deviceId, initLevel) {
+      let source = _source;
+      if (!this.audioContext) {
+        if (_audioContext) {
+          this.audioContext = _audioContext;
+        } else {
+          this.audioContext = new AudioContext();
+        }
+      }
+      if (!_deviceId) {
+        this.showMessage.message("error", `请先选择要检测的扬声器`);
+        return;
+      }
+      console.log('要检测的扬声器', _deviceId);
+      this.switchOutputDevice(_deviceId).then(() => {
+        this.isOutputDetectStart = true;
+        if (!source) {
+          let audioElm = document.getElementById(_audioElmId);
+          if (!audioElm) {
+            audioElm = document.createElement("audio");
+            audioElm.id = _audioElmId;
+            audioElm.src = moonLight;
+            audioElm.autoplay = true;
+            document.body.appendChild(audioElm);
+            audioElm.onloadeddata = function () {
+              audioElm.play();
+            };
+          }
+          source = this.audioContext.createMediaElementSource(audioElm);
+          console.log("audioElm", audioElm, source);
+        }
+        this.analyserNode = this.audioContext.createAnalyser();
+        this.gainNode = this.audioContext.createGain();
+        this.gainNode.gain.value = initLevel;
+        this.analyserNode.fftSize = 32;
+        source.connect(this.analyserNode);
+        this.analyserNode.connect(this.gainNode);
+        this.gainNode.connect(this.audioContext.destination);
+        console.log('gainNode节点音量', this.gainNode.gain.value);
+        // 创建数据缓冲区
+        const bufferLength = this.analyserNode.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+
+        const updateOutputVolumn = () => {
+          this.analyserNode.getByteFrequencyData(dataArray);
+
+          let sum = 0,
+            i = 0;
+          while (i < bufferLength) {
+            sum += dataArray[i];
+            i++;
+          }
+          this.outputVolumn = Math.floor((sum / bufferLength / 255) * 100);
+          if (this.isOutputDetectStart) {
+            requestAnimationFrame(updateOutputVolumn);
+          } else {
+            this.outputVolumn = 0;
+          }
+          console.log("outputVolumn", this.outputVolumn);
+        };
+
+        updateOutputVolumn();
+      }).catch(error => {
+        console.error(error);
+        this.showMessage.message("error", `设置${_deviceId}扬声器失败`);
+      });
+    },
+    
+    stopOutputVolumeCheck(_audioElmId = "audio-detect-player") {
+      const audioElm = document.getElementById(_audioElmId);
+      if (audioElm) {
+        audioElm.remove();
+      }
+      this.isOutputDetectStart = false;
+      if (this.gainNode) {
+        this.gainNode.disconnect();
+      }
+      if (this.analyserNode) {
+        this.analyserNode.disconnect();
+      }
+    },
+    
+    setOutputVolumn(level) {
+      if (!this.isOutputDetectStart) {
+        return;
+      } else {
+        this.gainNode.gain.value = level;
+        console.log('修改后的音量', this.gainNode.gain.value);
+      }
+    },
+    
+    // 组件方法
+    detectMicro() {
+      if (this.isOutputDetectStart) {
+        this.stopOutputVolumeCheck();
+      }
+      if (this.isMicroDetectStart) {
+        this.stopmicroVolumnCheck();
+      } else {
+        if (this.activeMicroDeviceId) {
+          this.startmicroVolumnCheck(
+            undefined,
+            undefined,
+            this.activeMicroDeviceId,
+            this.activeOutputDeviceId,
+            this.microLevel / 100
+          );
+        } else {
+          this.showMessage.message("error", "请先选择要检测的麦克风");
+        }
+      }
+    },
+    
+    detectOutput() {
+      if (this.isMicroDetectStart) {
+        this.stopmicroVolumnCheck();
+      }
+      if (this.isOutputDetectStart) {
+        this.stopOutputVolumeCheck();
+      } else {
+        this.startOutputVolumeCheck(
+          undefined,
+          undefined,
+          "audio-detect-player",
+          this.activeOutputDeviceId,
+          this.outputLevel / 100
+        );
+      }
+    },
+    
+    async initVideoStream() {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          deviceId: this.activeVideoDeviceId
+        }
+      });
+      const videoEle = document.getElementById("camera-setter-video-ele");
+      this.allTracks = stream.getTracks();
+      if (videoEle) {
+        videoEle.srcObject = stream;
+      }
+    },
+    
+    clearAllTrack() {
+      console.log('allTracks', this.allTracks);
+      if (this.allTracks.length > 0) {
+        this.allTracks.forEach((track) => {
+          track.stop();
+        });
+      }
+    },
+    
+    streamPause() {
+      let videoEle = document.querySelector("#camera-setter-video-ele");
+      if (videoEle) {
+        videoEle.pause();
+        videoEle.srcObject = null;
+        videoEle.src = "";
+      }
+      this.clearAllTrack();
+    },
+    
+    open(e) {
+      if (e && e.type) {
+        this.activeIndex = e.type;
+      }
+      this.activeOutputDeviceId = this.activeDevice.audioOutputDevice;
+      this.activeMicroDeviceId = this.activeDevice.audioInputDevice;
+      this.activeVideoDeviceId = this.activeDevice.videoDevice;
+      this.isaddressShow = true;
+      this.initVideoStream();
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+
+:deep(.el-dialog) {
+  width: 588px !important;
+  height: 520px;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+  @include dialog;
+
+  .dialog-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    
+    .tabs {
+      display: flex;
+      font-size: 16px;
+      color: #ffffff;
+      font-family: PingFangSC-Medium;
+
+      .tabItem {
+        margin-right: 15px;
+        cursor: pointer;
+      }
+
+      .activeBorder {
+        position: relative;
+
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          left: 12px;
+          bottom: -6px;
+          width: 40px;
+          height: 3px;
+          background: #1f63fb;
+          border-radius: 8px 8px 0px 0px;
+        }
+      }
+    }
+    
+    .close-icon {
+      width: 16px;
+      height: 16px;
+      background: var(--close-icon) no-repeat center center / 100% 100%;
+      cursor: pointer;
+    }
+  }
+
+  .fgx {
+    margin: 0 0 20px 0;
+    height: 2px;
+    background: rgba(28, 36, 47, 0.6);
+  }
+
+  .setter-content {
+    border-radius: 6px;
+    border: 2px solid rgba(67, 85, 110, 0.4);
+    padding: 6px 26px 24px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 16px;
+    color: #ffffff;
+
+    .setter-item {
+      width: 100%;
+
+      &-title {
+        line-height: 40px;
+        border-bottom: 1px solid #1c242f;
+        margin-bottom: 10px;
+      }
+
+      &-content {
+        width: 100%;
+
+        .setter-item-tool {
+          width: 100%;
+          display: flex;
+          flex-wrap: nowrap;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 19px;
+
+          .detect-btn {
+            cursor: pointer;
+            background: rgba(28, 36, 47, 0.6);
+            border-radius: 8px;
+            line-height: 40px;
+            padding: 0 20px;
+            white-space: nowrap;
+          }
+        }
+
+        .setter-item-show {
+          width: 100%;
+          display: flex;
+          flex-wrap: nowrap;
+          align-items: center;
+          margin-bottom: 28px;
+
+          &-title {
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+
+            span {
+              white-space: nowrap;
+            }
+
+            .icon {
+              width: 20px;
+              height: 20px;
+              background: var(--audio-level-icon) no-repeat center center / 100% 100%;
+              margin: 0 10px;
+            }
+          }
+
+          &-outter {
+            flex-shrink: 0;
+            width: calc(100% - 104px);
+            height: 8px;
+            background-color: #43556e;
+            border-radius: 2px;
+            position: relative;
+
+            .setter-item-show-split-layer {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: space-evenly;
+
+              .setter-item-show-split {
+                height: 100%;
+                width: 6px;
+                background-color: #252e3d;
+              }
+            }
+
+            .setter-item-show-inner {
+              height: 100%;
+              background-color: #5fa7fd;
+              border-radius: 2px;
+            }
+          }
+        }
+
+        .setter-item-control {
+          width: 100%;
+          display: flex;
+          flex-wrap: nowrap;
+          align-items: center;
+
+          &-title {
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+
+            span {
+              white-space: nowrap;
+            }
+
+            .icon {
+              width: 20px;
+              height: 20px;
+              margin: 0 10px;
+            }
+          }
+
+          .el-slider {
+            width: calc(100% - 104px);
+          }
+        }
+      }
+    }
+
+    .camera-setter {
+      width: 100%;
+      height: 336px;
+      border-radius: 8px;
+      position: relative;
+      margin-bottom: 16px;
+
+      &-video {
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        object-fit: cover;
+      }
+    }
+
+    .meeting-ordinary-setter {
+      width: 100%;
+      margin-top: 18px;
+      &-item {
+        height: 32px;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 400;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        padding-left: 8px;
+        &:not(:last-child) {
+          margin-bottom: 12px;
+        }
+        &-check {
+          flex-shrink: 0;
+          width: 16px;
+          height: 16px;
+          border: 1px solid #ccc8c8;
+          margin-right: 10px;
+        }
+        &-name {
+          display: inline-block;
+          flex-shrink: 0;
+          white-space: nowrap;
+          width: calc(100% - 45px);
+          max-width: calc(100% - 45px);
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        &-checked {
+          .meeting-ordinary-setter-item-check {
+            background: var(--dialog-item-checked-icon) no-repeat center / 100% 100%;
+          }
+        }
+      }
+    }
+
+    .camera-setter-foot {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+:deep(.el-select) {
+  width: 366px;
+  
+  // .el-select__wrapper {
+  //   box-shadow: none;
+  //   background-color: transparent;
+  //   border-radius: 6px;
+  //   border: 1px solid var(--input-border-color);
+  //   padding: 0 14px;
+  //   height: 40px;
+  //   line-height: 40px;
+
+  //   .el-select__placeholder {
+  //     color: var(--input-placeholder-color);
+  //     font-family: var(--main-font);
+  //   }
+    
+  //   .el-select__selected-item {
+  //     color: var(--theme-font-color);
+  //     font-size: 16px;
+  //     font-weight: 400;
+  //   }
+  // }
+  .el-input__inner {
+    box-shadow: none;
+    background-color: transparent;
+    border-radius: 6px;
+    border: 1px solid var(--input-border-color);
+    padding: 0 14px;
+    height: 40px;
+    line-height: 40px;
+    color: var(--theme-font-color);
+    &::placeholder {
+      color: var(--input-placeholder-color);
+    }
+  }
+}
+</style>