webrtc 合流-程序员宅基地

<template>
  <!-- 大窗口 -->
  <div class="liveVideos">
    <video
      id="camaraVideo"
      width="100%"
      height="100%"
      ref="videoing"
      class="video"
      autoplay="autoplay"
      muted
    ></video>
    <div
      v-if="isShowLoading"
      style="width: 10px; height: 10px; position: absolute; top: 50%; left: 50%"
    >
      <div class="load-container load4">
        <div class="loader"></div>
      </div>
    </div>
  </div>
</template>

<script>
const config = {
  iceServers: [
    {
      urls: "turn:118.186.244.77:3478?transport=udp",
      credential: "hmcs123456",
      username: "admin",
    },
    { urls: "stun:global.stun.twilio.com:3478?transport=udp" },
  ],
};

import Janus from "../../../components/webrtcJS/janus.js";

import { streamSourec } from "../../../components/webrtcJS/ipAnalysis.js";

export default {
  name: "caramerSourcres",
  components: {},

  watch: {
    "settings.computer"(val) {
      // 摄像头画面
      console.log("settings.computer", val);
      this.changeDeskVideoEnable(val);
    },
    "settings.Microphoneing"(val) {
      // 麦克风
      console.log("settings.Microphoneing", val);
      this.changeAudioMicEnable(val);
    },
    "settings.Micrcomputer"(val) {
      // 桌面声音
      console.log("settings.Micrcomputer", val);
      this.changeAudioDeskEnable(val);
    },
    "settings.Microphone"(val) {
      // 改变麦克风
      console.log("settings.Microphone", val);
      this.changeMicroPhoneDevice(val);
    },
    "settings.viderCameraId"(val) {
      // 改变摄像机设备
      console.log("settings.viderCameraId", val);
      this.changeCamaraDevice(val);
    },
  },
  props: {
    videoSrc: {
      type: Object,
    },
    audioFlage: {
      type: Boolean,
      default: true,
    },
    styeing: {
      type: Boolean,
      default: false,
    },
    settings: {
      type: Object,
      /**
       * videoCamera 摄像头   boolean
       * viderCameraId 摄像机设备 选择的decerid 默认是''
       * computer 共享电脑画面 boolean
       *
       * Microphoneing 麦克风 true
       * Microphone  麦克风选择 选择的decerid 默认是''
       * MicrophoneValue 麦克风音量 50 number boolean
       * Micrcomputer  共享电脑声音 boolean
       *
       *
       * speaker  扬声器 电脑声音  选择的decerid 默认是''
       * speakerValue  扬声器声音大小 number
       *
       * isState 屏幕还是摄像头 默认摄像头 0     1 桌面
       * */
    }
  },
  data() {
    return {
      SSOID: window.localStorage.getItem("SSOID") || "",
      musicing: require("@/assets/room/music.png"),
      audiolocalMicStream: null,
      deskLocalStream: null,
      videolocalMicStream: null,
      isAlreadyPushStream: false,
      userName: window.localStorage.getItem("username") || "",
      isShowLoading : true,
    };
  },

  created() {
    console.log("deskLocalSource");
  },
  beforeDestroy() {
    this.hangupHandle();
  },
  mounted() {
    let that = this;
    this.getLocalStreamBySetting().then((stream) => {
      var camaraVideo = document.getElementById("camaraVideo");
      var tempStream = new MediaStream();
      tempStream.addTrack(...stream.getVideoTracks());
      Janus.attachMediaStream(camaraVideo, tempStream);
      if (stream) {
        streamSourec(stream, (value) => {
          that.$emit("changeAudioVal", { fromUserName: that.userName, value });
        });
      }
      that.$parent.preparedPublishOwnFeed(stream);
    });
  },

  methods: {
    mergeAudioStreams(desktopStream, voiceStream) {
      const context = new AudioContext();
      const destination = context.createMediaStreamDestination();
      if (desktopStream && desktopStream.getAudioTracks().length > 0) {
        const source1 = context.createMediaStreamSource(desktopStream);
        const desktopGain = context.createGain();
        desktopGain.gain.value = 0.7;
        source1.connect(desktopGain).connect(destination);
      }
      if (voiceStream && voiceStream.getAudioTracks().length > 0) {
        const source2 = context.createMediaStreamSource(voiceStream);
        const voiceGain = context.createGain();
        voiceGain.gain.value = 0.7;
        source2.connect(voiceGain).connect(destination);
      }
      return destination.stream.getAudioTracks();
    },

    async getLocalStreamBySetting() {
      let stream_media = new MediaStream();
      let that = this;

      //判定是否静音

      //麦克风声音
      try {
        let audioConstraints;
        if (this.settings.Microphone) {
          audioConstraints = {
            video: false,
            audio: {
              deviceId: this.settings.Microphone,
              noiseSuppression: true,
              echoCancellation: true,
            },
            logicalSurface: false,
          };
        } else {
          audioConstraints = {
            video: false,
            audio: {
              noiseSuppression: true,
              echoCancellation: true,
            },
            logicalSurface: false,
          };
        }
        this.audiolocalMicStream = await navigator.mediaDevices.getUserMedia(
          audioConstraints
        );
      } catch (err) {
        that.$message.error("获取麦克风失败");
        console.error("获取麦克风失败", err);
      }

      //获取桌面流
      const deskonstraints = {
        audio: {
          mandatory: {
            chromeMediaSource: "desktop",
          },
        },
        video: {
          mandatory: {
            chromeMediaSource: "desktop",
          },
        },
      };

      this.deskLocalStream = await navigator.mediaDevices.getUserMedia(
        deskonstraints
      );
      let mergeAudioTracks = this.mergeAudioStreams(
        this.deskLocalStream,
        this.audiolocalMicStream
      );

      this.changeAudioMicEnable(this.settings.Microphoneing);
      this.changeAudioDeskEnable(this.settings.Micrcomputer);

      if (mergeAudioTracks) {
        stream_media.addTrack(...mergeAudioTracks);
      }

      //电脑桌面声音

      if (this.deskLocalStream) {
        stream_media.addTrack(...this.deskLocalStream.getVideoTracks());
      }

      return stream_media;
    },

    // 控制麦克风静音
    changeAudioMicEnable(enable) {
      if (this.audiolocalMicStream) {
        for (
          var i = 0;
          i < this.audiolocalMicStream.getAudioTracks().length;
          i++
        ) {
          var track = this.audiolocalMicStream.getAudioTracks()[i];
          if (track) track.enabled = enable;
        }
      }
    },
    // 控制屏幕
    changeDeskVideoEnable(enable) {
      console.log(enable);
      if (this.deskLocalStream) {
        for (var i = 0; i < this.deskLocalStream.getVideoTracks().length; i++) {
          var track = this.deskLocalStream.getVideoTracks()[0];
          if (track) track.enabled = enable;
        }
      }
    },
    // 主播听不到自己的电脑声音
    changeAudioDeskEnable(enable) {
      if (this.deskLocalStream) {
        for (var i = 0; i < this.deskLocalStream.getAudioTracks().length; i++) {
          var track = this.deskLocalStream.getAudioTracks()[0];
          if (track) track.enabled = enable;
        }
      }
    },

    changeMicroPhoneDevice(deviceId) {
      this.hangupHandle();
    },
    changeCamaraDevice(deviceId) {
      this.hangupHandle();
    },
    hangupHandle() {
      if (this.deskLocalStream) {
        let tracks = this.deskLocalStream.getTracks();
        tracks.forEach(function (track) {
          track.stop();
        });
        this.deskLocalStream = null;
      }

      if (this.audiolocalMicStream) {
        let tracks = this.audiolocalMicStream.getTracks();
        tracks.forEach(function (track) {
          track.stop();
        });
        this.audiolocalMicStream = null;
      }

      if (this.videolocalMicStream) {
        let tracks = this.videolocalMicStream.getTracks();
        tracks.forEach(function (track) {
          track.stop();
        });
        this.videolocalMicStream = null;
      }
    },
    userHandle() {
      // 关闭连接并设置为空
      this.hangupHandle();
    },
     cancelLoading(){
      this.isShowLoading=false
    },
  },
};
</script>

<style lang="scss" scoped>
.liveVideos {
      
  // -webkit-app-region: drag;
  width: 100%;
  height: auto;
  position: relative !important;
  // video {
  //   // object-fit: fill;
  // }
}
.box_change {
      
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: #000000;
  border-radius: 2px 2px 2px 2px;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 11;
  span {
    font-size: 12px;
    font-family: Source Han Sans SC-Regular, Source Han Sans SC;
    font-weight: 400;
    color: #e6e6e6;
    margin-left: 8px;
  }
}
</style>