cnhis-design-vue 0.2.63-beta → 0.3.1-beta

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

@@ -1,511 +0,0 @@
-<template>
-  <div class="single-audio" @mousedown="handleMove" :style="{ width: size === 'big' ? '414px' : '207px' }">
-    <div
-      class="header"
-      :style="{
-        height: size === 'big' ? '40px' : '30px',
-        lineHeight: size === 'big' ? '40px' : '30px',
-        textAlign: size === 'big' ? 'center' : 'left',
-        padding: size == 'big' ? '0 16px' : '0 8px'
-      }"
-    >
-      {{ videoMode == 1 ? '语音' : '视频' }}通话
-      <a-tooltip v-if="mySipName" placement="bottom" :overlayStyle="{ maxWidth: 'auto', fontSize: '12px' }">
-        <span slot="title">
-          当前设备{{ mySipName }}<br />
-          若要更换音视频设备，请点击设置进行更改
-        </span>
-        <svg-icon icon-class="xitongtubiaodaohangtubiaowenti" />
-      </a-tooltip>
-      <a-icon :type="size === 'big' ? 'shrink' : 'arrows-alt'" class="icon-item" :style="{ lineHeight: size === 'big' ? '40px' : '30px' }" @click="handleSize" />
-    </div>
-    <div
-      class="main"
-      :style="{
-        height: size === 'big' ? '560px' : '280px',
-        padding: size === 'big' ? '24px 36px 48px 36px' : '16px 16px 20px 16px'
-      }"
-    >
-      <div class="top">
-        <img class="user-logo" src="../img/customer.png" :width="size === 'big' ? 80 : 40" />
-        <div
-          class="user"
-          :style="{
-            height: size === 'big' ? '80px' : '40px',
-            padding: size === 'big' ? '24px 18px 7px' : '0 0 0 6px'
-          }"
-        >
-          <span :style="{ fontSize: size === 'big' ? '24px' : '14px' }">{{ name }}</span>
-          <span
-            class="status"
-            :style="{
-              fontSize: size === 'big' ? '16px' : '12px',
-              marginTop: size === 'big' ? '16px' : '0px'
-            }"
-            >{{ status }}</span
-          >
-        </div>
-      </div>
-      <div class="bottom">
-        <div v-if="videoData.isCaller || videoData.inviteResult == 1" class="item" :style="{ marginRight: size === 'big' ? '70px' : '45px' }" @click="handleAudio">
-          <img :src="require(`../img/${muteAudio ? 'muted-audio' : 'audio'}.png`)" :width="size === 'big' ? 82 : 48" />
-          <span :style="{ fontSize: size === 'big' ? '18px' : '14px' }">静音</span>
-        </div>
-        <div class="item" @click="handleReject('0')">
-          <img src="../img/reject.png" :width="size === 'big' ? 82 : 48" />
-          <span :style="{ fontSize: size === 'big' ? '18px' : '14px' }">{{ videoData.isCaller || videoData.inviteResult == 1 ? '挂断' : '拒接' }}</span>
-        </div>
-        <div v-if="videoData.isCaller === 0 && videoData.inviteResult != 1" class="item" @click="handleReject('1')">
-          <img :src="require(`../img/${videoMode == 2 ? 'video-accept' : 'accept'}.png`)" :width="size === 'big' ? 82 : 48" />
-          <span :style="{ fontSize: size === 'big' ? '18px' : '14px' }">接听</span>
-        </div>
-      </div>
-    </div>
-    <div class="video-view" :id="'uid_' + videoData.caller"></div>
-    <div class="video-view" :id="'uid_' + videoData.callee"></div>
-  </div>
-</template>
-
-<script>
-import { Icon, Tooltip } from 'ant-design-vue';
-import SvgIcon from '@/component/svg/index.vue';
-import { mapGetters, mapActions, mapMutations } from '../store/helper';
-import fetch, { qs } from '@/utils/chatFetch';
-import RtcClient from '../utils/rtc-client-multi';
-import { getSipUserId } from '@/utils/sip-device';
-import uniRTCAPI from './mixins/uniRTCAPI';
-export default {
-  inject: ['store', 'i18nText'],
-  mixins: [uniRTCAPI],
-  components: {
-    SvgIcon,
-    [Icon.name]: Icon,
-    [Tooltip.name]: Tooltip
-  },
-  props: {
-    validTalkingEnv: {
-      type: Function
-    }
-  },
-  data() {
-    return {
-      size: 'big',
-      timer: null,
-      meetingTime: 0,
-      expireTimer: null
-    };
-  },
-  computed: {
-    ...mapGetters(['userInfo']),
-    ...mapGetters([
-      'videoMembers',
-      'videoMode',
-      'assemblyId',
-      'sessionId',
-      'showAudio',
-      'videoData',
-      'recordId',
-      'sdkAppId',
-      'sdkInfo',
-      'serviceId',
-      'clientId',
-      'isServer',
-      'accessParams',
-      'queryParams',
-      'chatUserId',
-      'muteAudio'
-    ]),
-    mySipName() {
-      const videoData = this.videoData;
-      return videoData.isCaller ? videoData.callerSipName : videoData.calleeSipName;
-    },
-    callerSipName() {
-      const { callerSipName, callerSipKey } = this.videoData;
-      return getSipUserId({
-        username: callerSipKey,
-        name: callerSipName
-      });
-    },
-    calleeSipName() {
-      const { calleeSipName, calleeSipKey } = this.videoData;
-      return getSipUserId({
-        username: calleeSipKey,
-        name: calleeSipName
-      });
-    },
-    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;
-    },
-    name() {
-      let { isCaller, calleeName, callerName } = this.videoData;
-      return isCaller ? calleeName : callerName;
-    },
-    status() {
-      let { inviteResult, isCaller } = this.videoData;
-      if (Object.keys(this.videoData).length === 0) return '正在等待对方接受邀请...';
-      if (inviteResult == 1) {
-        return this.formatedMeetingTime;
-      } else {
-        return isCaller ? '正在等待对方接受邀请...' : `邀请你${this.videoMode == 1 ? '语音' : '视频'}通话…`;
-      }
-    },
-    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(':');
-    }
-  },
-  mounted() {
-    this.$on('stream-subscribed', evt => {
-      const stream = evt.stream;
-      let userId = stream.getUserId();
-      if (userId === this.callerSipName) {
-        userId = this.videoData.caller;
-      } else if (userId === this.calleeSipName) {
-        userId = this.videoData.callee;
-      }
-      this.playStream(stream, userId);
-    });
-    this.expireTimer = setInterval(() => {
-      if (this.videoData.inviteResult) return;
-      if (!this.videoData.timeCount) {
-        this.videoData.timeCount = 1;
-      } else {
-        this.videoData.timeCount += 1;
-      }
-      if (this.videoData.timeCount > this.videoData.expireTime) {
-        this.setShowAudio(false);
-        this.handleReject('0', true);
-      }
-    }, 1000);
-  },
-  activated() {
-    if (this.rtc) {
-      const videos = this.$el.querySelectorAll('video');
-      const audios = this.$el.querySelectorAll('audio');
-      const list = Array.from(videos || []).concat(Array.from(audios || []));
-      list.forEach(el => {
-        el.play();
-      });
-    }
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-    clearInterval(this.expireTimer);
-  },
-  methods: {
-    ...mapActions(['sendMessage']),
-    ...mapMutations(['setShowAudio', 'setVideoData', 'setRecordId', 'setShowVideo', 'setVideoMembers', 'setMuteAudio']),
-    playStream(stream, id, isUserId = true) {
-      const el = this.$el.querySelector(`#${isUserId ? 'uid_' : ''}${id}`);
-      el && stream.play(el);
-    },
-    handleSize() {
-      this.size = this.size === 'small' ? 'big' : 'small';
-    },
-    handleAudio() {
-      if (this.mySipName) {
-        this.$message.warning('请在专业设备上静音');
-        return;
-      }
-      if (this.muteAudio) {
-        this.rtc?.localStream_.unmuteAudio();
-      } else {
-        this.rtc?.localStream_.muteAudio();
-      }
-      this.setMuteAudio(!this.muteAudio);
-    },
-    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;
-        currentTarget.style.left = left + 'px';
-        currentTarget.style.top = top + 'px';
-      };
-      document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-      };
-    },
-    /* 发起邀请 */
-    lanchInvite() {
-      let memberIds = this.videoMembers.map(item => item.userId).join(',');
-      let params = {
-        assemblyId: this.assemblyId,
-        userId: this.userId,
-        sessionId: this.sessionId,
-        orgId: this.orgId,
-        mode: this.videoMode,
-        memberIds
-      };
-      const { callerSipKey, callerSipName } = this.videoData;
-      if (callerSipKey && callerSipName) {
-        params.sipKey = callerSipKey;
-        params.sipName = callerSipName;
-      }
-      fetch.post('/chat/access/videoInvite', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          this.$message.success(this.i18nText('1.9.386'));
-          // this.appendVideoMessage();
-          this.setVideoData(data.map);
-          // 江苏省
-          if (this.uniRTC || data.map?.vendor == 3) {
-            const targetList = data.map?.targetList || []; 
-            this.checkStatus(targetList);
-            this.startCall(targetList);
-          }
-        } else {
-          this.$message.warning(data.resultMsg);
-          this.setShowAudio(false);
-        }
-      });
-    },
-    /* 挂断视频 */
-    handleReject(accept, isTimeOut = false) {
-      if (!this.videoData?.inviteResult) {
-        if (this.validTalkingEnv && accept == '1') {
-          this.validTalkingEnv().then(res => {
-            if (res.status) {
-              const sip = res.sip ? { sipKey: res.sip.username, sipName: res.sip.name } : {};
-              this.cancelInvite(accept, isTimeOut, sip);
-            }
-          });
-        } else {
-          this.cancelInvite(accept, isTimeOut);
-        }
-        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') {
-          if (this.videoData?.roomId) {
-            this.handleLeaveRoom();
-            this.setMuteAudio(false);
-            
-            this.uniRTC && this.hangUp();
-          }
-        } else {
-          this.$message.warning(data.resultMsg);
-        }
-      });
-    },
-    cancelInvite(accept, isTimeOut, sip = {}) {
-      let params = {
-        ...sip,
-        assemblyId: this.assemblyId,
-        orgId: this.orgId,
-        userId: this.userId,
-        sessionId: this.videoData.sessionId,
-        recordId: this.videoData.recordId,
-        inviteResult: accept,
-        isExpire: isTimeOut ? 'Y' : ''
-      };
-      fetch.post('/chat/access/videoInviteEnter', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          if (accept == '0') {
-            this.$message.success(`${this.i18nText('1.9.387')}!`);
-            this.setShowAudio(false);
-            this.setMuteAudio(false);
-            this.setVideoMembers([]);
-            this.setVideoData({});
-            // 江苏省
-            if (this.uniRTC) {
-              if (this.videoData.isCaller || this.videoData.inviteResult == 1) {
-                this.stopCall();
-              } else {
-                // 拒接
-                this.refuseCall();
-              }
-            }
-          } else {
-            if (data.map.type == 1 && data.map.mode == 2) {
-              this.setShowVideo(true);
-              this.setShowAudio(false);
-            }
-            this.setVideoData(data.map);
-            this.$nextTick(() => {
-              this.setRecordId(data.map.recordId);
-            });
-            // 江苏省接听
-            console.log('江苏省接听->videoInviteEnter', this.incoming);
-            this.uniRTC && this.acceptCall();
-          }
-        }
-      });
-    },
-    appendVideoMessage() {
-      let body = {
-        content: this.videoMode == 2 ? '视频通话' : '语音通话',
-        type: this.videoMode == 2 ? 2 : 5
-      };
-      this.sendMessage(body);
-    },
-    /* 进入房间 */
-    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;
-      console.log(`sip-info ===>`, sipKey, sipName);
-      if (sipKey && sipName) {
-        const host = this.sdkInfo?.host;
-        sip = {
-          server: host ? host.replace(/^http(s?):\/\//, '') : '',
-          name: sipName,
-          username: sipKey
-        };
-      }
-      this.rtc = new RtcClient({
-        sip,
-        playStream: this.playStream,
-        events: this,
-        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: this.videoData.mode === 2,
-        message: this.$message,
-        noVoice: this.muteAudio
-      });
-      this.timer = setInterval(() => {
-        this.meetingTime = this.meetingTime + 1;
-      }, 1000);
-      this.setVideoMembers([]);
-    },
-    /* 退房 */
-    handleLeaveRoom() {
-      this.setShowAudio(false);
-      this.setVideoData({});
-      // this.setRoomId("");
-      this.setVideoMembers([]);
-      this.setRecordId('');
-      // this.setVideoMode("");
-      clearInterval(this.timer);
-      if (this.rtc) {
-        this.rtc.leave();
-        this.rtc = null;
-      }
-    }
-  },
-  watch: {
-    videoMembers: {
-      handler() {
-        if (this.showAudio && !this.rtc) {
-          this.lanchInvite();
-        }
-      }
-    },
-    recordId: {
-      handler(val) {
-        if (val) {
-          this.handleJoinRoom();
-        } else {
-          this.handleLeaveRoom();
-        }
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.single-audio {
-  position: fixed;
-  z-index: 300000;
-  top: calc(50% - 320px);
-  left: calc(50% - 240px);
-  width: 414px;
-  box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.14);
-  background: rgba(0, 0, 0, 0.9);
-  border-radius: 8px;
-  .video-view {
-    width: 0;
-    height: 0;
-    overflow: hidden;
-  }
-  .header {
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    font-size: 14px;
-    color: #ffffff;
-    .icon-item {
-      float: right;
-      line-height: 40px;
-    }
-  }
-  .main {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 560px;
-    width: 100%;
-    padding: 24px 36px 48px 36px;
-    color: #fff;
-    .top {
-      .user {
-        height: 80px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-        padding: 7px 18px;
-        font-size: 24px;
-        align-items: center;
-        font-size: 24px;
-        line-height: 32px;
-        .status {
-          font-size: 16px;
-          font-size: 16px;
-          line-height: 22px;
-        }
-      }
-      .user-logo {
-        display: block;
-        margin: 0 auto;
-      }
-    }
-    .bottom {
-      display: flex;
-      justify-content: center;
-      .item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        font-size: 18px;
-        color: #b2b7c2;
-        > img {
-          margin-bottom: 7px;
-        }
-        &:first-child {
-          margin-right: 70px;
-        }
-      }
-    }
-  }
-}
-</style>