cnhis-design-vue 0.2.64-beta → 0.3.2-beta

package/packages/multi-chat/chat/multiVideo.vue

@@ -1,1409 +0,0 @@
-<template>
-  <div id="multi-video" :class="{ 'multi-video': true, small: fullFlag == 0, large: fullFlag == 2 }" @mousedown="handleMove">
-    <span
-      class="close"
-      v-if="videoStatus !== 2"
-      @click="
-        () => {
-          setMultiVideoShow(false);
-          setRoomId('');
-          setVideoMembers([]);
-        }
-      "
-      ><img src="../img/close.png"
-    /></span>
-    <!-- 发起会议 -->
-    <template v-if="videoStatus === 0">
-      <div class="start-meeting">
-        <span class="header">{{ serviceName }}发起{{ videoMode === 2 ? '视频' : '语音' }}通话</span>
-        <div class="footer">
-          <span
-            class="add"
-            @click="
-              () => {
-                $emit('update:addvisible', true);
-                setAddMemberType(2);
-              }
-            "
-          >
-            <img src="../img/add-person.png" />
-          </span>
-          <p class="info"> 已邀请 {{ videoMembers.map(item => item.name).join('、') }}共{{ videoMembers.length }}人 </p>
-          <span class="start" @click="handleLaunch">开始通话</span>
-          <div class="operate">
-            <span class="voice" @click="noVoice = !noVoice" :style="{ background: noVoice ? '#E1E4EB' : '#000000' }">
-              <img :src="require(`../img/${noVoice ? 'no-voice' : 'voice'}.png`)" />
-            </span>
-            <span v-if="videoMode == 2" class="video" @click="noVideo = !noVideo" :style="{ background: noVideo ? '#E1E4EB' : '#000000' }">
-              <img :src="require(`../img/${noVideo ? 'no-video' : 'video'}.png`)" />
-            </span>
-          </div>
-        </div>
-      </div>
-    </template>
-    <!-- 被邀请 -->
-    <template v-if="videoStatus === 1">
-      <div class="meeting-info">
-        <span class="name">{{ videoData.callerName }}</span>
-        <span class="desc">邀请你加入{{ videoData.callerName }}发起的{{ videoData.mode === 2 ? '视频' : '语音' }}通话</span>
-      </div>
-      <div class="operate-footer">
-        <div class="item" @click="handleAccept('0')"> <img src="../img/reject.png" width="80" /><span class="text">拒绝</span> </div>
-        <div class="item" @click="handleAccept('1')" v-if="videoData.mode == 1"> <img src="../img/accept.png" width="80" /><span class="text">语音接听</span> </div>
-        <div class="item" @click="handleAccept('1')" v-if="videoData.mode == 2"> <img src="../img/video-accept.png" width="80" /><span class="text">视频接听</span> </div>
-      </div>
-    </template>
-    <!-- 视频中 -->
-    <template v-if="videoStatus === 2">
-      <div class="meeting-header">
-        <span class="id">
-          会议号: {{ this.recordId }}
-          <a-tooltip v-if="sipName" placement="bottom" :overlayStyle="{ maxWidth: 'auto', fontSize: '12px' }">
-            <span slot="title">
-              当前设备{{ sipName }}<br />
-              若要更换音视频设备，请点击设置进行更改
-            </span>
-            <svg-icon icon-class="xitongtubiaodaohangtubiaowenti" />
-          </a-tooltip>
-        </span>
-        <span class="title">{{ organizerName }}发起的{{ videoData.mode === 2 ? '视频' : '语音' }}通话（{{ meetingList.length }}/{{ videoList.length }}）{{ formatedMeetingTime }}</span>
-        <span class="operate" @mousedown.stop>
-          <img v-if="fullFlag != 2" src="../img/full-sceen.png" @click="toFullScreen" />
-          <img v-if="fullFlag != 0" src="../img/full-sceen-close.png" @click="exitFullScreen" />
-          <img src="../img/close.png" @click="handleClose" />
-        </span>
-      </div>
-      <div class="meeting-main">
-        <div class="left">
-          <div class="current">
-            <div id="current-video" style="position: relative;zIndex: 100;"></div>
-            <span class="name" style="zIndex: 101;">{{ currentItem.name }}</span>
-            <img
-              src="../img/portrait.png"
-              style="position: absolute;left: calc(50% - 40px);top: calc(50% - 40px);"
-              :class="{ waiting: currentItem.status !== 3 }"
-              :style="{
-                zIndex: currentItem.videoStatus == 0 && currentItem.status == 3 ? 3000 : 0
-              }"
-            />
-          </div>
-          <div class="footer">
-            <div class="toolbar">
-              <div
-                class="btn"
-                :style="{
-                  'grid-template-columns': `repeat(${isOrganizer ? 6 : 4}, 1fr)`
-                }"
-              >
-                <img :src="require(`../img/${item.flag ? item.name : 'no-' + item.name}.png`)" v-for="(item, index) in operateList" :key="index" @click="handleOperateClick(item)" />
-              </div>
-              <div
-                class="text"
-                :style="{
-                  'grid-template-columns': `repeat(${isOrganizer ? 6 : 4}, 1fr)`
-                }"
-              >
-                <span v-for="(item, index) in operateList" :key="index">{{ item.flag ? item.yText : item.nText }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="right" id="remote-video-wrap" @click="handleVideoClick">
-          <div
-            v-for="item in treatedVideoList"
-            :key="item.username"
-            class="video-view"
-            :id="'uid_' + item.username"
-            @click="
-              () => {
-                if (currentItem.username != item.username) {
-                  currentItem = item;
-                }
-              }
-            "
-          >
-            <img
-              v-if="item.status !== 3 || item.videoStatus === 0 || currentItem.username == item.username"
-              src="../img/portrait.png"
-              style="position: absolute;left: calc(50% - 40px);top: calc(50% - 40px);"
-              :class="{ waiting: item.status !== 3 }"
-              @click="handleImgClick(item)"
-            />
-            <div class="header" v-if="item.username !== username && isOrganizer">
-              <a-popover placement="bottomLeft" :getPopupContainer="getPopupContainer">
-                <template slot="content">
-                  <ul class="streamOperate" style="cursor: pointer;">
-                    <li @click="handleVideoManage(item, 'voice')" v-if="item.status === 3"> <img src="../img/voice.png" width="24" />{{ item.voiceStatus === 1 ? '静音' : '取消静音' }} </li>
-                    <li @click="handleVideoManage(item, 'recall')" v-if="item.status !== 3"> <img src="../img/remove.png" width="24" />重新呼叫 </li>
-                    <li @click="handleRemoveConfirm(item)"> <img src="../img/remove.png" width="24" />移除 </li>
-                  </ul>
-                </template>
-                <img src="../img/ellipsis.png" width="20" />
-              </a-popover>
-            </div>
-            <div v-if="videoMode === 1" class="customer-portrait" :class="{ waiting: item.status !== 3 }">
-              <img src="../img/portrait.png" />
-            </div>
-            <div class="footer">
-              <div class="info">
-                <span class="name">{{ item.username !== username ? item.name : serviceName }}</span>
-                <span class="status" v-if="item.status !== 3">{{ item.statusDesc }}</span>
-              </div>
-              <span class="voice" v-if="item.voiceStatus === 0 && item.status === 3">
-                <img :src="require(`../img/${item.voiceStatus ? 'voice' : 'no-voiced'}.png`)" width="20" />
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <!-- 结束会诊 -->
-    <a-modal v-model="visible" title="结束通话" :zIndex="3000">
-      <p v-if="isOrganizer">
-        如果自己离开，仅自己挂断；结束通话，所有参会成员将被挂断
-      </p>
-      <div slot="footer">
-        <a-button @click="() => (visible = false)">取消</a-button>
-        <a-button @click="handleLeaveMeeting(1)">自己离开</a-button>
-        <a-button v-if="isOrganizer" type="danger" style="background: #F57365;border-color: #F57365;" @click="handleLeaveMeeting(0)">结束通话</a-button>
-      </div>
-    </a-modal>
-    <div id="template" style="display:none;">
-      <ul class="streamOperate">
-        <li data-type="voice"><img src="../img/voice.png" width="24" />静音</li>
-        <li data-type="remove"> <img src="../img/remove.png" width="24" />移除 </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState, mapGetters, mapMutations, mapActions } from '../store/helper';
-import RtcClient from '../utils/rtc-client-multi';
-import { getSipUserId } from '@/utils/sip-device';
-import fetch, { qs } from '@/utils/chatFetch';
-import { Button, Modal, Popover, Tooltip } from 'ant-design-vue';
-import SvgIcon from '@/component/svg/index.vue';
-import uniRTCAPI from './mixins/uniRTCAPI';
-
-const videoStatus = {
-  1: '未接听',
-  2: '未接听',
-  3: '已接听',
-  4: '已离开',
-  5: '已移除'
-};
-
-export default {
-  inject: ['store'],
-  mixins: [uniRTCAPI],
-  components: {
-    [Button.name]: Button,
-    [Popover.name]: Popover,
-    [Tooltip.name]: Tooltip,
-    AModal: Modal,
-    SvgIcon
-  },
-  data() {
-    return {
-      sipName: '',
-      username: '',
-      fullFlag: 1,
-      rtc: null,
-      screen: false,
-      visible: false,
-      videoList: [],
-      organizerName: '',
-      meetingTime: 0,
-      meetingTimer: null,
-      currentName: '',
-      isOrganizer: false,
-      organizer: null,
-      currentItem: {
-        name: this.serviceName,
-        status: 3,
-        username: this.serviceId
-      },
-      noVoice: false,
-      noVideo: false,
-      timer: null,
-      mounted: false
-    };
-  },
-  props: ['addvisible', 'validTalkingEnv'],
-  computed: {
-    ...mapGetters(['userInfo']),
-    ...mapState(['currentSip']),
-    ...mapGetters([
-      'videoStatus',
-      'videoId',
-      'serviceId',
-      'roomId',
-      'sdkAppId',
-      'sdkInfo',
-      'userSig',
-      'multiVideoShow',
-      'videoMembers',
-      'recordId',
-      'assemblyId',
-      'sessionId',
-      'videoListChange',
-      'videoData',
-      'videoMode'
-    ]),
-    serviceName() {
-      return this.userInfo?.sysParams?.userName;
-    },
-    treatedVideoList() {
-      const self = [];
-      const stream = [];
-      const waiting = [];
-      const uid = this.username;
-      this.videoList.forEach(item => {
-        if (item.username == uid) {
-          self.push(item);
-        } else if (item.status === 3) {
-          stream.push(item);
-        } else {
-          waiting.push(item);
-        }
-      });
-      return Array.prototype.concat(self, stream, waiting);
-    },
-    meetingList() {
-      return this.videoList.filter(item => item.status === 3);
-    },
-    toMeetingList() {
-      return this.videoList.filter(item => item.status !== 3);
-    },
-    formatedMeetingTime() {
-      let meetingTime = this.meetingTime;
-      let hour = Math.floor(meetingTime / 3600);
-      meetingTime = meetingTime - 3600 * hour;
-      let minute = Math.floor(meetingTime / 60);
-      let second = meetingTime % 60;
-      return [hour, minute, second].map(x => `${x < 10 ? 0 : ''}${x}`).join(':');
-    },
-    operateList() {
-      let list = [];
-      if (this.isOrganizer) {
-        list = [
-          {
-            name: 'voice',
-            flag: true,
-            yText: '开启静音',
-            nText: '关闭静音'
-          },
-          {
-            name: 'video',
-            flag: true,
-            yText: '关闭摄像头',
-            nText: '开启摄像头'
-          },
-          {
-            name: 'screen',
-            flag: false,
-            yText: '关闭屏幕共享',
-            nText: '开启屏幕共享'
-          },
-          {
-            name: 'over',
-            flag: true,
-            yText: '挂断'
-          },
-          {
-            name: 'all-voice',
-            flag: true,
-            yText: '开启全员静音',
-            nText: '关闭全员静音'
-          },
-          {
-            name: 'add-person',
-            flag: true,
-            yText: '添加参会人'
-          }
-        ];
-      } else {
-        list = [
-          {
-            name: 'voice',
-            flag: true,
-            yText: '开启静音',
-            nText: '关闭静音'
-          },
-          {
-            name: 'over',
-            flag: true,
-            yText: '挂断'
-          },
-          {
-            name: 'video',
-            flag: true,
-            yText: '关闭摄像头',
-            nText: '开启摄像头'
-          },
-          {
-            name: 'screen',
-            flag: false,
-            yText: '关闭屏幕共享',
-            nText: '开启屏幕共享'
-          }
-        ];
-      }
-      list.forEach(item => {
-        if (this.videoMode === 1 && item.name === 'video') {
-          item.flag = false;
-          item.disabled = true;
-        }
-      });
-      return list;
-    }
-  },
-  created() {
-    this.$on('stream-removed', this.handleStreamRemoved);
-    this.$on('screen-sharing-stopped', this.handleScreenSharingStopped);
-    this.$on('initializeError', error => {
-      if (error?.name === 'NotAllowedError') {
-        // 拒绝屏幕共享则关闭
-        this.handleScreenSharingStopped();
-      }
-    });
-    this.$on('stream-subscribed', evt => {
-      const stream = evt.stream;
-      let userId = stream.getUserId();
-      userId = this.sipKeys?.[userId] || userId;
-      this.playStream(stream, userId);
-      setTimeout(() => {
-        this.$el.querySelector(`#uid_${userId}`)?.click();
-      }, 500);
-    });
-  },
-  mounted() {
-    this.mounted = true;
-    this.timer = setInterval(() => {
-      if (this.videoStatus != 1) return;
-      if (!this.videoData.timeCount) {
-        this.videoData.timeCount = 1;
-      } else {
-        this.videoData.timeCount += 1;
-      }
-      if (this.videoData.timeCount > this.videoData.expireTime) {
-        this.setMultiVideoShow(false);
-      }
-    }, 1000);
-    this.registFullEvents();
-  },
-  activated() {
-    if (this.rtc) {
-      const videos = this.$el.querySelectorAll('.meeting-main video');
-      const audios = this.$el.querySelectorAll('.meeting-main audio');
-      const list = Array.from(videos || []).concat(Array.from(audios || []));
-      list.forEach(el => {
-        el.play();
-      });
-    }
-  },
-  beforeDestroy() {
-    this.handleLeaveRoom();
-    clearInterval(this.timer);
-  },
-  methods: {
-    ...mapMutations([
-      'setCurrentSip',
-      'setMultiVideoShow',
-      'setVideoStatus',
-      'setShowVideo',
-      'setAddMemberType',
-      'setVideoMembers',
-      'setRoomId',
-      'setUserSig',
-      'setRecordId',
-      'setVideoData',
-      'setVideoMode'
-    ]),
-    ...mapActions(['sendMessage']),
-    setSipKeys() {
-      this.sipKeys = this.videoList.reduce((obj, item) => {
-        const { username, sipKey, sipName } = item;
-        const id = getSipUserId({ name: sipName, username: sipKey });
-        if (id) {
-          obj[id] = username;
-        }
-        return obj;
-      }, {});
-    },
-    /**
-     * 主动发起视频
-     */
-    async handleLaunch() {
-      if (this.videoMembers.length === 0) {
-        this.$message.warning('请选择通话人员!');
-        return;
-      }
-      const sip = {};
-      if (this.validTalkingEnv) {
-        const res = await this.validTalkingEnv();
-        if (!res.status) {
-          return;
-        }
-        if (res.sip) {
-          this.setCurrentSip(res.sip ? Object.freeze(res.sip) : null);
-          Object.assign(sip, {
-            sipKey: res.sip.username,
-            sipName: res.sip.name
-          });
-        }
-      }
-      let memberIds = this.videoMembers.map(item => item.userId).join(',');
-      let params = {
-        ...sip,
-        assemblyId: this.assemblyId,
-        userId: this.userInfo?.sysParams?.userId,
-        sessionId: this.sessionId,
-        orgId: this.userInfo?.sysParams?.orgId,
-        memberIds,
-        mode: this.videoMode
-      };
-      fetch.post('/chat/access/videoInvite', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          let { recordId } = data.map;
-          this.setRecordId(recordId);
-          this.setVideoData(data.map);
-          // this.appendVideoMessage();
-          // 江苏省
-          if (this.uniRTC) {
-            const targetList = data.map?.targetList || []; 
-            this.checkStatus(targetList);
-            this.startCall(targetList);
-          }
-        } else {
-          data.resultMsg && this.$message.warning(data.resultMsg);
-        }
-      });
-    },
-    appendVideoMessage() {
-      let body = {
-        content: this.videoMode == 2 ? '视频通话' : '语音通话',
-        type: this.videoMode == 2 ? 2 : 5
-      };
-      this.sendMessage(body);
-    },
-    /* 进房 */
-    async handleJoinRoom() {
-      this.setVideoStatus(2);
-      await this.getVideoGroupDetail();
-      this.meetingTimer = setInterval(() => {
-        this.meetingTime = this.meetingTime + 1;
-      }, 1000);
-      /** this.sdkAppId 为空 没授权，不进入房间 */
-      if (!this.sdkAppId) {
-        this.$message.error('1.2.7.14.29');
-        return;
-      }
-      this.$nextTick(() => {
-        this.createRTC();
-      });
-    },
-    async createRTC(options = {}) {
-      this.currentVideo && this.currentVideo.stop();
-      this.rtc && (await this.rtc.leave());
-      this.screen = options.screen || false;
-      this.currentVideo = null;
-      const sip = this.currentSip;
-      this.username = this.serviceId;
-      this.sipName = sip?.name;
-      this.rtc = new RtcClient({
-        sip,
-        getPlayContainer: () => this.$el,
-        userId: this.serviceId,
-        roomId: this.videoData.roomId,
-        sdkAppId: this.sdkAppId,
-        host: this.sdkInfo?.host,
-        vendor: this.sdkInfo?.vendor,
-        userSig: this.videoData.token,
-        videoWindow: this,
-        openVideo: this.videoData.mode === 2,
-        message: this.$message,
-        noVideo: this.noVideo,
-        noVoice: this.noVoice,
-        events: this,
-        playStream: this.playStream,
-        ...options
-      });
-    },
-    toggleScreen(flag, options) {
-      if (!this.rtc) return;
-      if (this.currentVideo) {
-        let uid = this.currentVideo.getUserId();
-        uid = this.sipKeys?.[uid] || uid;
-        if (uid === this.username) {
-          this.currentVideo.stop();
-          this.currentVideo = null;
-        }
-      }
-
-      this.screen = flag;
-      const screen = this.operateList.find(item => item.name === 'screen');
-      screen && (screen.flag = flag);
-      if (!flag) {
-        const openVideo = this.operateList.find(item => item.name === 'video');
-        openVideo && (openVideo.flag = true);
-        const voice = this.operateList.find(item => item.name === 'voice');
-        voice && (voice.flag = true);
-      }
-      this.rtc
-        .toggleScreen(flag, {
-          userId: this.serviceId,
-          roomId: this.videoData.roomId,
-          sdkAppId: this.sdkAppId,
-          host: this.sdkInfo?.host,
-          vendor: this.sdkInfo?.vendor,
-          userSig: this.videoData.token,
-          videoWindow: this,
-          openVideo: this.videoData.mode === 2,
-          message: this.$message,
-          noVideo: this.noVideo,
-          noVoice: this.noVoice,
-          events: this,
-          ...options
-        })
-        .then(res => {
-          if (res instanceof RtcClient) {
-            this.rtc = res;
-          }
-        });
-    },
-    handleScreenSharingStopped() {
-      if (this.screen) {
-        this.toggleScreen(false, {
-          openVideo: true
-        });
-      }
-    },
-    handleStreamRemoved(evt) {
-      const id = this.currentVideo && this.currentVideo.getId();
-      if (id && id === evt.stream.getId()) {
-        this.currentVideo.stop();
-        this.currentVideo = null;
-      }
-    },
-    /* 退房 */
-    handleLeaveRoom() {
-      this.setShowVideo(false);
-      this.setRoomId('');
-      this.setVideoMembers([]);
-      this.setRecordId('');
-      this.setVideoMode('');
-      this.setVideoData({});
-      clearInterval(this.meetingTimer);
-      if (this.rtc) {
-        this.rtc.leave();
-        this.rtc = null;
-        this.setMultiVideoShow(false);
-        this.setShowVideo(false);
-      } else {
-        this.setMultiVideoShow(false);
-        this.setShowVideo(false);
-      }
-    },
-    handleMove(e) {
-      let currentTarget = e.currentTarget;
-      let disX = e.clientX - currentTarget.offsetLeft;
-      let disY = e.clientY - currentTarget.offsetTop;
-      document.onmousemove = e => {
-        let left = e.clientX - disX;
-        let top = e.clientY - disY;
-        this.positionX = top;
-        this.positionY = left;
-        currentTarget.style.left = left + 'px';
-        currentTarget.style.top = top + 'px';
-      };
-      document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-      };
-    },
-    handleClose() {
-      this.handleLeaveMeeting(1);
-    },
-    // 切换当前视口显示的用户视频
-    handleVideoClick(e) {
-      if (this.videoMode === 1) return;
-      let id = e.target.getAttribute('id');
-      if (!id || id === 'remote-video-wrap') return;
-      console.log(`handleVideoClick ===>`);
-      let currentVideo;
-      let username;
-      const reg = /^video_/; // 匹配 video 容器id
-      const playerReg = /^player_/; // 匹配 腾讯云video外层容器 id
-      if (reg.test(id)) {
-        id = id.slice(6);
-        username = e.target.parentNode?.getAttribute('id');
-        if (username && playerReg.test(username)) {
-          username = e.target.parentNode.parentNode?.getAttribute('id');
-        }
-      } else {
-        let children = e.target.children ? Array.from(e.target.children) : [];
-        while (children.length) {
-          const c = children.pop();
-          const i = c?.getAttribute('id');
-          if (i && playerReg.test(i)) {
-            children = c.children ? Array.from(c.children) : [];
-            continue;
-          }
-          if (i && reg.test(i)) {
-            username = id;
-            id = i.slice(6);
-            children.length = 0;
-          }
-        }
-      }
-      username = username ? username.replace(/^uid_/, '') : username;
-      const remote = this.rtc.remoteStreams_.find(item => item.id_ === id);
-      if (username === this.currentItem.username) {
-        currentVideo = remote || this.rtc.localStream_;
-      } else {
-        currentVideo = remote;
-      }
-      if (this.currentVideo) {
-        this.currentVideo.stop();
-        let userId = this.currentVideo.userId_;
-        userId = this.sipKeys?.[userId] || userId;
-        this.playStream(this.currentVideo, userId);
-        this.currentVideo = null;
-      }
-      if (!currentVideo) return;
-      this.currentVideo = currentVideo;
-      currentVideo.stop();
-      this.playStream(currentVideo, 'current-video', false);
-    },
-    handleImgClick(item) {
-      const { currentVideo, currentItem } = this;
-      if (currentVideo && currentItem.username !== item.username) {
-        currentVideo.stop();
-        this.playStream(currentVideo, currentVideo.userId_);
-        this.currentVideo = null;
-      }
-    },
-    playStream(stream, id, isUserId = true) {
-      const el = this.$el.querySelector(`#${isUserId ? 'uid_' : ''}${id}`);
-      el && stream.play(el);
-    },
-    handleOperateClick(item) {
-      if (item.disabled) return;
-      switch (item.name) {
-        case 'over':
-          if (this.isOrganizer) {
-            this.visible = true;
-          } else {
-            this.handleLeaveMeeting(1);
-          }
-          break;
-        case 'add-person':
-          this.$emit('update:addvisible', true);
-          this.setAddMemberType(2);
-          break;
-        case 'voice':
-          if (this.sipName) {
-            this.$message.warning('请在专业设备上静音');
-            return;
-          }
-          item.flag = !item.flag;
-          if (!item.flag) {
-            // this.rtc.localStream_.muteAudio();
-            this.handleVideoManage({ voiceStatus: 1 }, 'voice');
-          } else {
-            // this.rtc.localStream_.unmuteAudio();
-            this.handleVideoManage({ voiceStatus: 0 }, 'voice');
-          }
-          break;
-        case 'video':
-          if (this.sipName) {
-            this.$message.warning('专业设备通话无法操作摄像头');
-            return;
-          }
-          if (this.screen) {
-            this.$message.warning('屏幕共享状态无法操作摄像头');
-            return;
-          }
-          if (!this.rtc?.localStream_) return;
-          item.flag = !item.flag;
-          if (!item.flag) {
-            this.rtc.localStream_.muteVideo();
-            this.handleVideoManage({ videoStatus: 1 }, 'video');
-          } else {
-            this.rtc.localStream_.unmuteVideo();
-            this.handleVideoManage({ videoStatus: 0 }, 'video');
-          }
-          break;
-        case 'all-voice':
-          item.flag = !item.flag;
-          if (!item.flag) {
-            this.handleVideoManage({ voiceStatus: 1 }, 'all-voice');
-          } else {
-            // this.rtc.localStream_.unmuteVideo();
-            this.handleVideoManage({ voiceStatus: 0 }, 'all-voice');
-          }
-          break;
-        case 'screen': {
-          const flag = !item.flag;
-          this.toggleScreen(flag, {
-            openVideo: !flag,
-            screen: flag
-          });
-          item.flag = flag;
-          break;
-        }
-      }
-    },
-    getVideoGroupDetail() {
-      let params = {
-        recordId: this.videoData.recordId,
-        sessionId: this.videoData.sessionId,
-        orgId: this.userInfo?.sysParams?.orgId,
-        assemblyId: this.assemblyId
-      };
-      return fetch
-        .get('/chat/access/videoGroupDetail', {
-          params
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            this.organizerName = data.map.caller.name;
-            this.organizer = data.map.caller;
-            this.isOrganizer = data.map.caller.userId == this.userInfo?.sysParams?.userId;
-            let result = Array.prototype.concat(data.map.caller || [], data.map.memberList || []);
-            result.map(item => {
-              item.statusDesc = videoStatus[item.status];
-              if (item.userId == this.userInfo?.sysParams?.userId) {
-                // item.name = "我";
-                if (item.voiceStatus == 0) {
-                  this.noVoice = true;
-                }
-              }
-            });
-            this.videoList = result;
-            if (this.noVideo) {
-              this.handleVideoManage({ videoStatus: 1 }, 'video');
-              let video = this.operateList.find(item => item.name === 'video');
-              video.flag = !video.flag;
-            }
-            if (this.noVoice) {
-              this.handleVideoManage({ voiceStatus: 1 }, 'voice');
-              let voice = this.operateList.find(item => item.name === 'voice');
-              voice.flag = !voice.flag;
-            }
-            this.setSipKeys();
-          }
-        });
-    },
-    getPopupContainer() {
-      return document.getElementById('multi-video');
-    },
-    findVideo(username) {
-      return this.videoList.find(item => item.username === username);
-    },
-    handleVideoManage(item, type) {
-      let status, mode, changeUserId, memberIds;
-      if (item.userId) {
-        changeUserId = item.userId;
-      }
-      if (type === 'voice') {
-        status = item.voiceStatus ? 0 : 1;
-        mode = 1;
-      }
-      if (type === 'video') {
-        status = item.videoStatus ? 0 : 1;
-        mode = 2;
-      }
-      if (type === 'recall') {
-        mode = 5;
-      }
-      if (type === 'remove') {
-        mode = 4;
-      }
-      if (type === 'all-voice') {
-        status = item.voiceStatus;
-        mode = 3;
-        // this.videoList.map(
-        //   item => (item.voiceStatus = item.voiceStatus === 1 ? 0 : 1)
-        // );
-      }
-      let data = {
-        recordId: this.videoData.recordId,
-        sessionId: this.videoData.sessionId,
-        orgId: this.userInfo?.sysParams?.orgId,
-        assemblyId: this.assemblyId,
-        userId: this.userInfo?.sysParams?.userId,
-        changeUserId,
-        status,
-        mode,
-        memberIds
-      };
-      fetch.post('/chat/access/videoGroupManage', qs.stringify(data)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          console.log('/chat/access/videoGroupManage', 'SUCCESS');
-        }
-      });
-    },
-    handleLeaveMeeting(status) {
-      let data = {
-        recordId: this.videoData.recordId,
-        sessionId: this.videoData.sessionId,
-        orgId: this.userInfo?.sysParams?.orgId,
-        assemblyId: this.assemblyId,
-        userId: this.userInfo?.sysParams?.userId,
-        status
-      };
-      fetch.post('/chat/access/videoHangUp', qs.stringify(data)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          this.handleLeaveRoom();
-          // 江苏省主动挂断
-          this.uniRTC && this.hangUp();
-        }
-      });
-    },
-    async handleAccept(accept) {
-      if (this.validTalkingEnv) {
-        const res = await this.validTalkingEnv();
-        if (!res.status) {
-          return;
-        }
-        this.acceptInvite(accept, res.sip);
-      } else {
-        this.acceptInvite(accept);
-      }
-    },
-    acceptInvite(accept, sip) {
-      sip = sip ? Object.freeze(sip) : null;
-      const sipInfo = sip
-        ? {
-            sipKey: sip.username,
-            sipName: sip.name
-          }
-        : null;
-      let params = {
-        ...sipInfo,
-        assemblyId: this.assemblyId,
-        orgId: this.userInfo?.sysParams?.orgId,
-        userId: this.userInfo?.sysParams?.userId,
-        sessionId: this.videoData.sessionId,
-        recordId: this.videoData.recordId,
-        inviteResult: accept
-      };
-      fetch.post('/chat/access/videoInviteEnter', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          if (accept == 0) {
-            this.setMultiVideoShow(false);
-            this.setVideoData({});
-            // 江苏省拒接
-            this.uniRTC && this.refuseCall();
-            return;
-          }
-          // 江苏省接听
-          this.uniRTC && this.acceptCall();
-          let res = data.obj || data.map;
-          let { token: userSig, roomId, recordId, caller, mode, type } = res;
-          this.setCurrentSip(sip);
-          this.setVideoStatus(2);
-          this.setVideoData(res);
-          this.setVideoMode(mode);
-          this.$nextTick(() => {
-            this.setRecordId(recordId);
-          });
-        } else {
-          data.resultMsg && this.$message.warning(data.resultMsg);
-        }
-      });
-    },
-    handleRemoveConfirm(item) {
-      this.$confirm({
-        title: `是否移除${item.name}?`,
-        okText: '确定',
-        cancelText: '取消',
-        onOk: () => {
-          this.handleVideoManage(item, 'remove');
-        },
-        onCancel() {}
-      });
-    },
-    registFullEvents() {
-      let placeholderDom = null;
-      const fullScreenChange = () => {
-        const el = this.$el;
-        if (!el) return;
-        const status = !placeholderDom;
-        if (status) {
-          if (this.fullFlag != 2) return;
-          const div = document.createElement('div');
-          div.style = 'display:none';
-          el.parentNode?.replaceChild(div, el);
-          document.body.appendChild(el);
-          placeholderDom = div;
-        } else {
-          this.fullFlag = 1;
-          placeholderDom.parentNode?.replaceChild(el, placeholderDom);
-          placeholderDom = null;
-        }
-      };
-      document.addEventListener('fullscreenchange', fullScreenChange);
-      document.addEventListener('webkitfullscreenchange', fullScreenChange);
-      document.addEventListener('mozfullscreenchange', fullScreenChange);
-      document.addEventListener('MSFullscreenChange', fullScreenChange);
-      this.$on('hook:beforeDestroy', () => {
-        document.removeEventListener('fullscreenchange', fullScreenChange);
-        document.removeEventListener('webkitfullscreenchange', fullScreenChange);
-        document.removeEventListener('mozfullscreenchange', fullScreenChange);
-        document.removeEventListener('MSFullscreenChange', fullScreenChange);
-        if (placeholderDom) {
-          placeholderDom.parentNode?.removeChild(placeholderDom);
-          placeholderDom = null;
-          this.$el?.parentNode?.removeChild(this.$el);
-          this.toggleFullScreen(false);
-        }
-      });
-    },
-    toggleFullScreen(fullScreen) {
-      const el = fullScreen ? document.body : document;
-      const fn = fullScreen
-        ? el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen || el.oRequestFullScreen
-        : el.cancleFullScreen || el.webkitCancelFullScreen || el.mozCacelFullScreen || el.msCanclFullScreen || el.oCancelFullScreen;
-      if (fn) {
-        fn.call(el);
-      }
-    },
-    toFullScreen() {
-      switch (this.fullFlag) {
-        case 0:
-          this.fullFlag++;
-          break;
-        case 1:
-          this.toggleFullScreen(true);
-          this.fullFlag++;
-          break;
-      }
-    },
-    exitFullScreen() {
-      switch (this.fullFlag) {
-        case 2:
-          this.toggleFullScreen(false);
-          this.fullFlag--;
-          break;
-        case 1:
-          this.fullFlag--;
-          break;
-      }
-    }
-  },
-  watch: {
-    recordId: {
-      handler(val) {
-        if (val) {
-          this.$nextTick(() => {
-            this.handleJoinRoom();
-          });
-        } else {
-          this.handleLeaveRoom();
-        }
-      }
-    },
-    /**
-     * mode: 0(成员离开或加入)
-     */
-    videoListChange: {
-      handler(item) {
-        let { mode, changeMemberList = [{}], status: modeStatus } = item;
-        const member = changeMemberList[0];
-        let { voiceStatus, videoStatus: vStatus, username, status, name } = member;
-        let video = this.findVideo(username);
-        let voice = this.operateList.find(item => item.name === 'voice');
-        switch (mode) {
-          case 0:
-            video.status = status;
-            video.statusDesc = videoStatus[status];
-            video.voiceStatus = voiceStatus;
-            if (status == 4 && username != this.username) {
-              this.$message.success(name + '已离开!');
-            }
-            if (status == 3 && username != this.username) {
-              video.sipKey = member.sipKey;
-              video.sipName = member.sipName;
-              this.$message.success(name + '已加入!');
-            }
-            break;
-          case 2:
-            video.videoStatus = vStatus;
-            break;
-          case 1:
-            video.voiceStatus = voiceStatus;
-            if (video.username == this.username) {
-              if (voiceStatus == 1) {
-                this.rtc.setMuteAudio(false);
-              } else {
-                this.rtc.setMuteAudio(true);
-              }
-            }
-            break;
-          case 3:
-            this.videoList.map(item => {
-              if (item.username !== this.organizer?.username) {
-                item.voiceStatus = modeStatus == 0 ? 1 : 0;
-              }
-            });
-            if (this.isOrganizer) return;
-            if (modeStatus == 0) {
-              this.rtc.setMuteAudio(false);
-              voice.flag = true;
-            } else {
-              this.rtc.setMuteAudio(true);
-              voice.flag = false;
-            }
-            // voice.flag = !voice.flag;
-            break;
-          case 4:
-            video.status = status;
-            video.statusDesc = videoStatus[status];
-            if (username === this.username) {
-              this.handleLeaveRoom();
-              this.$message.success('你已被管理员移除!');
-            } else {
-              this.$message.success(name + '已被移除');
-              let index = this.videoList.findIndex(item => item.username == username);
-              this.videoList.splice(index, 1);
-              index = this.videoMembers.findIndex(item => item.username == username);
-              this.videoMembers.splice(index, 1);
-            }
-            break;
-          case 5:
-            video.status = status;
-            video.statusDesc = videoStatus[status];
-            break;
-          case 6:
-            changeMemberList.map(item => {
-              item.statusDesc = videoStatus[item.status];
-            });
-            this.videoList = this.videoList.concat(changeMemberList);
-            break;
-        }
-        this.setSipKeys();
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.multi-video {
-  position: absolute;
-  z-index: 2000;
-  width: 1300px;
-  height: 800px;
-  top: calc(50% - 400px);
-  left: calc(50% - 650px);
-  background: #252529;
-  cursor: pointer;
-  .video-view {
-    position: relative;
-    height: 160px;
-    width: 240px;
-    background: #121214;
-    margin-bottom: 8px;
-  }
-  #current-video {
-    height: 100%;
-  }
-  &.large {
-    left: 0 !important;
-    right: 0 !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    width: 100%;
-    height: 100%;
-    z-index: 1000;
-  }
-  &.small {
-    width: 240px;
-    height: 200px;
-    .meeting-main {
-      padding: 0;
-      .right,
-      .left .footer {
-        display: none;
-      }
-      .left .current {
-        height: 160px;
-      }
-    }
-    .meeting-header {
-      justify-content: flex-end;
-      .id,
-      .title {
-        display: none;
-      }
-    }
-  }
-  .close {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-  }
-  .meeting-info {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 100px;
-    .name {
-      margin-bottom: 14px;
-      font-size: 24px;
-      line-height: 33px;
-      color: #e1e4eb;
-    }
-    .desc {
-      font-size: 18px;
-      line-height: 25px;
-      color: #b2b7c2;
-    }
-  }
-  .operate-footer {
-    position: absolute;
-    bottom: 64px;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: space-between;
-    padding: 0 360px;
-    .item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      color: #b2b7c2;
-      .text {
-        margin-top: 8px;
-        font-size: 18px;
-      }
-    }
-  }
-  .meeting-header {
-    display: flex;
-    justify-content: space-between;
-    height: 40px;
-    background: #37383a;
-    color: #e1e4eb;
-    line-height: 40px;
-    padding-left: 16px;
-    font-size: 16px;
-    .operate {
-      img {
-        margin-right: 8px;
-      }
-    }
-  }
-  .meeting-main {
-    height: calc(100% - 40px);
-    display: flex;
-    padding: 0 16px;
-    background: #37383a;
-    .left {
-      flex: 1;
-      background: #37383a;
-      .current {
-        position: relative;
-        height: calc(100% - 110px);
-        background: #252529;
-        .name {
-          position: absolute;
-          font-size: 16px;
-          color: #fff;
-          line-height: 28px;
-          left: 8px;
-          bottom: 8px;
-        }
-      }
-      .footer {
-        display: flex;
-        justify-content: center;
-        padding: 16px 0 14px 0;
-        .toolbar {
-          .btn,
-          .text {
-            width: 590px;
-          }
-          .btn {
-            display: grid;
-            grid-template-columns: repeat(5, 1fr);
-            justify-items: center;
-            align-items: center;
-            height: 40px;
-            background: #595a5d;
-            border-radius: 20px;
-            cursor: pointer;
-          }
-          .text {
-            display: grid;
-            grid-template-columns: repeat(5, 1fr);
-            justify-items: center;
-            align-items: center;
-            height: 40px;
-            color: #b2b7c2;
-            font-size: 16px;
-            line-height: 22px;
-          }
-        }
-      }
-    }
-    .right {
-      width: 250px;
-      padding-left: 10px;
-      overflow-y: scroll;
-      overflow-x: hidden;
-      &::-webkit-scrollbar {
-        width: 0px;
-      }
-      #local_stream {
-        position: relative;
-        background: #121214;
-        .name {
-          position: absolute;
-          width: 100%;
-          color: #7f7f7f;
-          font-size: 60px;
-          line-height: 160px;
-          text-align: center;
-        }
-        .ellipsis_operate {
-          position: absolute;
-          right: 8px;
-          top: 8px;
-          background: rgba(37, 37, 41, 0.8);
-          width: 24px;
-          height: 24px;
-          padding: 2px;
-          z-index: 300;
-        }
-      }
-      > div {
-        width: 240px;
-        height: 160px;
-        margin-bottom: 8px;
-      }
-    }
-  }
-  .start-meeting {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    color: #e1e4eb;
-    align-items: center;
-    justify-content: space-between;
-    padding: 100px 0 66px 0;
-    .header {
-      font-size: 24px;
-    }
-    .footer {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      .add {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        background: #000000;
-      }
-      .info {
-        margin: 16px 0 72px 0;
-        font-size: 20px;
-      }
-      .start {
-        display: inline-block;
-        width: 320px;
-        height: 48px;
-        margin-bottom: 24px;
-        background: #5585f5;
-        font-size: 20px;
-        line-height: 48px;
-        text-align: center;
-        border-radius: 26px;
-      }
-      .operate {
-        display: flex;
-        .voice,
-        .video {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 100px;
-          height: 40px;
-          background: #000;
-          border-radius: 20px;
-        }
-        .voice {
-          margin-right: 24px;
-        }
-      }
-    }
-  }
-  .video-view {
-    position: relative;
-    color: #fff;
-    .footer {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      padding: 8px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      z-index: 3000;
-      .info {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-      .voice {
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-        background: #595a5d;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-    .header {
-      position: absolute;
-      right: 8px;
-      top: 8px;
-      z-index: 3000;
-    }
-    .customer-portrait {
-      position: absolute;
-      left: calc(50% - 40px);
-      top: calc(50% - 40px);
-      z-index: 2000;
-      &.waiting {
-        opacity: 0.3;
-      }
-    }
-  }
-  /deep/ .ant-popover-inner-content {
-    padding: 16px;
-    color: rgba(0, 0, 0, 0.65);
-    width: 138px;
-    background: #252529;
-    color: #fff;
-    height: 87px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  /deep/ .ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow {
-    border-color: #252529;
-  }
-  .waiting {
-    opacity: 0.3;
-  }
-}
-</style>