react_hsbc_teller 1.1.8 → 1.2.1

package/packages/pages/video/video.jsx

@@ -19,10 +19,14 @@ import message from "antd/lib/message";
 import 'antd/lib/message/style'
 import Spin from "antd/lib/spin";
 import 'antd/lib/spin/style'
+import Select  from "antd/lib/select";
+import 'antd/lib/select/style'
+
 import { Button } from '../../../node_modules/antd/lib/index';
 import CanvasDraw from "react-canvas-draw";
 import { FormattedMessage, injectIntl } from 'react-intl';
 import axios from 'axios';
+const { Option } = Select;
 const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
   ROOM_DESTROYED: -1, // 房间异常
@@ -141,6 +145,8 @@ class Video extends Component {
     noVideoEleven: false,
     noVideoTwelve: false,
     manualClose: false,
+    defaultValue: '1',
+    customOcrSid: ''
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -164,6 +170,8 @@ class Video extends Component {
       let publish_config = {}
       publish_config.media_type = 1
       publish_config.publish_device = 1
+      publish_config.videoSource = this.state.cameraValue
+      publish_config.audioSource = this.state.microphoneValue
       publish_config.need_volume_analyser = true
       // publish_config.video_profile_type = 3
       publish_config.video_profile_type=100
@@ -173,11 +181,13 @@ class Video extends Component {
       publish_config.publish_tag = 'tag1'
       this.test_controller.Publish(publish_config)
       // eslint-disable-next-line no-undef
-      if(this.state.imStatus) {
+      setTimeout(() => {
+      if(this.state.imStatus && !this.state.imJoinRoom) {
         joinRoom((this.props.tellerAccount + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
           this.state.imJoinRoom =true
         console.log('加入IM房间')
       }
+    })
       this.props.createRoomCallback({
         type: 1,
         errorManage: '',
@@ -244,8 +254,10 @@ class Video extends Component {
     // eslint-disable-next-line no-undef
     // initWebSocket('wss://im.uat.dsp.hsbcfts.com.cn:443/wealth/im/ws/')
     // initWebSocket('wss://' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname + ':' + '15603' + '/ws/');
+    if(!this.state.imStatus){
+      initWebSocket('wss://' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname + ':' + JSON.parse(window.sessionStorage.getItem('sigData')).webPort + '/ws/');
 
-    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.props.tellerAccount;
@@ -263,7 +275,6 @@ class Video extends Component {
     const config_param = {};
     config_param.auto_publish_subscribe = 4;
     config_param.media_type = 1;
-    config_param.publish_device = 1;
     config_param.video_profile_type = '3';
     config_param.need_volume_analyser = true;
     config_param.initPublish = [
@@ -356,6 +367,106 @@ class Video extends Component {
         url: '' // ⽔印图⽚ HTTP 地址
       }
     ];
+  recordParam.tagPositions = [
+    {
+      tag: 'projectionWhiteboard',
+      xPosition: '0',
+      yPosition: '360',
+      width: '640',
+      height: '360'
+    },
+    {
+      tag: 'VIDEO_SOURCE_SCREEN',
+      xPosition: '0',
+      yPosition: '144',
+      width: '256',
+      height: '144'
+    },
+    {
+      tag: 'tag1',
+      xPosition: '0',
+      yPosition: '0',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer1',
+      xPosition: '160',
+      yPosition: '0',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer2',
+      xPosition: '320',
+      yPosition: '0',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer3',
+      xPosition: '480',
+      yPosition: '0',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer4',
+      xPosition: '640',
+      yPosition: '0',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer5',
+      xPosition: '800',
+      yPosition: '0',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer6',
+      xPosition: '960',
+      yPosition: '0',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer7',
+      xPosition: '1120',
+      yPosition: '0',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer8',
+      xPosition: '1120',
+      yPosition: '144',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer9',
+      xPosition: '1120',
+      yPosition: '288',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer10',
+      xPosition: '1120',
+      yPosition: '432',
+      width: '160',
+      height: '144'
+    },
+    {
+      tag: 'customer11',
+      xPosition: '1120',
+      yPosition: '576',
+      width: '160',
+      height: '144'
+    }
+  ]
     console.log('recordParam', recordParam);
     this.test_controller.StartRemoteRecord(filePath, recordParam, '')
 
@@ -404,11 +515,6 @@ class Video extends Component {
       console.log(result);
       if (this.state.faceCustomerType == 1) {
         this.contrastFaceVerify(result.data)
-      } else if (this.state.faceCustomerType == 2) {
-        // ocr
-        this.setState({
-          isModalVisibleFacial: false
-        })
       }
 
     } catch (err) {
@@ -1071,7 +1177,10 @@ class Video extends Component {
               noVideoTwelve: true
             })
           }
-          this.pictureInPicture('Refresh')
+          if(this.state.isPictureInPicture) {
+            this.pictureInPicture('Refresh')
+          }
+          
         }
       }
       else if (Mival.typeId == 3003) {
@@ -1147,7 +1256,9 @@ class Video extends Component {
               noVideoTwelve: false
             })
           }
-          this.pictureInPicture('Refresh')
+          if(this.state.isPictureInPicture) {
+            this.pictureInPicture('Refresh')
+          }
         }
       }
       else if (Mival.typeId == 1220) {
@@ -1366,10 +1477,10 @@ class Video extends Component {
     window.IMOpenfire = msg =>{
       console.log('im登录', msg)
       if(msg.status == 'error') {
-        this.state.sessionType = false
+        this.state.imStatus = false
         this.roomCallBack(2, 'im建立连接失败',5)
       } else if (msg.status == 'success') {
-        this.state.imStatus = msg
+        this.state.imStatus = true
         setTimeout(() => {
           if(this.state.imRoomId && !this.state.imJoinRoom) {
             joinRoom((this.props.tellerAccount + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
@@ -1380,7 +1491,7 @@ class Video extends Component {
       } else if (msg.status == 'close') {
         if(!this.state.manualClose) {
           this.timer && clearInterval(this.timer);
-          this.state.sessionType = false
+          this.state.imStatus = false
           console.log('IMOpenfireclose')
           this.roomCallBack(2, '账号重复登录',9)
           
@@ -1482,8 +1593,14 @@ class Video extends Component {
       })
       if (!this.state.appId && !this.state.sessionType) {
         this.mpaasSig(data);
+        let indexId = 0
+        obj.map((item,index)=>{
+          if(item.actionname.indexOf('Integrated Camera' != -1)) {
+            indexId = index
+          }
+        })
         this.setState({
-          cameraValue: obj[0].actionid,
+          cameraValue: obj[indexId].actionid,
           microphoneValue: obj1[0].actionid
         })
       } else {
@@ -1562,7 +1679,11 @@ class Video extends Component {
     this.test_controller.OnMediaClose = (code, sid) => {
       console.log(code, sid)
       if(code == 5003 || code == 5004 || code == 5005|| code == 5007|| code == 5009|| code == 5010 || code == 5011|| code == 5012) {
+        if(sid == document.getElementById('publish_video1').name) {
         this.roomCallBack(2, '音视频异常关闭',8)
+        } else {
+          this.state.isScreenSwitching = false
+        }
       }
     };
     // 加入房间成功
@@ -1572,6 +1693,8 @@ class Video extends Component {
       publish_config.media_type = 1
       publish_config.publish_device = 1
       publish_config.need_volume_analyser = true
+      publish_config.videoSource = this.state.cameraValue
+      publish_config.audioSource = this.state.microphoneValue
       // publish_config.video_profile_type = 3
       publish_config.video_profile_type=100
       publish_config.video_profile_diy={width:640, height:360, frameRate:15, bitrate:400}
@@ -1593,7 +1716,6 @@ class Video extends Component {
         this.state.rtoken = '',
         this.state.sessionId = '',
         this.state.imRoomId = ''
-      
       this.test_controller.Disconnect()
       let data = {
         account: this.props.tellerAccount,
@@ -1616,7 +1738,7 @@ class Video extends Component {
             'tellerId': this.props.tellerAccount
           })
         });
-        if(this.state.screenName == '取消共享') {
+        if(this.state.screenName == '切换共享') {
           this.state.isSharedScreen = true
         this.state.isScreenSwitching = false
         }
@@ -1629,7 +1751,7 @@ class Video extends Component {
         this.enterRoom()
         this.timer = setInterval(
           () => {
-            if(!this.state.voiceStatue) {
+            if(!this.state.voiceStatue && this.state.analyserHeight.get(sid).toFixed(2) > 0) {
               callNimIM('sendCustomCmdMsg', {
                 customId: this.state.imRoomId,
                 content: JSON.stringify({
@@ -1651,8 +1773,13 @@ class Video extends Component {
     // 发布媒体流失败
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
       console.log('发布媒体流失败', sid, err_code, err_msg)
-      this.state.sessionType = false
-      this.roomCallBack(2, '发布失败',4)
+      if(sid == document.getElementById('publish_video1').name) {
+        this.state.sessionType = false
+        this.roomCallBack(2, '发布失败',4)
+      } else {
+        this.messageClick('投屏失败请重新投屏','error')
+      }
+      
     };
     // 订阅媒体流成功
     this.test_controller.OnSubscribeSucc = (feed, sid) => {
@@ -2076,78 +2203,92 @@ class Video extends Component {
       if (!document.getElementById("video1").name) {
         this.setState({
           videoOneName: '',
-          voiceVideoOne: false
+          voiceVideoOne: false,
+          noVideoOne: false
         })
       }
       if (!document.getElementById("video2").name) {
         this.setState({
           videoTwoName: '',
-          voiceVideoTwo: false
+          voiceVideoTwo: false,
+          noVideoTwo: false
         })
       }
       if (!document.getElementById("video3").name) {
         this.setState({
           videoThreeName: '',
-          voiceVideoThree: false
+          voiceVideoThree: false,
+          noVideoThree: false
         })
       }
       if (!document.getElementById("video4").name) {
         this.setState({
           videoFourName: '',
           voiceVideoFour: false,
+          noVideoFour: false
         })
       }
       if (!document.getElementById("video5").name) {
         this.setState({
           videoFiveName: '',
-          voiceVideoFive: false
+          voiceVideoFive: false,
+          noVideoFive: false
         })
       }
       if (!document.getElementById("video6").name) {
         this.setState({
           videoSixName: '',
-          voiceVideoSix: false
+          voiceVideoSix: false,
+          noVideoSix: false
         })
       }
 
       if (!document.getElementById("video7").name) {
         this.setState({
           videoSevenName: '',
-          voiceVideoSeven: false
+          voiceVideoSeven: false,
+          noVideoSeven: false
         })
       }
       if (!document.getElementById("video8").name) {
         this.setState({
           videoEightName: '',
-          voiceVideoEight: false
+          voiceVideoEight: false,
+          noVideoEight: false
         })
       }
       if (!document.getElementById("video9").name) {
         this.setState({
           videoNineName: '',
-          voiceVideoNine: false
+          voiceVideoNine: false,
+          noVideoNine: false
         })
       }
       if (!document.getElementById("video10").name) {
         this.setState({
           videoTenName: '',
-          voiceVideoTen: false
+          voiceVideoTen: false,
+          noVideoTen: false
         })
       }
       if (!document.getElementById("video11").name) {
         this.setState({
           videoElevenName: '',
-          voiceVideoEleven: false
+          voiceVideoEleven: false,
+          noVideoEleven: false
         })
       }
       if (!document.getElementById("video12").name) {
         this.setState({
           videoTwelveName: '',
-          voiceVideoTwelve: false
+          voiceVideoTwelve: false,
+          noVideoTwelve: false
         })
       }
       this.state.analyserData.delete(sid)
-      this.pictureInPicture('Refresh')
+      if(this.state.isPictureInPicture) {
+        this.pictureInPicture('Refresh')
+      }
     };
     // 推送“取消发布”给与会者
     this.test_controller.OnUnPublish = (feed) => {
@@ -2342,7 +2483,7 @@ class Video extends Component {
         })
       }
       if (sid == document.getElementById('video20').name) {
-        if(this.state.screenName == '取消共享') {
+        if(this.state.screenName == '切换共享') {
           this.state.isSharedScreen = true
         this.state.isScreenSwitching = false
         }
@@ -2360,7 +2501,19 @@ class Video extends Component {
           loading: false
       })
       this.messageClick('切换摄像头或麦克风失败，请先检查设备','error')
-    }
+    } else if(this.state.screenName == '切换共享') {
+        this.test_controller.UnPublish(document.getElementById('video20').name)
+        this.state.isSharedScreen = false
+        this.state.isScreenSwitching = false
+        this.setState({
+          screenName: '共享模式'
+        });
+        console.log(pictureInPictureVideo)
+        this.tabTitlesClick('RMScreen', 'delect')
+        if (this.state.isPictureInPicture) {
+          document.exitPictureInPicture()
+        }
+      }
     };
     // 服务端录制初始化成功
     this.test_controller.OnInitRemoteRecordSucc = (
@@ -2371,20 +2524,20 @@ class Video extends Component {
     };
     this.test_controller.OnVolumeAnalyser = (sid, analyser) => {
       clearInterval(this.state.OnVolumeAnalyserMap.get(sid))
-      let publish_sid = document.getElementById('publish_video1').name || document.getElementById('publish_streamId1').name;
-      let subscribe_sid1 = document.getElementById('video1').name || document.getElementById('audio1').name;
-      let subscribe_sid2 = document.getElementById('video2').name || document.getElementById('audio2').name;
-      let subscribe_sid3 = document.getElementById('video3').name || document.getElementById('audio3').name;
-      let subscribe_sid4 = document.getElementById('video4').name || document.getElementById('audio4').name;
-      let subscribe_sid5 = document.getElementById('video5').name || document.getElementById('audio5').name;
-      let subscribe_sid6 = document.getElementById('video6').name || document.getElementById('audio6').name;
-
-      let subscribe_sid7 = document.getElementById('video7').name || document.getElementById('audio7').name;
-      let subscribe_sid8 = document.getElementById('video8').name || document.getElementById('audio8').name;
-      let subscribe_sid9 = document.getElementById('video9').name || document.getElementById('audio9').name;
-      let subscribe_sid10 = document.getElementById('video10').name || document.getElementById('audio10').name;
-      let subscribe_sid11 = document.getElementById('video11').name || document.getElementById('audio11').name;
-      let subscribe_sid12 = document.getElementById('video12').name || document.getElementById('audio12').name;
+      let publish_sid = (document.getElementById('publish_video1') ? document.getElementById('publish_video1').name : '') || (document.getElementById('publish_streamId1') ? document.getElementById('publish_streamId1').name : '');
+      let subscribe_sid1 = (document.getElementById('video1') ? document.getElementById('video1').name : '') || (document.getElementById('audio1') ? document.getElementById('audio1').name : '');
+      let subscribe_sid2 = (document.getElementById('video2') ? document.getElementById('video2').name : '') || (document.getElementById('audio2') ? document.getElementById('audio2').name : '');
+      let subscribe_sid3 =(document.getElementById('video3') ? document.getElementById('video3').name : '') || (document.getElementById('audio3') ? document.getElementById('audio3').name : '');
+      let subscribe_sid4 = (document.getElementById('video4') ? document.getElementById('video4').name : '') || (document.getElementById('audio4') ? document.getElementById('audio4').name : '');
+      let subscribe_sid5 = (document.getElementById('video5') ? document.getElementById('video5').name : '') || (document.getElementById('audio5') ? document.getElementById('audio5').name : '');
+      let subscribe_sid6 = (document.getElementById('video6') ? document.getElementById('video6').name : '') || (document.getElementById('audio6') ? document.getElementById('audio6').name : '');
+
+      let subscribe_sid7 = (document.getElementById('video7') ? document.getElementById('video7').name : '') || (document.getElementById('audio7') ? document.getElementById('audio7').name : '');
+      let subscribe_sid8 = (document.getElementById('video8') ? document.getElementById('video8').name : '') || (document.getElementById('audio8') ? document.getElementById('audio8').name : '');
+      let subscribe_sid9 = (document.getElementById('video9') ? document.getElementById('video9').name : '') || (document.getElementById('audio9') ? document.getElementById('audio9').name : '');
+      let subscribe_sid10 = (document.getElementById('video10') ? document.getElementById('video10').name : '') || (document.getElementById('audio10') ? document.getElementById('audio10').name : '');
+      let subscribe_sid11 = (document.getElementById('video11') ? document.getElementById('video11').name : '') || (document.getElementById('audio11') ? document.getElementById('audio11').name : '');
+      let subscribe_sid12 = (document.getElementById('video12') ? document.getElementById('video12').name : '') || (document.getElementById('audio12') ? document.getElementById('audio12').name : '');
 
       let volumeView;
       switch (sid) {
@@ -2461,7 +2614,7 @@ class Video extends Component {
         let startY = y1 - height  // 绘制起始点y
         ctx.fillRect(startX, startY, width, height)
         if(document.getElementById('publish_video1').name == sid) {
-          this.state.analyserHeight.set(sid,energy/80)
+          this.state.analyserHeight.set(sid,energy/25)
             this.state.analyserHeight = this.state.analyserHeight
         }
 
@@ -2482,13 +2635,36 @@ class Video extends Component {
       if(this.state.isScreenSwitching) {
         this.state.isScreenSwitching = false
       } else {
-        if (!this.state.laveRoomSharedScreen && this.state.isSharedScreen) {
-          this.sharedScreen()
+                // if (this.state.isWhiteboard) {
+        //   publish_config.publish_device = 4
+        //   publish_config.media_type = 1
+        //   publish_config.sid = document.getElementById('video20').name
+        //   publish_config.part_of_screen_id = 'touBoxItem'
+        //   publish_config.video_profile_type = 5
+        //   this.test_controller.ChangeMediaStream(publish_config);
+        //   this.setState({
+        //     isPDF: true,
+        //   })
+      // } else {
+          document.getElementById('video20') && document.getElementById('video20').name ? this.test_controller.UnPublish(document.getElementById('video20').name) : ''
+      // }
+        this.state.isSharedScreen = false
+        this.state.isScreenSwitching = false
+        this.setState({
+          screenName: '共享模式'
+        });
+        console.log(pictureInPictureVideo)
+        this.tabTitlesClick('RMScreen', 'delect')
+        if (this.state.isPictureInPicture) {
+          document.exitPictureInPicture()
         }
+        // if (!this.state.laveRoomSharedScreen && this.state.isSharedScreen) {
+        //   this.sharedScreen()
+    // }
       }
         
       
-    }
+    };
   }
   enterRoom = async () =>{
     try {
@@ -2559,6 +2735,10 @@ class Video extends Component {
     }
   }
   finishSession = () => {
+    // clearInterval(this.state.OnVolumeAnalyserMap.get(sid))
+    this.state.OnVolumeAnalyserMap.forEach((value,key,map)=>{
+      clearInterval(value)
+    })
     this.timer && clearInterval(this.timer);
     if(this.state.isSharedScreen) {
       this.setState({
@@ -2787,7 +2967,7 @@ class Video extends Component {
   }
   };
   isFileSuccuse = () => {
-    if (!this.state.sessionId || this.state.isSuspend || !this.state.sessionType) {
+    if (!this.state.sessionId || !this.state.sessionType || !this.state.imStatus) {
       this.messageClick('当前程序异常请先退出重开','error')
       return false
     } else {
@@ -2844,9 +3024,13 @@ class Video extends Component {
       }
     }
   };
-  screenSwitching=()=>{
+  sharedScreen = () => {
+    console.log('投屏')
     if (this.isFileSuccuse()) {
       const publish_config = {};
+      if(streamShare) {
+        streamShare.getTracks().forEach(track => track.stop());
+      }
       if (this.state.isSharedScreen) {
         const publish_config = {}
         publish_config.media_type = 1
@@ -2859,40 +3043,6 @@ class Video extends Component {
         publish_config.sid = document.getElementById('video20').name
         this.test_controller.ChangeMediaStream(publish_config)
         this.state.isScreenSwitching = true
-      }
-    }
-  }
-  sharedScreen = () => {
-    console.log('投屏')
-    if (this.isFileSuccuse()) {
-      const publish_config = {};
-      if(streamShare) {
-        streamShare.getTracks().forEach(track => track.stop());
-      }
-      if (this.state.isSharedScreen) {
-        // if (this.state.isWhiteboard) {
-        //   publish_config.publish_device = 4
-        //   publish_config.media_type = 1
-        //   publish_config.sid = document.getElementById('video20').name
-        //   publish_config.part_of_screen_id = 'touBoxItem'
-        //   publish_config.video_profile_type = 5
-        //   this.test_controller.ChangeMediaStream(publish_config);
-        //   this.setState({
-        //     isPDF: true,
-        //   })
-        // } else {
-          this.test_controller.UnPublish(document.getElementById('video20').name)
-        // }
-        this.state.isSharedScreen = false
-        this.state.isScreenSwitching = false
-        this.setState({
-          screenName: '共享模式'
-        });
-        console.log(pictureInPictureVideo)
-        this.tabTitlesClick('RMScreen', 'delect')
-        if (this.state.isPictureInPicture) {
-          document.exitPictureInPicture()
-        }
       } else {
         if (document.getElementById('video20').name) {
           publish_config.media_type = 1;
@@ -2919,7 +3069,7 @@ class Video extends Component {
         // this.state.isSharedScreen = true
         // this.state.isScreenSwitching = false
         this.setState({
-          screenName: '取消共享',
+          screenName: '切换共享',
           isPDF: false
         })
         this.tabTitlesClick(
@@ -3044,12 +3194,41 @@ class Video extends Component {
       isModalVisibleEnd: false
     })
   };
+  ocrCallback= async () => {
+    try {
+      let result = await API.ocrCallback({
+        sessionId: this.state.sessionId,
+        staffId: this.props.tellerAccount,
+        activityId: this.props.businessNumber,
+        appAccount: this.state.faceCustomerUid,
+        fileBase64: this.state.facialImg.replace(/^data:image\/\w+;base64,/,""),
+        type: this.state.defaultValue
+      });
+      if (result.code == 200) {
+        this.messageClick('识别成功','success')
+        this.setState({
+          isModalVisibleFacial: false
+        })
+      } else {
+        this.messageClick('识别失败','error')
+      }
+    } catch (err) {
+      this.messageClick('识别失败','error')
+    }
+  }
   handleOkFacial = () => {
-    const frontIdcard = new File([this.dataURLtoFile(this.state.facialImg, 'image/jpeg')], new Date() + '.png'); // 重命名了
+    if (this.state.faceCustomerType == 2) {
+      // ocr
+      this.ocrCallback()
+      
+    } else {
+      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({
@@ -3134,6 +3313,7 @@ class Video extends Component {
       sid = document.getElementById('video12').name;
     }
     console.log(sid)
+    this.state.customOcrSid = sid
     this.state.faceCustomerUid = item.customId,
     this.setState({
       clickedFacial: false,
@@ -3143,6 +3323,13 @@ class Video extends Component {
       facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
     })
   }
+  handleChangeOcr =(val)=> {
+    console.log(val)
+    this.setState({
+      defaultValue: val,
+      facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png')
+    })
+  }
   componentWillReceiveProps(props) {
       this.state.channelId = props.roomId,
       this.state.rtoken = props.mtoken,
@@ -3258,7 +3445,9 @@ class Video extends Component {
           videoTwelveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户12'
         })
       }
-      this.pictureInPicture('Refresh')
+      if(this.state.isPictureInPicture) {
+        this.pictureInPicture('Refresh')
+      }
     } catch (err) {
       if(err.status == 502 || err.status== 404) {
         this.roomCallBack(2, '连接服务器失败','SYS-02')
@@ -3482,6 +3671,7 @@ class Video extends Component {
            console.log('whiteboardDIV', this.state.whiteboardHeight,box.clientHeight,this.state.whiteboardWidth)
        }
   }
+  
   render() {
     const { meetingInfo,isTranscribing } = this.props
     var pdfChildren
@@ -4065,7 +4255,6 @@ class Video extends Component {
             ocrClick={this.ocrClick}
             switchExternal={this.switchExternalAge}
             inspection={this.inspection}
-            screenSwitching={this.screenSwitching}
           ></Foot>
           <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
             onCancel={this.handleCancel}>
@@ -4091,7 +4280,16 @@ class Video extends Component {
             </div>
           ]}>
             <div className="faceBody">
-              <img className="faceImg" src={this.state.facialImg} alt=""></img>
+            {this.state.faceCustomerType == 2 && 
+            <Select defaultValue={this.state.defaultValue} style={{ width: 120,marginBottom: '20px' }} onChange={this.handleChangeOcr}>
+            <Option value="1">正面</Option>
+            <Option value="2">反面</Option>
+          </Select>
+            }
+            <div>
+            <img className="faceImg" src={this.state.facialImg} alt=""></img>
+            </div>
+              
             </div>
           </Modal>
           {/* <Modal title={this.state.titleModal} cancelText="取消" okText="确定" visible={this.state.isModalVisibleFacial}