react_hsbc_teller 0.0.1

package/packages/pages/video/video.jsx

@@ -0,0 +1,1317 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
+/* eslint-disable eqeqeq */
+import React, { Component, useState } from 'react';
+import API from '../../api/api';
+import initWebSocket from '../../common/websocket';
+import './video.less'
+import Header from '../header/header.jsx'
+import Foot from '../foot/foot.jsx'
+import voiceImgOpen from '../../assets/img/icon_Mute.png'
+import voiceImgCloe from '../../assets/img/icon_MuteOne.png'
+import cameraImgOpen from '../../assets/img/icon_camera.png'
+import cameraImgCloe from '../../assets/img/icon_cameraOne.png'
+import {callNimIM} from '../../utils/cell.js'
+import Modal from "antd/lib/modal";
+import 'antd/lib/modal/style'
+import message from "antd/lib/message";
+import 'antd/lib/message/style'
+import Pdf from '../pdf/pdf'
+
+class Video extends Component {
+  state = {
+    isTranscribing: false,
+    transcribingData: '',
+    isPDF: true,
+    roomCustomerList: [],
+    facialImg: '',
+    isModalVisibleFacial: false,
+    isModalVisibleEnd: false,
+    isModalVisible: false,
+    screenName: '投屏',
+    suspendName: '暂停',
+    cameraImg: cameraImgOpen,
+    voiceStatue: false,
+    voiceImg: voiceImgOpen,
+    isBigVideo: 'video2',
+    isCustomer: true,
+    publishDevic: 1,
+    isSharedScreen: false,
+    isSuspend: false,
+    audioed: false,
+    customAudioed: false,
+    recordId: '', // 录制id
+    contentDress: '', // 地理位置
+    callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',// 回调地址外部
+    businessNumber: '', // 外部传入的流水号
+    workSpaceId: '',
+    tellerId: 'ts001',
+    bizName: '',
+    appId: '',
+    room_server_url: 'wss://cn-hangzhou-mrtc.cloud.alipay.com/ws',
+    // room_server_url: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
+    channelId: '',
+    rtoken: '',
+    sessionId: '',
+    imRoomId: '',
+    html_string: '<span style="color:red">123456</span>',
+  };
+  // eslint-disable-next-line no-undef
+  test_controller = new McuController();
+  /**
+   * 创建房间成功后回调后台
+   * @param  {JSON} data 数据类型
+   */
+  createRoom = async data => {
+    console.log(data);
+    try {
+      let result = await API.createRoom({
+        tellerAccount: this.state.tellerId,
+        businessNumber: this.state.businessNumber,
+        callbackUrl: this.state.callbackUrl,
+        roomId: this.state.channelId,
+        mtoken: this.state.rtoken
+      });
+      console.log(result);
+      this.setState({
+        imRoomId: result.imRoomId
+      });
+      this.setState({
+        sessionId: result.sessionId
+      });
+      // eslint-disable-next-line no-undef
+      joinRoom((this.state.tellerId + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  /**
+   * 初始化获取数据
+   * @param  {JSON} data 数据类型
+   */
+  mpaasSig = async data => {
+    console.log(data);
+    try {
+      let result = await API.mpaasSig({account: data.account, type: data.type});
+      console.log(result);
+      window.sessionStorage.setItem('alimpassSig', result.mpsSig);
+      this.setState({
+        workSpaceId: result.workSpaceId
+      });
+      this.setState({
+        appId: result.appId
+      });
+      this.setState({
+        bizName: result.bizName
+      });
+      this.setState({
+        bizName: result.bizName
+      });
+      window.sessionStorage.setItem('sigData', JSON.stringify(result));
+      if (data.sigType == 1) {
+        this.handleEdit()
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  handleEdit = () => {
+    console.log(JSON.parse(window.sessionStorage.getItem('sigData')));
+    // eslint-disable-next-line no-undef
+    initWebSocket('wss://' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname + ':' + JSON.parse(window.sessionStorage.getItem('sigData')).webPort + '/ws/');
+    const config_param = {};
+    config_param.workspaceId = this.state.workSpaceId;
+    config_param.uid = this.state.tellerId;
+    config_param.biz_name = this.state.bizName; // 'demo'
+    config_param.appId = this.state.appId;
+
+    config_param.room_server_url = this.state.room_server_url;
+    // 允许最大断网时间 (超过未重连, 直接关闭)
+    config_param.network_check_timeout = 10000;
+    this.test_controller.Connect(config_param)
+  };
+  // 初始化视频
+  ConnectMRTC = () => {
+    const config_param = {};
+    config_param.auto_publish_subscribe = 3;
+    config_param.media_type = 1;
+    config_param.publish_device = 1;
+    config_param.video_profile_type = '5';
+    config_param.need_volume_analyser = true;
+    // config_param.audioSource = that.microphone[0].actionid
+    // config_param.videoSource = that.checkOne[0]
+    // config_param.transport_ = 'relay'
+    config_param.initPublish = [
+      {
+        publish_video_id: 'publish_video1',
+        publish_streamId_id: 'publish_streamId1',
+        publish_tag: 'tag1'
+      }
+    ];
+    const recordParam = {};
+    recordParam.width = 640;
+    recordParam.height = 360;
+    recordParam.channels = 1;
+    recordParam.splitType = 0;
+    recordParam.startTimeout = 5;
+    recordParam.recordTotalStream = 0;
+    recordParam.endType = 1;
+    config_param.recordParam = recordParam;
+    config_param.initSubscribe = config_param.initSubscribe = [
+      {
+        subscribe_video_id: 'video1',
+        subscribe_audio_id: 'audio1',
+        subscribe_streamId_id: 'subscribe_streamId1',
+        feedId_id: 'feedId1'
+      },
+      {
+        subscribe_video_id: 'video2',
+        subscribe_audio_id: 'audio2',
+        subscribe_streamId_id: 'subscribe_streamId2',
+        feedId_id: 'feedId2'
+      },
+      {
+        subscribe_video_id: 'video3',
+        subscribe_audio_id: 'audio3',
+        subscribe_streamId_id: 'subscribe_streamId3',
+        feedId_id: 'feedId3'
+      },
+      {
+        subscribe_video_id: 'video4',
+        subscribe_audio_id: 'audio4',
+        subscribe_streamId_id: 'subscribe_streamId4',
+        feedId_id: 'feedId4'
+      },
+      {
+        subscribe_video_id: 'video5',
+        subscribe_audio_id: 'audio5',
+        subscribe_streamId_id: 'subscribe_streamId5',
+        feedId_id: 'feedId5'
+      },
+      {
+        subscribe_video_id: 'video6',
+        subscribe_audio_id: 'audio6',
+        subscribe_streamId_id: 'subscribe_streamId6',
+        feedId_id: 'feedId6'
+      }
+    ];
+    this.test_controller.InitRoomConfig(config_param)
+  };
+  // 开启录制
+  enableServerRecording = () => {
+    const filePath = 'recordId_' + new Date().valueOf();
+    const recordParam = {};
+    recordParam.width = 640;
+    recordParam.height = 480;
+    recordParam.recordTotalStream = 0;
+    recordParam.startTimeout = 10;
+    recordParam.splitType = 0;
+    recordParam.endType = 1;
+    recordParam.overlaps = [
+      {
+        tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
+        type: 1, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
+        id: 1, // ⽔印 ID
+        enable: true,
+        xPosition: 10, // x 轴位置
+        yPosition: 10, // y 轴位置
+        text: '', // ⽔印⽂字
+        fontSize: 16, // 字体⼤⼩
+        url: '' // ⽔印图⽚ HTTP 地址
+      },
+      {
+        tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
+        type: 2, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
+        id: 2, // ⽔印 ID
+        enable: true,
+        xPosition: 10, // x 轴位置
+        yPosition: 50, // y 轴位置
+        text: this.state.contentDress, // ⽔印⽂字
+        fontSize: 16, // 字体⼤⼩
+        url: '' // ⽔印图⽚ HTTP 地址
+      }
+    ];
+    console.log('recordParam', recordParam);
+    this.test_controller.StartRemoteRecord(filePath, recordParam, '')
+
+  };
+  // 结束会话
+  endSession = value => {
+    if (value == 'customerHangUp') {
+      this.endSessionValue()
+    } else {
+      // 退出房间
+      this.setState({
+        isModalVisibleEnd: true
+      })
+    }
+  };
+  contrastFaceVerify = async data => {
+    console.log(data);
+    try {
+      let result = await API.contrastFaceVerify({
+        sessionId: this.state.sessionId,
+        imagePath: data
+      });
+      console.log(result);
+      if (result.code == 200) {
+        message.success('人脸识别成功');
+        this.setState({
+          isModalVisibleFacial: false
+        })
+      } else {
+        message.success('人脸识别失败')
+      }
+
+
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  uploadImg = async data => {
+    console.log(data);
+    try {
+      let result = await API.uploadImg(data);
+      console.log(result);
+      this.contrastFaceVerify(result.data)
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  dataURLtoFile = (dataURI, type) => {
+    const binary = atob(dataURI.split(',')[1]);
+    const array = [];
+    for (let i = 0; i < binary.length; i++) {
+      array.push(binary.charCodeAt(i))
+    }
+    return new Blob([new Uint8Array(array)], {type: type})
+  };
+  // 人脸识别
+  facialRecognition = () => {
+    const sid = document.getElementById('publish_video1').name;
+    this.setState({
+      facialImg: this.test_controller.TakePicture(0, undefined, undefined, sid, 'png')
+    })
+  };
+  endSessionValue = () => {
+    this.test_controller.LeaveRoom()
+  };
+  // 放大对应的视频
+  enlargeClick = (val) => {
+    if (val == 'isLangVideo1') {
+      if (document.getElementById('video1').name) {
+        this.setState({isBigVideo: 'video1'})
+      }
+    } else if (val == 'isLangPublishVideo1') {
+      if (document.getElementById('publish_video1').name) {
+        this.setState({isBigVideo: 'publish_video1'})
+      }
+    } else if (val == 'isLangVideo2') {
+      if (document.getElementById('video2').name) {
+        this.setState({isBigVideo: 'video2'})
+      }
+    } else if (val == 'isLangVideo3') {
+      if (document.getElementById('video3').name) {
+        this.setState({isBigVideo: 'video3'})
+      }
+    } else if (val == 'isLangVideo4') {
+      if (document.getElementById('video4').name) {
+        this.setState({isBigVideo: 'video4'})
+      }
+    } else if (val == 'isLangVideo5') {
+      if (document.getElementById('video5').name) {
+        this.setState({isBigVideo: 'video5'})
+      }
+    } else if (val == 'isLangVideo6') {
+      if (document.getElementById('video6').name) {
+        this.setState({isBigVideo: 'video6'})
+      }
+    }
+  };
+  // 画中画
+  pictureInPicture = () => {
+    const publish_config = {};
+    publish_config.media_type = 1;
+    publish_config.publish_device = 4;
+    publish_config.need_volume_analyser = false;
+    publish_config.video_profile_type = 3;
+    publish_config.part_of_screen_id = 'touBoxItem';
+    publish_config.publish_video_id = 'video3';
+    publish_config.publish_streamId_id = 'subscribe_streamId3';
+    // publish_config.publish_tag = 'sharedScreen'
+    this.test_controller.Publish(publish_config);
+    callNimIM('sendCustomCmdMsg', {
+      customId: this.state.imRoomId,
+      content: JSON.stringify({
+        'typeId': 2030,
+        'sessionId': this.state.sessionId,
+        'sharedScreen': 1,
+        'tellerId': this.state.tellerId
+      })
+    });
+    if (this.isFileSuccuse()) {
+      const width = 640;
+      const height = 480;
+      const canvas = document.createElement('canvas');
+      const cobj = canvas.getContext('2d'); // 获取绘图环境
+      canvas.width = width;
+      canvas.height = height;
+      let interval = setInterval(() => {
+        cobj.clearRect(0, 0, width, height);
+        let videoId = 'publish_video1';
+        let videoDiv = document.getElementById(videoId);
+        let videoWidth = videoDiv.videoWidth;
+        let videoHeight = videoDiv.videoHeight;
+        let newVideoWidth = 320;
+        let newVideoHeight = 480;
+        if (videoHeight * 320 / videoWidth > 480) {
+          newVideoWidth = videoWidth * 480 / videoHeight;
+        } else {
+          newVideoHeight = videoHeight * 320 / videoWidth;
+        }
+        cobj.drawImage(videoDiv, 0, 480 - newVideoHeight, newVideoWidth, newVideoHeight);
+
+        let subscribeVideo = 'video1';
+        let subscribeVideoDiv = document.getElementById(subscribeVideo);
+        let subscribeVideoDivWidth = subscribeVideoDiv.videoWidth;
+        let subscribeVideoDivHeight = subscribeVideoDiv.videoHeight;
+        let newVideoWidth1 = 320;
+        let newVideoHeight1 = 480;
+        if (subscribeVideoDivHeight * 320 / subscribeVideoDivWidth > 480) {
+          newVideoWidth1 = subscribeVideoDivWidth * 480 / subscribeVideoDivHeight;
+        } else {
+          newVideoHeight1 = subscribeVideoDivHeight * 320 / subscribeVideoDivWidth;
+        }
+        cobj.drawImage(subscribeVideoDiv, 320, 480 - newVideoHeight1, newVideoWidth1, 80);
+
+      }, 100);
+      const captureStream = canvas.captureStream();
+      const mix_stream = new MediaStream(captureStream);
+      let video = document.getElementById('mixedvideo');
+      video.srcObject = mix_stream;
+      video.onloadedmetadata = () => {
+        video.requestPictureInPicture();
+      };
+
+      video.addEventListener('enterpictureinpicture', (event) => {
+        //可获取画中画窗口的一些数据，如宽高等
+        video.style.display = 'block';
+        video.play();
+      });
+
+      video.addEventListener('leavepictureinpicture', (event) => {
+        video.srcObject = null;
+        video.style.display = "none";
+        clearInterval(interval);
+      });
+    }
+  };
+
+  componentWillMount() {
+
+    window.IMEvt = msg => {
+      console.log(JSON.parse(msg));
+      const Mival = JSON.parse(msg);
+      if (Mival.typeId == 1210) {
+        // 进行初始化操作
+        if (Mival.sessionId == this.state.sessionId) {
+          if (Mival.type == 1) {
+            // 开启录制
+            this.enableServerRecording()
+          } else if (Mival.type == 2) {
+            // 关闭录制
+            this.test_controller.StopRemoteRecord(this.state.recordId)
+          }
+        }
+      } else if (Mival.typeId == 1010) {
+        if (Mival.sessionId == this.state.sessionId) {
+          this.endSession('customerHangUp')
+        }
+      } else if (Mival.typeId == 1214) {
+        console.log(Mival);
+        if (Mival.sessionId == this.state.sessionId) {
+          this.setState({
+            transcribingData: Mival
+          });
+          this.setState({
+            isTranscribing: true
+          })
+        }
+
+      }
+    };
+
+    let data = {
+      account: this.state.tellerId,
+      type: '2',
+      sigType: 1
+    };
+    this.mpaasSig(data);
+    this.test_controller.GetDevices();
+    // 获取设备成功
+    this.test_controller.OnGetDevicesSuccess = (devicesInfo) => {
+      console.log('devicesInfo' + JSON.stringify(devicesInfo));
+      const obj = [];
+      const obj1 = [];
+      const obj2 = [];
+      let num = 0;
+      for (let i = 0; i < devicesInfo.length; i++) {
+        const b = {};
+        if (devicesInfo[i].kind === 'videoinput') {
+          console.log('deviceId' + devicesInfo[i].deviceId);
+
+          b.actionid = devicesInfo[i].deviceId;
+          if (
+              devicesInfo[i].label === '' ||
+              devicesInfo[i].label === undefined ||
+              devicesInfo[i].label === null
+          ) {
+            b.actionname = '摄像头' + ++num
+          } else {
+            b.actionname = devicesInfo[i].label
+          }
+          obj.push(b)
+        } else if (devicesInfo[i].kind === 'audioinput') {
+          // 麦克风
+          b.actionid = devicesInfo[i].deviceId;
+          if (
+              devicesInfo[i].label === '' ||
+              devicesInfo[i].label === undefined ||
+              devicesInfo[i].label === null
+          ) {
+            b.actionname = '麦克风' + ++num
+          } else {
+            b.actionname = devicesInfo[i].label
+          }
+          obj1.push(b)
+        } else if (devicesInfo[i].kind === 'audiooutput') {
+          // 喇叭
+          b.actionid = devicesInfo[i].deviceId;
+          if (
+              devicesInfo[i].label === '' ||
+              devicesInfo[i].label === undefined ||
+              devicesInfo[i].label === null
+          ) {
+            b.actionname = '喇叭' + ++num
+          } else {
+            b.actionname = devicesInfo[i].label
+          }
+          obj2.push(b)
+        }
+      }
+      console.log(obj, obj1)
+    };
+    // 获取设备失败
+    this.test_controller.OnGetDevicesFailed = (code, msg) => {
+      console.log('获取设备失败', code, msg)
+    };
+    // 建立连接成功
+    this.test_controller.OnConnectOK = () => {
+      console.log('建立连接成功');
+      this.ConnectMRTC()
+    };
+    this.test_controller.OnConnectFailed = (code, msg) => {
+      console.log('建立连接失败', code, msg)
+    };
+    // 断开连接回调
+    this.test_controller.OnConnectClose = (code, msg) => {
+      console.log('连接已断开', code, msg)
+    };
+    // 获取签名
+    this.test_controller.OnGetSign = (bizName, subBiz, uid) => {
+      console.log(window.sessionStorage.getItem('alimpassSig'));
+      return window.sessionStorage.getItem('alimpassSig')
+    };
+    // 初始化房间失败
+    this.test_controller.OnInitRoomConfigFail = (err_code, err_msg) => {
+      console.log('初始化房间失败', err_code, err_msg)
+    };
+    // 初始化成功回调
+    this.test_controller.OnInitRoomConfigOK = () => {
+      console.log('初始化房间成功');
+      // 视频通话的初始化
+      this.test_controller.CreateRoom()
+    };
+    // 创建房间成功
+
+    this.test_controller.OnCreateRoomSucc = (room_id, rtoken) => {
+      console.log('创建房间成功', room_id, rtoken);
+      this.setState({channelId: room_id});
+      this.setState({rtoken: rtoken});
+      this.createRoom()
+    };
+    // 创建房间失败
+    this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
+      console.log('创建房间失败', err_code, err_msg)
+    };
+    // 初始化⾳视频成功
+    this.test_controller.OnMediaCallSucc = (sid) => {
+      console.log('初始化⾳视频成功', sid)
+    };
+    // 初始化音视频失败
+    this.test_controller.OnMediaCallFail = (err_code, err_msg) => {
+      console.log('初始化音视频失败', err_code, err_msg)
+    };
+    // 音视频关闭通知
+    this.test_controller.OnMediaClose = (code, sid) => {
+      console.log(code, sid)
+    };
+    // 加入房间成功
+    this.test_controller.OnJoinRoomSucc = () => {
+      console.log('加入房间成功')
+    };
+    // 加入房间失败
+    this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
+      console.log('加入房间失败', err_code, err_msg)
+    };
+    // 发布媒体流成功
+    this.test_controller.OnPublishSucc = (sid) => {
+      console.log('发布媒体流成功', sid)
+    };
+    // 发布媒体流失败
+    this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
+      console.log('发布媒体流失败', sid, err_code, err_msg)
+    };
+    // 订阅媒体流成功
+    this.test_controller.OnSubscribeSucc = (feed, sid) => {
+      console.log('订阅媒体流成功', feed, sid);
+      console.log(document.getElementById("feedId1").innerText)
+    };
+    // 订阅媒体流失败
+    this.test_controller.OnSubscribeFailed = (
+        sid,
+        err_code,
+        err_msg
+    ) => {
+      console.log('订阅媒体流失败', sid, err_code, err_msg)
+    };
+    // 推送“房间与会者列表”给新加⼊者
+    this.test_controller.OnRoomAttendanceList = (participants) => {
+      console.log('房间与会者列表', participants)
+    };
+    //  推送“新加⼊房间者”给与会者
+    this.test_controller.OnNewJoinerIn = (participant) => {
+      console.log('新加⼊房间者', participant);
+      this.setState(
+          {
+            isCustomer: true
+          }
+      )
+    };
+    // 推送“有新发布”给与会者
+    this.test_controller.OnNewPublish = (feed) => {
+      console.log('有新发布者', feed);
+      let array = this.state.roomCustomerList;
+      let newArray = [...array];
+      newArray.push({
+        feedId: feed.feedId,
+        uid: feed.uid
+      });
+      console.log(array, newArray, this.state.roomCustomerList);
+      this.setState({
+        roomCustomerList: newArray
+      })
+    };
+    // 推送“有新订阅”给与会者
+    this.test_controller.OnNewSubscribe = (subscriber, feed) => {
+      console.log('有新订阅', subscriber, feed)
+    };
+    // 取消发布成功
+    this.test_controller.OnUnPublishSucc = (sid) => {
+      console.log('取消发布成功', sid)
+    };
+    // 取消订阅媒体流成功
+    this.test_controller.OnUnSubscribeSucc = (sid) => {
+      console.log('取消订阅媒体流成功', sid)
+    };
+    // 推送“取消发布”给与会者
+    this.test_controller.OnUnPublish = (feed) => {
+      console.log('取消发布者', feed)
+    };
+    // 推送“取消订阅”给与会者 OnUnSubscribe(unsubscriber,feed)
+    this.test_controller.OnUnSubscribe = (unsubscriber, feed) => {
+      console.log('取消订阅者', unsubscriber, feed)
+    };
+    // ⾳视频关闭通知
+    this.test_controller.OnMediaClose = (code, sid) => {
+      console.log('⾳视频关闭通知', code, sid)
+    };
+    // 退出房间回调
+    this.test_controller.OnLeaveRoom = (leaveType) => {
+      console.log('退出房间回调', leaveType);
+      this.setState({
+        isCustomer: false
+      });
+      this.props.onLeaveRoom()
+    };
+    // 推送“退出房间者”给与会者
+    this.test_controller.OnParticipantLeaveRoom = (
+        participant,
+        exitType
+    ) => {
+      console.log('退出房间者', participant, exitType)
+    };
+    // 弱网回调
+    this.test_controller.OnNetworkWeak = (bpsSend, bpsRecv, sid) => {
+      console.log('弱网回调', bpsSend, bpsRecv, sid)
+    };
+    // 开始服务端录制成功
+    this.test_controller.OnStartRemoteRecordSucc = (record_id) => {
+      console.log('开始服务端录制成功', record_id);
+      this.setState({
+        recordId: record_id
+      });
+    };
+    // 开始服务端录制失败
+    this.test_controller.OnStartRemoteRecordFailed = (
+        record_id,
+        err_code,
+        err_msg
+    ) => {
+      console.log('开始服务端录制失败', record_id, err_code, err_msg)
+    };
+    // 结束服务端录制成功
+    this.test_controller.OnStopRemoteRecordSucc = (recordId) => {
+      console.log('结束服务端录制成功', recordId);
+      this.endSessionValue()
+      // 获取服务端录制结果
+    };
+    // 结束服务端录制失败
+    this.test_controller.OnStopRemoteRecordFailed = (
+        recordId,
+        err_code,
+        err_msg
+    ) => {
+      console.log('结束服务端录制失败', recordId, err_code, err_msg)
+    };
+    // 开启浏览器录制成功
+    this.test_controller.OnClientStartRecordSuccess = (
+        clientRecordId
+    ) => {
+      console.log('开启浏览器录制成功', clientRecordId)
+    };
+    // 开启浏览器失败
+    this.test_controller.OnClientStartRecordFailed = (
+        clientRecordId,
+        code,
+        msg
+    ) => {
+      console.log('开启浏览器失败', clientRecordId, code, msg)
+    };
+    // 获取服务端录制结果成功
+    this.test_controller.OnRemoteRecordInfoSucc = (recordInfo) => {
+      console.log('获取服务端录制结果成功', recordInfo)
+    };
+    // 获取服务端录制结果失败
+    this.test_controller.OnRemoteRecordInfoFailed = (
+        record_id,
+        err_code,
+        err_msg
+    ) => {
+      console.log('获取服务端录制结果失败', record_id, err_code, err_msg)
+    };
+    // 暂停服务端录制成功
+    this.test_controller.OnPauseRemoteRecordSucc = (record_id) => {
+      console.log('暂停服务端录制成功', record_id)
+    };
+    // 暂停服务端录制失败
+    this.test_controller.OnPauseRemoteRecordFailed = (
+        record_id,
+        err_code,
+        err_msg
+    ) => {
+      console.log('暂停服务端录制失败', record_id, err_code, err_msg)
+    };
+    // 恢复服务端录制成功
+    this.test_controller.OnResumeRemoteRecordSucc = (record_id) => {
+      console.log('恢复服务端录制成功', record_id)
+    };
+    // 恢复服务端录制失败
+    this.test_controller.OnResumeRemoteRecordFailed = (
+        record_id,
+        err_code,
+        err_msg
+    ) => {
+      console.log('恢复服务端录制失败', record_id, err_code, err_msg)
+    };
+    // 服务端录制结束通知
+    this.test_controller.OnRemoteRecordOver = (record_id) => {
+      console.log('服务端录制结束通知', record_id)
+    };
+    // 服务端录制失败通知
+    this.test_controller.OnRemoteRecordingFailed = (
+        recordId,
+        feedId,
+        code,
+        msg
+    ) => {
+      console.log('服务端录制失败通知', recordId, feedId, code, msg)
+    };
+    // 停止浏览器录制成功回调
+    this.test_controller.OnClientStopRecordSuccess = (
+        url,
+        blob,
+        clientRecordId
+    ) => {
+      console.log('停止浏览器录制成功', url, blob, clientRecordId)
+    };
+    // 停止浏览器录制失败
+    this.test_controller.OnClientStopRecordFailed = (
+        clientRecordId,
+        code,
+        msg
+    ) => {
+      console.log('停止浏览器录制失败', clientRecordId, code, msg)
+    };
+    // 暂停浏览器录制成功
+    this.test_controller.OnClientPauseRecordSuccess = (
+        clientRecordId
+    ) => {
+      console.log('暂停浏览器录制成功', clientRecordId)
+    };
+    // 暂停浏览器录制失败
+    this.test_controller.OnClientPauseRecordFailed = (
+        clientRecordId,
+        code,
+        msg
+    ) => {
+      console.log('暂停浏览器录制失败', clientRecordId, code, msg)
+    };
+    // 继续浏览器录制成功
+    this.test_controller.OnClientResumeRecordSuccess = (
+        clientRecordId
+    ) => {
+      console.log('继续浏览器录制成功', clientRecordId)
+    };
+    // 继续浏览器录制失败
+    this.test_controller.OnClientResumeRecordFailed = (
+        clientRecordId,
+        code,
+        msg
+    ) => {
+      console.log('继续浏览器录制失败', clientRecordId, code, msg)
+    };
+    // 下载成功
+    this.test_controller.OnClientDownloadRecordSuccess = (
+        clientRecordId
+    ) => {
+      console.log('下载成功', clientRecordId)
+    };
+    // 下载失败
+    this.test_controller.OnClientDownloadRecordFailed = (
+        clientRecordId,
+        code,
+        msg
+    ) => {
+      console.log('下载失败', clientRecordId, code, msg)
+    };
+    // 切流成功通知
+    this.test_controller.OnChangeMediaStreamSuccess = (sid) => {
+      console.log('切流成功通知', sid);
+      if (this.state.publishDevic == 2) {
+        // 打开共享
+        callNimIM('sendCustomCmdMsg', {
+          customId: this.state.imRoomId,
+          content: JSON.stringify({
+            'typeId': 2030,
+            'sessionId': this.state.sessionId,
+            'sharedScreen': 1,
+            'tellerId': this.state.tellerId
+          })
+        });
+        this.setState({
+          isSharedScreen: true
+        });
+        this.setState({
+          screenName: '取消共享'
+        })
+      } else {
+        this.setState({
+          isSharedScreen: false
+        });
+        this.setState({
+          screenName: '投屏'
+        });
+        callNimIM('sendCustomCmdMsg', {
+          customId: this.state.imRoomId,
+          content: JSON.stringify({
+            'typeId': 2030,
+            'sessionId': this.state.sessionId,
+            'sharedScreen': 0,
+            'tellerId': this.state.tellerId
+          })
+        })
+      }
+    };
+    // 切流失败通知
+    this.test_controller.OnChangeMediaStreamFailed = (
+        sid,
+        code,
+        msg
+    ) => {
+      console.log('切流失败通知', sid, code, msg)
+    };
+    // 服务端录制初始化成功
+    this.test_controller.OnInitRemoteRecordSucc = (
+        record_id,
+        record_third_id
+    ) => {
+      console.log('服务端录制初始化成功', record_id, record_third_id)
+    }
+  }
+
+  voice = () => {
+    if (!this.state.voiceStatue) {
+      // 静音本地
+      this.setState({
+        voiceStatue: true
+      });
+      this.setState({
+        voiceImg: voiceImgCloe
+      });
+      let sid = document.getElementById('publish_video1').name;
+      if (!sid) {
+        // 纯音频的时候sid在publish_streamId标签中
+        sid = document.getElementById('publish_streamId1').name
+      }
+      this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10));
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1013,
+          'state': 0,
+          'sessionId': this.state.sessionId,
+        })
+      }, function (code, message, data) {
+        console.log(data)
+      })
+    } else if (this.state.voiceStatue) {
+      // 打开本地
+      this.setState({
+        voiceStatue: false
+      });
+      this.setState({
+        voiceImg: voiceImgOpen
+      });
+      let sid = document.getElementById('publish_video1').name;
+      if (!sid) {
+        // 纯音频的时候sid在publish_streamId标签中
+        sid = document.getElementById('publish_streamId1').name
+      }
+      this.test_controller.SetLocalAudioEnable(1, parseInt(sid, 10));
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1013,
+          'state': 1,
+          'sessionId': this.state.sessionId,
+        })
+      }, function (code, message, data) {
+        console.log(data)
+      })
+    }
+  };
+  isFileSuccuse = () => {
+    if (!this.state.sessionId) {
+      return false
+    } else if (this.state.isSuspend) {
+      return false
+    } else if (!this.state.isCustomer) {
+      return false
+    } else {
+      return true
+    }
+  };
+  cameraClick = () => {
+    if (this.isFileSuccuse()) {
+      if (!this.state.audioed) {
+        this.setState({
+          audioed: true
+        });
+        this.setState({
+          cameraImg: cameraImgCloe
+        });
+        let sid = document.getElementById('publish_video1').name;
+        if (!sid) {
+          // 纯音频的时候sid在publish_streamId标签中
+          sid = document.getElementById('publish_streamId1').name
+        }
+        this.test_controller.SetLocalVideoEnable(0, parseInt(sid, 10));
+        callNimIM('sendCustomCmdMsg', {
+          customId: this.state.imRoomId,
+          content: JSON.stringify({
+            'typeId': 1012,
+            'state': 0,
+            'sessionId': this.state.sessionId,
+            'userId': this.state.tellerId
+          })
+        }, function (code, message, data) {
+          console.log(data)
+        })
+      } else if (this.state.audioed) {
+        this.setState({
+          audioed: false
+        });
+        this.setState({
+          cameraImg: cameraImgOpen
+        });
+        let sid = document.getElementById('publish_video1').name;
+        if (!sid) {
+          // 纯音频的时候sid在publish_streamId标签中
+          sid = document.getElementById('publish_streamId1').name
+        }
+        this.test_controller.SetLocalVideoEnable(1, parseInt(sid, 10));
+        callNimIM('sendCustomCmdMsg', {
+          customId: this.state.imRoomId,
+          content: JSON.stringify({
+            'typeId': 1012,
+            'state': 1,
+            'sessionId': this.state.sessionId,
+            'userId': this.state.tellerId
+          })
+        }, function (code, message, data) {
+          console.log(data)
+        })
+      }
+    }
+  };
+  sharedScreen = () => {
+    if (this.isFileSuccuse()) {
+      const publish_config = {};
+      if (this.state.isSharedScreen) {
+        publish_config.publish_device = 1;
+        publish_config.media_type = 1;
+        publish_config.sid = document.getElementById('publish_video1').name;
+        publish_config.video_profile_type = 5;
+        this.test_controller.ChangeMediaStream(publish_config);
+        this.setState({
+          publishDevic: 1
+        });
+        this.setState({
+          screenName: '投屏'
+        });
+        this.setState({
+          isSharedScreen: false
+        })
+      } else {
+        publish_config.media_type = 1;
+        publish_config.publish_device = 2;
+        publish_config.video_profile_type = 5;
+        publish_config.sid = document.getElementById('publish_video1').name;
+        this.test_controller.ChangeMediaStream(publish_config);
+        this.setState({
+          publishDevic: 2
+        })
+      }
+    }
+  };
+  suspend = () => {
+    if (this.state.isSuspend) {
+      // 代表此时按钮是恢复会话，把isSuspend改成true变成暂停会话
+      this.setState({
+        isSuspend: false
+      });
+      this.setState({
+        suspendName: '暂停'
+      });
+      let sid = document.getElementById('publish_video1').name;
+      if (!sid) {
+        // 纯音频的时候sid在publish_streamId标签中
+        sid = document.getElementById('publish_streamId1').name
+      }
+
+      this.test_controller.SetLocalVideoEnable(1, parseInt(sid, 10));
+      if (this.state.voiceStatue) {
+        // 当前是音频
+        this.setState({
+          voiceImg: voiceImgCloe
+        });
+        let sid = document.getElementById('publish_video1').name;
+        if (!sid) {
+          // 纯音频的时候sid在publish_streamId标签中
+          sid = document.getElementById('publish_streamId1').name
+        }
+        this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10))
+      } else {
+        // 当前是
+        this.test_controller.SetLocalAudioEnable(1, parseInt(sid, 10));
+        this.setState({
+          voiceImg: voiceImgOpen
+        })
+      }
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1011,
+          'state': 1,
+          'sessionId': this.state.sessionId,
+          'userId': this.state.tellerId
+        })
+      }, function (code, message, data) {
+        console.log(data)
+      })
+    } else {
+      this.setState({
+        isModalVisible: true
+      })
+    }
+
+  };
+  handleOk = () => {
+    // 代表此时按钮是暂停会话，把isSuspend改成true变成恢复会话
+    callNimIM('sendCustomCmdMsg', {
+      customId: this.state.imRoomId,
+      content: JSON.stringify({
+        'typeId': 1012,
+        'state': 1,
+        'sessionId': this.state.sessionId,
+        'userId': this.state.tellerId
+      })
+    }, function (code, message, data) {
+      console.log(data)
+    });
+    this.setState({
+      isSuspend: true
+    });
+    this.setState({
+      suspendName: '恢复'
+    });
+    callNimIM('sendCustomCmdMsg', {
+      customId: this.state.imRoomId,
+      content: JSON.stringify({
+        'typeId': 1011,
+        'state': 0,
+        'sessionId': this.state.sessionId,
+        'userId': this.state.tellerId
+      })
+    }, function (code, message, data) {
+      console.log(data)
+    });
+    let sid = document.getElementById('publish_video1').name;
+    if (!sid) {
+      // 纯音频的时候sid在publish_streamId标签中
+      sid = document.getElementById('publish_streamId1').name
+    }
+    this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10));
+    this.test_controller.SetLocalVideoEnable(0, parseInt(sid, 10));
+    this.setState({
+      isModalVisible: false
+    })
+  };
+
+  handleCancel = () => {
+
+    this.setState({
+      isModalVisible: false
+    })
+  };
+  handleOkEnd = () => {
+    this.endSessionValue();
+    this.setState({
+      isModalVisibleEnd: false
+    })
+  };
+  handleCancelEnd = () => {
+
+    this.setState({
+      isModalVisibleEnd: false
+    })
+  };
+  handleOkFacial = () => {
+    const frontIdcard = new File([this.dataURLtoFile(this.state.facialImg, 'image/jpeg')], new Date() + '.png'); // 重命名了
+    const formData = new FormData();
+    formData.append('file', frontIdcard);
+    formData.append('sessionId', this.state.sessionId);
+    this.uploadImg(formData)
+  };
+  handleCancelFacial = () => {
+    this.setState({
+      isModalVisibleFacial: false
+    })
+  };
+  transcribingClick = () => {
+    callNimIM('sendCustomCmdMsg', {
+      customId: this.state.imRoomId,
+      content: JSON.stringify(this.state.transcribingData)
+    })
+  };
+
+  render() {
+    return (
+        <div className="all">
+          <Header></Header>
+          <div className="health">
+            <div className="wrapper">
+              <div
+                  className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
+                  // className="itemed item1"
+                  style={{position: "relative"}}
+                  onClick={this.enlargeClick.bind(this, 'isLangVideo1')}
+              >
+                {
+                  this.state.customAudioed && <img
+                      alt=""
+                      src={require("../../assets/img/yingpin.png")}
+                      style={{width: "100%", height: "100%"}}
+                  ></img>
+                }
+                <div className="video1Div" style={{display: (!this.state.customAudioed) ? '' : 'none',}}>
+                  <video
+                      id="video1"
+                      autoPlay
+                      muted={true}
+                      className="video1"
+                  />
+                  <audio id="audio1" autoPlay/>
+                  <label style={{display: 'none'}} id="feedId1" type="text"/>
+                </div>
+              </div>
+              <div
+                  className={`itemed ${this.state.isSharedScreen || this.state.publishDevic == 4 ? '' : (this.state.isBigVideo == 'publish_video1' ? 'item1 isBack' : (this.state.isCustomer ? 'isBack' : 'itemPublic'))}`}
+                  onClick={this.enlargeClick.bind(this, 'isLangPublishVideo1')}
+              >
+
+                <div className="publishVideoDiv">
+                  {
+                    this.state.audioed && <img
+                        alt=""
+                        src={require("../../assets/img/yingpin.png")}
+                        className="imgClass"
+                    />
+                  }
+                  {
+                    this.state.isSuspend && <img
+                        alt=""
+                        src={require("../../assets/img/zanTing.png")}
+                        className="imgClass"
+                    />
+                  }
+                  {
+                    this.state.isSharedScreen && <span
+                        className="sharedScreen"
+                    >
+                    屏幕共享中
+                  </span>
+                  }
+                  <video
+                      style={{display: (!this.state.audioed && !this.state.isSuspend) ? '' : 'none',}}
+                      id="publish_video1"
+                      className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
+                      onClick={this.enlargeClick.bind(this, 'isLangVideo2')}
+                      autoPlay
+                      muted={true}
+                  />
+                  <audio id="audio1" autoPlay/>
+                  <label style={{display: 'none'}} id="publish_streamId1" type="text"/>
+                </div>
+
+              </div>
+              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`}>
+                {
+                  !this.state.isPDF ? <div onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
+                        <video
+                            id="video2"
+                            autoPlay
+                            muted={true}
+                            className="video"
+                        />
+                        <audio id="audio2" autoPlay/>
+                        <label style={{display: 'none'}} id="feedId2" type="text"/>
+                      </div>
+                      :
+                      <div className="video" id="touBoxItem">
+                        <Pdf></Pdf>
+                      </div>
+                }
+
+
+              </div>
+              <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
+                   onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
+                <video
+                    id="video3"
+                    autoPlay
+                    muted={true}
+                    className="video"
+                />
+                <audio id="audio3" autoPlay/>
+                <label style={{display: 'none'}} id="feedId3" type="text"/>
+              </div>
+              <div className={`itemed ${this.state.isBigVideo == 'video4' ? 'item1' : ""}`}
+                   onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
+                <video
+                    id="video4"
+                    autoPlay
+                    muted={true}
+                    className="video"
+                />
+                <audio id="audio4" autoPlay/>
+                <label style={{display: 'none'}} id="feedId4" type="text"/>
+              </div>
+              <div className={`itemed ${this.state.isBigVideo == 'video5' ? 'item1' : ""}`}
+                   onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
+                <video
+                    id="video5"
+                    autoPlay
+                    muted={true}
+                    className="video"
+                />
+                <audio id="audio5" autoPlay/>
+                <label style={{display: 'none'}} id="feedId5" type="text"/>
+              </div>
+              <div className={`itemed ${this.state.isBigVideo == 'video6' ? 'item1' : ""}`}
+                   onClick={this.enlargeClick.bind(this, 'isLangVideo6')}>
+                <video
+                    id="video6"
+                    autoPlay
+                    muted={true}
+                    className="video"
+                />
+                <audio id="audio2" autoPlay/>
+                <label style={{display: 'none'}} id="feedId6" type="text"/>
+              </div>
+            </div>
+
+          </div>
+          <Foot
+              img={this.state.voiceImg}
+              screenName={this.state.screenName}
+              suspendName={this.state.suspendName}
+              cameraImg={this.state.cameraImg}
+              isTranscribing={this.state.isTranscribing}
+              suspend={this.suspend}
+              voice={this.voice}
+              cameraClick={this.cameraClick}
+              sharedScreen={this.sharedScreen}
+              endSession={this.endSession}
+              facialRecognition={this.facialRecognition}
+              pictureInPicture={this.pictureInPicture}
+              transcribingClick={this.transcribingClick}
+          ></Foot>
+          <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
+                 onCancel={this.handleCancel}>
+            {
+              this.state.isSuspend && <span>确定是否恢复会话？</span>
+            }
+            {
+              !this.state.isSuspend && <span>确定是否暂停会话？</span>
+            }
+          </Modal>
+          <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisibleEnd} onOk={this.handleOkEnd}
+                 onCancel={this.handleCancelEnd}>
+            <span>确定是否结束会话？</span>
+          </Modal>
+          <Modal title="人脸识别" cancelText="取消" okText="确定" visible={this.state.isModalVisibleFacial}
+                 onOk={this.handleOkFacial} onCancel={this.handleCancelFacial}>
+            <img src={this.state.facialImg} alt=""></img>
+          </Modal>
+          <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"
+                 webkit-playsinline="true" playsInline={true} x5-playsinline="x5-playsinline"
+                 x-webkit-airplay="true"></video>
+
+        </div>
+    );
+  }
+}
+
+export default Video;