react_hsbc_teller 1.9.3 → 1.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "1.9.3",
+  "version": "1.9.5",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",

package/packages/demo/demo.js

@@ -5,10 +5,18 @@ import Pdf from './pdf.js'
 class Demo extends Component {
   state = {
     shareMask: false,
-    mtoken: "3c1b4badb7d7",
-    roomId: "661841296389119",
-    imRoomId: "iax56tSCD@conference.ls-im-xmpp.chinawp.dev.ali.cloud.cn.hsbc",
-sessionId: "iax56tSCD",
+    imRoomId
+    : 
+    "IZLZMoTxj@conference.ls-im-xmpp.chinawp.dev.ali.cloud.cn.hsbc",
+    sessionId
+    : 
+    "IZLZMoTxj",
+    mtoken
+: 
+"bc084d8a922f",
+roomId
+: 
+"663912632731275",
     // roomId: '',
     // mtoken: '',
     // imRoomId: '',
@@ -31,7 +39,8 @@ sessionId: "iax56tSCD",
   microphoneSize: 50,
   fontSize: 14,
   fontFamily: 'auto',
-  isTranscribing: false
+  isTranscribing: false,
+  userSide: 2
 }
 componentWillMount() {
     // if(window.localStorage.getItem('roomId')) {
@@ -158,6 +167,11 @@ createRoomCallback=(data)=>{
 joinRoomCallback=(data)=>{
     console.log('joinRoomCallback', data)
 }
+handleChangeUserSide = (event) => {
+    this.setState({
+        userSide: event.target.value
+    })
+}
 userExit =(val)=>{
         console.log(val)
     }
@@ -185,6 +199,7 @@ userExit =(val)=>{
             mtoken={this.state.mtoken}
             sessionId={this.state.sessionId}
             imRoomId={this.state.imRoomId}
+            userSide={this.state.userSide}
                             prohibitPrompt={this.state.prohibitPrompt}
                             voiceColor={this.state.voiceColor}
                             titleBackground={this.state.titleBackground}
@@ -227,6 +242,7 @@ userExit =(val)=>{
           <div>sessionId：  <input type="text" value={this.state.sessionId} onChange={this.handleChangeSessionId} /></div>
           <div>imRoomId：  <input type="text" value={this.state.imRoomId} onChange={this.handleChangeImRoomId} /></div>
           <div>isTranscribing:  <input type="text" value={this.state.isTranscribing} onChange={this.handleChangeisTranscribing} /></div>
+          <div>userSide:  <input type="text" value={this.state.userSide} onChange={this.handleChangeUserSide} /></div>
           
                             <button className="button" onClick={this.startVideo.bind(this)}>开启视频</button>
                         </div>

package/packages/pages/video/video.jsx

@@ -351,7 +351,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.3&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
+      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.5&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -774,28 +774,11 @@ class Video extends Component {
       })
     }
   };
-  // contrastFaceVerify=()=>{
-  //   axios({
-  //     method: 'post',
-  //     url: 'http://182.92.184.31:8868/verify/face',
-  //     data: { // 这⾥data中的参数为requestBody参数，服务端需要使⽤@RequestBody注解进⾏获取
-  //       "username":"王明珍",
-  //       "num":"410425199510201037",
-  //       "fileBase64":this.state.facialImg.replace(/^data:image\/\w+;base64,/,"")
-  //     }
-  //   }).then((response) =>{
-  //     console.log(response.data);
-  //     if(response.data.code == 200){
-  //       this.messageClick('人脸识别成功','success')
-  //       this.setState({
-  //         isModalVisibleFacial: false
-  //       }) 
-  //     } else {
-  //       this.messageClick('人脸识别失败','error')
-  //     }
-  //   }).catch(function (error) {
-  //   })
-  // }
+  errorCodeClick=(type,value)=>{
+    if(type == 'ocr'){
+
+    }
+  }
   contrastFaceVerify = async () => {
     try {
       let result = await API.contrastFaceVerify({
@@ -808,7 +791,7 @@ class Video extends Component {
         fileBase64: this.state.facialImg.replace(/^data:image\/\w+;base64,/, "")
       });
       console.log(result);
-      if (result.code == 200) {
+      if (result.code == 200 || result.code == 201) {
         // this.messageClick('人脸识别成功','success')
         this.setState({
           loadingFace: false,
@@ -3621,6 +3604,7 @@ class Video extends Component {
         appAccount: this.props.tellerAccount,
         sessionId: this.state.sessionId,
         username: this.props.meetingInfo.host == '--' ? '' : this.props.meetingInfo.host,
+        userSide: this.props.userSide,
         type: '2'
       });
       console.log(result);
@@ -3850,7 +3834,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.9.3')
+    console.log('hsbc_teller_sdk', '1.9.5')
     if (this.props.sessionId) {
       this.getRoomStatus({
         sessionId: this.props.sessionId
@@ -4231,8 +4215,8 @@ class Video extends Component {
         sessionId: this.state.sessionId,
         certificateType: this.state.certificateType,
         customerName: this.state.customerName,
-        startDate: this.state.certificateValidity ? this.state.certificateValidity.split('-')[0] : '',
-        endDate: this.state.certificateValidity ? this.state.certificateValidity.split('-')[1] : '',
+        startDate: this.state.documentType == 'PASSPORT_CARD' ? '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[0] : '',
+        endDate: this.state.documentType == 'PASSPORT_CARD' ? this.state.certificateValidity ? this.state.certificateValidity.split('-')[0]: '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[1] : '',
       });
       console.log('confirmCallback', result)
       if (result.code == 200) {
@@ -4325,11 +4309,40 @@ class Video extends Component {
             })
           }
         }
+        if(this.state.documentType == 'HK_MO_RESIDENCE_CARD' || this.state.documentType == 'TW_RESIDENCE_CARD') {
+          if (result.data.side == 'front') {
+            this.setState({
+              // isModalVisibleFacial: false
+              idCardNumber: result.data.resident.idNum,
+              idCardName: result.data.resident.name
+            })
+            this.ocrCallback(2)
+          } else if (result.data.side == 'back') {
+            console.log(result.data.resident.startDate, result.data.resident.endDate)
+            this.setState({
+              certificateValidity: result.data.resident.startDate + '-' + result.data.resident.endDate,
+              loadingFace: false,
+              cardFailReason: '',
+              cardResuly: 'success',
+            })
+          }
+        }
         if(this.state.documentType == 'PASSPORT_CARD') {
           this.setState({
-            idCardNumber: result.data.idCardNumber,
-            idCardName: result.data.idCardName,
-            certificateValidity: result.data.startDate + '-' + result.data.endDate,
+            idCardNumber: result.data.passport.passportCode,
+            idCardName: result.data.passport.nameEN,
+            certificateValidity: result.data.passport.expiryDate,
+            loadingFace: false,
+            cardFailReason: '',
+            cardResuly: 'success',
+          })
+        }
+
+        if(this.state.documentType == 'TW_PASS_CARD' || this.state.documentType == 'HK_MO_PASS_CARD') {
+          this.setState({
+            idCardNumber: result.data.permission.cardNum,
+            idCardName: result.data.permission.nameEN,
+            certificateValidity: result.data.permission.validDate,
             loadingFace: false,
             cardFailReason: '',
             cardResuly: 'success',
@@ -4350,13 +4363,14 @@ class Video extends Component {
         cardFailReason: err.response.message,
         cardResuly: 'fail',
       })
+      
       // this.messageClick('识别失败', 'error')
     }
   }
   handleOkFacial = () => {
     if (this.state.faceCustomerType == 2) {
       if (this.state.IDtypeFrontOrBack == '请截取证件头像面') {
-        if(this.state.documentType == 'PASSPORT_CARD') {
+        if(this.state.documentType == 'PASSPORT_CARD' || this.state.documentType == 'TW_PASS_CARD' || this.state.documentType == 'HK_MO_PASS_CARD') {
           this.setState({
             loadingFace: true
           })
@@ -5762,7 +5776,9 @@ class Video extends Component {
                               {otherAttendeesList}
                             </li>
                           }
-
+                          <li>
+                            请注意，若会议中需要客户出示证件，请客户使用手机的后置摄像头展示证件，由客户经理拍摄证件照片以完成客户身份核实。客户可点击会议主页面上的”切换摄像头“按钮切换手机摄像头
+                          </li>
 
                         </ul>
                       </div>
@@ -6258,12 +6274,6 @@ class Video extends Component {
           ]}>
             <Spin spinning={this.state.loadingFace} tip="识别中...">
               <div className="faceBody">
-                {/* {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>
-            } */}
                 {this.state.cardResuly == '' && <div className='faceCardImg'>
 
                   {
@@ -6274,10 +6284,12 @@ class Video extends Component {
                     this.state.faceResuly == '' && <span>
                       <div>
                         {
-                          this.state.videoType == 'error' && <div className='errorClassFace'>
-                          <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>客户视频异常，请重试</div>
+                          this.state.videoType == 'error' && <div className='errorClassFace videoErrorClass'>
+                          <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>
+                          请点击“截图”拍摄客户人像的照片。若界面无客户头像显示，请检查网络并保持网络稳定后，点击“截图”重试
+                          </div>
                         }
-                        <video className="faceImg" id="publish_video_2" autoPlay muted={true}></video>
+                        <video disablePictureInPicture className="faceImg" id="publish_video_2" autoPlay muted={true}></video>
                       </div>
                       <img className="faceImg" src={this.state.facialImg} alt=""></img>
                     </span>
@@ -6301,7 +6313,7 @@ class Video extends Component {
                     <div className='imgDIV'>
                       <img className="faceImgCard" src={this.state.facialImgFront} alt=""></img>
                       {
-                        this.state.documentType != 'PASSPORT_CARD' && <img className="faceImgCard faceImgCardTwo" src={this.state.facialImgBack} alt=""></img>
+                        this.state.documentType != 'PASSPORT_CARD' && this.state.documentType != 'TW_PASS_CARD' && this.state.documentType != 'HK_MO_PASS_CARD' && <img className="faceImgCard faceImgCardTwo" src={this.state.facialImgBack} alt=""></img>
                       }
                       
                     </div>
@@ -6437,7 +6449,7 @@ class Video extends Component {
                           <Radio value={'HK_MO_PASS_CARD'}>港澳来往大陆通行证</Radio>
                           <Radio value={'HK_MO_RESIDENCE_CARD'}>港澳台居民居住证</Radio>
                           <Radio value={'TW_RESIDENCE_CARD'}>台湾居民居住证</Radio>
-                          <Radio value={'FOREIGNER_RESIDENCE_CARD'}>外国人永久居住证</Radio>
+                          {/* <Radio value={'FOREIGNER_RESIDENCE_CARD'}>外国人永久居住证</Radio> */}
                         </Space>
                       </Radio.Group>
                     </div>
@@ -6567,6 +6579,7 @@ Video.defaultProps = {
   isTranscribing: false,
   shareMask: false,
   isOpenSound: false, // true开启进出音效   false不开启
+  userSide: 2,
   logUrl: 'http://hsbc.cn-shanghai.log.aliyuncs.com/logstores/hsbc/track?APIVersion=0.6.0&app=meeting-ui',
   internalUrl: 'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting'
 }

package/packages/pages/video/video.less

@@ -186,6 +186,7 @@
   border-radius: 4px;
   border:1px dashed  #DDDDDD;
   margin: 24px;
+  margin-bottom: 3rem;
   flex:1;
   
 }
@@ -267,7 +268,7 @@
   bottom: 0;
   margin: auto;
   width: 500px;
-  height: 150px;
+  height: 300px;
   font-size: 22px;
     color: #222222;
     font-weight: 600;
@@ -425,7 +426,7 @@
 .errorClassName{
     .ant-message-notice-content{
       min-width: 500px;
-      height: 44px;
+      min-height: 44px;
       background: #F9F2F3;
       border: 1px #E5B2B5 solid;
       font-size: 16px;
@@ -464,7 +465,7 @@
 }
 .errorClassFace{
   min-width: 350px;
-      height: 44px;
+      min-height: 44px;
       background: #F9F2F3;
       border: 1px #E5B2B5 solid;
       font-size: 16px;
@@ -479,6 +480,10 @@
       margin-bottom: 3px;
     }
 }
+.videoErrorClass{
+  height: 60px;
+  margin: 15px;
+}
 .successClassFace{
     min-width: 350px;
     height: 44px;