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

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

@@ -1,399 +0,0 @@
-<template>
-  <div class="video-popover" ref="video">
-    <div class="video-header">
-      <span class="video-title">
-        <span>视频通话</span>
-        <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>
-      <a-icon :type="size === 'big' ? 'shrink' : 'arrows-alt'" class="icon-item" @click="handleSize" />
-      <a-popconfirm @confirm="handleClose" :okText="i18nText('1.1.1.1.3')" :cancelText="i18nText('2.7.1.14')">
-        <a-icon slot="icon" type="question-circle-o" style="color: red" />
-        <div slot="title">
-          <span>{{ i18nText('1.9.384') }}</span>
-          <br />
-          <span>{{ i18nText('1.9.385') }}?</span>
-        </div>
-        <a-icon type="close" class="icon-item" />
-      </a-popconfirm>
-    </div>
-    <div id="remote-video-wrap" :style="remoteVideoWrapStyle">
-      <div id="local_stream" class="video-placeholder" :style="localStreamStyle"> </div>
-    </div>
-    <div class="panel-wrapper" :style="panelWrapperStyle">
-      <ul class="operation-panel">
-        <li class="panel-item" @click="handleAudio">
-          <img :src="require(`../img/${muteAudio ? 'muted-audio' : 'audio'}.png`)" :width="size === 'big' ? 40 : 24" />
-          <span :style="{ fontSize: size === 'big' ? '14px' : '12px' }">静音</span>
-        </li>
-        <li class="panel-item" @click="handleReject">
-          <img src="../img/close_video.png" :width="size === 'big' ? 40 : 24" />
-          <span :style="{ fontSize: size === 'big' ? '14px' : '12px' }">挂断</span>
-        </li>
-        <li class="panel-item" @click="handleVideo">
-          <img :src="require(`../img/${muteVideo ? 'muted-video' : 'normal-video'}.png`)" :width="size === 'big' ? 40 : 24" />
-          <span :style="{ fontSize: size === 'big' ? '14px' : '12px' }">视频</span>
-        </li>
-        <li class="panel-item" @click="handleScreenToggle">
-          <img :src="require(`../img/${screen ? 'normal-screen' : 'muted-screen'}.png`)" :width="size === 'big' ? 40 : 24" />
-          <span :style="{ fontSize: size === 'big' ? '14px' : '12px' }">屏幕共享</span>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapMutations, mapActions } from '../store/helper';
-import RtcClient from '../utils/rtc-client';
-import fetch, { qs } from '@/utils/chatFetch';
-import { Icon, Popconfirm, Tooltip } from 'ant-design-vue';
-import SvgIcon from '@/component/svg/index.vue';
-import uniRTCAPI from './mixins/uniRTCAPI';
-
-export default {
-  inject: ['store', 'i18nText'],
-  mixins: [uniRTCAPI],
-  components: {
-    [Popconfirm.name]: Popconfirm,
-    [Tooltip.name]: Tooltip,
-    [Icon.name]: Icon,
-    SvgIcon
-  },
-  data() {
-    return {
-      sipName: '',
-      rtc: null,
-      isShowStart: false,
-      size: 'big',
-      screen: false,
-      muteVideo: false
-    };
-  },
-  computed: {
-    ...mapGetters(['userInfo']),
-    ...mapGetters([
-      'serviceId',
-      'clientId',
-      'assemblyId',
-      'sessionId',
-      'roomId',
-      'userSig',
-      'caller',
-      'videoId',
-      'showVideo',
-      'videoSessionId',
-      'sdkAppId',
-      'sdkInfo',
-      'recordId',
-      'videoData',
-      'isServer',
-      'accessParams',
-      'queryParams',
-      'chatUserId',
-      'muteAudio'
-    ]),
-    orgId() {
-      return this.isServer ? this.userInfo?.sysParams?.orgId : this.accessParams.orgId || this.queryParams.orgId;
-    },
-    userId() {
-      return this.isServer ? this.userInfo?.sysParams?.userId : this.accessParams.userId || this.chatUserId || this.queryParams.userId;
-    },
-    remoteVideoWrapStyle() {
-      return {
-        height: this.size === 'big' ? '568px' : '208px',
-        width: this.size === 'big' ? '800px' : '300px'
-      };
-    },
-    localStreamStyle() {
-      return {
-        height: this.size === 'big' ? '140px' : '60px',
-        width: this.size === 'big' ? '120px' : '50px'
-      };
-    },
-    panelWrapperStyle() {
-      return {
-        marginTop: this.size === 'big' ? '-90px' : '-60px'
-      };
-    }
-  },
-  created() {
-    this.$on('screen-sharing-stopped', () => {
-      if (this.screen) {
-        this.handleScreenToggle();
-      }
-    });
-    this.$on('initializeError', error => {
-      if (error?.name === 'NotAllowedError') {
-        // 拒绝屏幕共享则关闭
-        if (this.screen) {
-          this.handleScreenToggle();
-        }
-      }
-    });
-  },
-  mounted() {
-    this.$refs.video.addEventListener('mousedown', this.handleMove);
-  },
-  activated() {
-    if (this.rtc) {
-      const videos = this.$el.querySelectorAll('#remote-video-wrap video');
-      const audios = this.$el.querySelectorAll('#remote-video-wrap audio');
-      const list = Array.from(videos || []).concat(Array.from(audios || []));
-      list.forEach(el => {
-        el.play();
-      });
-    }
-  },
-  beforeDestroy() {
-    this.$refs.video.removeEventListener('mousedown', this.handleMove);
-    this.handleLeaveRoom();
-  },
-  methods: {
-    ...mapMutations(['setShowVideo', 'setMessage', 'setIsAppendMsg', 'setRoomId', 'setVideoData', 'setMuteAudio', 'setVideoMembers']),
-    ...mapActions(['sendMessage']),
-    handleAudio() {
-      if (this.sipName) {
-        this.$message.warning('请在专业设备上静音');
-        return;
-      }
-      if (this.muteAudio) {
-        this.rtc?.localStream_.unmuteAudio();
-      } else {
-        this.rtc?.localStream_.muteAudio();
-      }
-      this.setMuteAudio(!this.muteAudio);
-    },
-    handleVideo() {
-      if (this.sipName) {
-        this.$message.warning('专业设备通话无法操作摄像头');
-        return;
-      }
-      if (this.screen) {
-        this.$message.warning('屏幕共享状态无法操作摄像头');
-        return;
-      }
-      if (this.muteVideo) {
-        this.rtc.localStream_.unmuteVideo();
-      } else {
-        this.rtc.localStream_.muteVideo();
-      }
-      this.muteVideo = !this.muteVideo;
-    },
-    async handleScreenToggle() {
-      if (!this.rtc) return;
-      let screen = !this.screen;
-      this.screen = screen;
-      this.rtc
-        .toggleScreen(screen, {
-          userId: this.isServer ? this.serviceId : this.clientId,
-          roomId: this.videoData.roomId,
-          sdkAppId: this.sdkAppId,
-          host: this.sdkInfo?.host,
-          vendor: this.sdkInfo?.vendor,
-          userSig: this.videoData.token,
-          videoWindow: this,
-          openVideo: true,
-          message: this.$message,
-          noVoice: this.muteAudio,
-          events: this,
-          screen
-        })
-        .then(res => {
-          if (res instanceof RtcClient) {
-            this.rtc = res;
-          }
-        });
-    },
-    /* 挂断视频 */
-    handleReject() {
-      if (!this.videoData?.inviteResult) {
-        this.cancelInvite();
-        return;
-      }
-      let params = {
-        assemblyId: this.assemblyId,
-        orgId: this.orgId,
-        userId: this.userId,
-        recordId: this.videoData.recordId,
-        sessionId: this.videoData.sessionId
-      };
-      fetch.post('/chat/access/videoHangUp', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          // this.$message.success("视频挂断成功!");
-          if (this.videoData?.inviteResult) {
-            this.handleLeaveRoom();
-            this.setMuteAudio(false);
-            this.setShowVideo(false);
-            this.setVideoData({});
-          }
-          // 江苏省会议挂断
-          this.uniRTC && this.hangUp();
-        } else {
-          this.$message.warning(data.resultMsg);
-        }
-      });
-    },
-    handleClose() {
-      this.setShowVideo(false);
-      if (this.videoData?.token) {
-        this.handleLeaveRoom();
-      }
-    },
-    /* 进入房间 */
-    handleJoinRoom() {
-      /** this.sdkAppId 为空 没授权，不进入房间 */
-      if (!this.sdkAppId) {
-        this.$message.error('1.2.7.14.29');
-        return;
-      }
-      let sip = null;
-      const videoData = this.videoData;
-      const isCaller = videoData.isCaller == 1;
-      const sipKey = isCaller ? videoData.callerSipKey : videoData.calleeSipKey;
-      const sipName = isCaller ? videoData.callerSipName : videoData.calleeSipName;
-      if (sipKey && sipName) {
-        const host = this.sdkInfo?.host;
-        sip = {
-          server: host ? host.replace(/^http(s?):\/\//, '') : '',
-          name: sipName,
-          username: sipKey
-        };
-      }
-      this.sipName = sipName;
-      this.rtc = new RtcClient({
-        sip,
-        userId: this.isServer ? this.serviceId : this.clientId,
-        roomId: this.videoData.roomId,
-        sdkAppId: this.sdkAppId,
-        host: this.sdkInfo?.host,
-        vendor: this.sdkInfo?.vendor,
-        userSig: this.videoData.token,
-        videoWindow: this,
-        openVideo: true,
-        message: this.$message,
-        noVoice: this.muteAudio,
-        events: this
-      });
-      this.setVideoMembers([]);
-    },
-    handleLeaveRoom() {
-      if (this.rtc) {
-        this.rtc.leave();
-        this.rtc = null;
-      }
-    },
-    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;
-      };
-    },
-    handleSize() {
-      this.size = this.size === 'small' ? 'big' : 'small';
-    }
-  },
-  watch: {
-    recordId: {
-      handler(recordId) {
-        if (recordId) {
-          setTimeout(() => {
-            this.handleJoinRoom();
-          }, 2000);
-        }
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.video-popover {
-  position: fixed;
-  z-index: 200000;
-  // width: 800px;
-  // height: 568px;
-  top: calc(50% - 320px);
-  left: calc(50% - 240px);
-  background: #fff;
-  cursor: pointer;
-  .video-header {
-    display: flex;
-    justify-content: center;
-    height: 32px;
-    box-shadow: -4px -4px 10px #ced7ed;
-    .video-title {
-      flex: 1;
-      display: inline-block;
-      line-height: 32px;
-      text-align: center;
-      font-size: 14px;
-    }
-    .icon-item {
-      display: flex;
-      align-items: center;
-      line-height: 40px;
-      margin-left: auto;
-      margin-right: 20px;
-    }
-  }
-  #remote-video-wrap {
-    position: relative;
-    // height: 568px;
-    // width: 800px;
-    background: #2e2e2e;
-    // .video-view {
-    //   height: 100%;
-    // }
-  }
-  #local_stream {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    z-index: 1001;
-    // height: 140px;
-    // width: 120px;
-  }
-  .panel-wrapper {
-    position: relative;
-    // margin-top: -40px;
-  }
-
-  .ant-slider {
-    width: 120px;
-    margin-left: 130px;
-  }
-  .operation-panel {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    z-index: 1002;
-    .panel-item {
-      margin-right: 20px;
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      > img {
-        margin-bottom: 10px;
-      }
-    }
-  }
-}
-</style>