react_hsbc_teller 1.0.2 → 1.0.5

package/package.json

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

package/packages/demo/demo.js

@@ -1,27 +1,212 @@
 import React, { Component } from "react";
-import PropTypes from "prop-types";
+import HSBC from "../pages/index";
 
 class Demo extends Component {
-  constructor(props) {
-    super(props);
+  state = {
+    // imRoomId: "9K9ea1vOM@conference.ls-im-xmpp.chinawp.dev.ali.cloud.cn.hsbc",
+    // sessionId: "9K9ea1vOM",
+    // mtoken: "d4e648858b03",
+    // roomId: "645110140224386",
+    roomId: '',
+    mtoken: '',
+    imRoomId: '',
+    sessionId: '',
+    isVideo: false,
+    tellerAccount: '00000000',
+    callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
+    businessNumber: '',
+    lang: 'zh',
+    roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
+    baseURL:'https://counter-web.leimondata.cn:18082/api/leimon-counter-api',
+    resourcePath: 'https://counter-web.leimondata.cn:7199',
+    // roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws',
+    // baseURL:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/zuul/api/leimon-counter-api',
+    // resourcePath:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
+    prohibitPrompt: '无客户',
+  voiceColor: '#333',
+  titleBackground: '#40a9ff',
+  titleColor: '#faad14',
+  microphoneSize: 50,
+  fontSize: 14,
+  fontFamily: 'auto',
+  isTranscribing: false
+}
+componentWillMount() {
+    // if(window.localStorage.getItem('roomId')) {
+    //     this.setState({roomId: window.localStorage.getItem('roomId')});
+    // }
+    // if(window.localStorage.getItem('mtoken')) {
+    //     this.setState({mtoken: window.localStorage.getItem('mtoken')});
+    // }
+    // if(window.localStorage.getItem('sessionId')) {
+    //     this.setState({sessionId: window.localStorage.getItem('sessionId')});
+    // }
+    // if(window.localStorage.getItem('imRoomId')) {
+    //     this.setState({imRoomId: window.localStorage.getItem('imRoomId')});
+    //     this.startVideo()
+    // }
+    
+}
+handleChangeRoomId = (event) => {
+    this.setState({roomId: event.target.value});
+    window.localStorage.setItem('roomId', event.target.value)
+  }
+  handleChangeRToken = (event) => {
+    this.setState({mtoken: event.target.value});
+    window.localStorage.setItem('mtoken', event.target.value)
   }
+  handleChangeSessionId = (event) => {
+    this.setState({sessionId: event.target.value});
+    window.localStorage.setItem('sessionId', event.target.value)
+  }
+  handleChangeImRoomId = (event) => {
+    this.setState({imRoomId: event.target.value});
+    window.localStorage.setItem('imRoomId', event.target.value)
+  }
+startVideo = () => {
+    this.setState({
+        isVideo: true
+    })
+}
+onLeaveRoom = (val) => {
+    console.log(val)
+    this.setState({
+        isVideo: false
+    })
+}
+handleChangeTeller = (event) => {
+    this.setState({
+        tellerAccount: event.target.value
+    })
+}
+handleChangeCall = (event) => {
+    this.setState({
+        callbackUrl: event.target.value
+    })
+}
+handleChangeBysiness = (event) => {
+    this.setState({
+        businessNumber: event.target.value
+    })
+}
+
+handleRoomServerUrl = (event) => {
+    this.setState({
+        roomServerUrl: event.target.value
+    })
+}
+handleBaseURL = (event) => {
+    this.setState({
+        baseURL: event.target.value
+    })
+}
+handleChangeisTranscribing = (event) => {
+    this.setState({
+        isTranscribing: event.target.value
+    })
+}
+handleResourcePath = (event) => {
+    this.setState({
+        resourcePath: event.target.value
+    })
+}
+imgCallback=(file)=>{
+    console.log(file)
+}
+createRoomCallback=(data)=>{
+    console.log('createRoomCallback', data)
+    this.setState({roomId: data.data.roomId});
+    window.localStorage.setItem('roomId', data.data.roomId)
+    this.setState({mtoken: data.data.mtoken});
+    window.localStorage.setItem('mtoken', data.data.mtoken)
+    this.setState({sessionId:data.data.sessionId});
+    window.localStorage.setItem('sessionId',data.data.sessionId)
+    this.setState({imRoomId: data.data.imRoomId});
+    window.localStorage.setItem('imRoomId', data.data.imRoomId)
+
+}
+joinRoomCallback=(data)=>{
+    console.log('joinRoomCallback', data)
+}
   render() {
     return (
-      <div>
-        演示文件1
-      </div>
+      <div className="test">
+                {
+                    this.state.isVideo ?
+                        <HSBC
+                        roomId={this.state.roomId} 
+            mtoken={this.state.mtoken}
+            sessionId={this.state.sessionId}
+            imRoomId={this.state.imRoomId}
+                            prohibitPrompt={this.state.prohibitPrompt}
+                            voiceColor={this.state.voiceColor}
+                            titleBackground={this.state.titleBackground}
+                            titleColor={this.state.titleColor}
+                            microphoneSize={this.state.microphoneSize}
+                            fontSize={this.state.fontSize}
+                            fontFamily={this.state.fontFamily}
+                            tellerAccount={this.state.tellerAccount}
+                            callbackUrl={this.state.callbackUrl}
+                            businessNumber={this.state.businessNumber}
+                            lang={this.state.lang}
+                            roomServerUrl={this.state.roomServerUrl}
+                            baseURL={this.state.baseURL}
+                            resourcePath={this.state.resourcePath}
+                            isTranscribing={this.state.isTranscribing}
+                            onLeaveRoom={this.onLeaveRoom}
+                            createRoomCallback={this.createRoomCallback}
+                            joinRoomCallback={this.joinRoomCallback}
+                            imgCallback={this.imgCallback}
+                            >
+                                
+                                {/* <Pdf></Pdf> */}
+                        </HSBC>
+                        :
+                        <div>
+                            坐席账号：<input placeholder="请输入坐席账号" value={this.state.tellerAccount} onChange={e => this.handleChangeTeller(e)}></input>
+                            回调地址：<input placeholder="请输入回调地址" value={this.state.callbackUrl} onChange={e => this.handleChangeCall(e)}></input>
+                            全局流水号：<input placeholder="请输入全局流水号" value={this.state.businessNumber} onChange={e => this.handleChangeBysiness(e)}></input>
+                            阿里服务器地址：<input placeholder="请输入阿里服务器地址" value={this.state.roomServerUrl} onChange={e => this.handleRoomServerUrl(e)}></input>
+                            接口地址：<input placeholder="请输入接口地址" value={this.state.baseURL} onChange={e => this.handleBaseURL(e)}></input>
+                            阿里资源服务地址：<input placeholder="请输入阿里资源服务地址" value={this.state.resourcePath} onChange={e => this.handleResourcePath(e)}></input>
+
+
+                            <div>roomId：  <input type="text" value={this.state.roomId} onChange={this.handleChangeRoomId} /></div>
+          <div>rtoken：  <input type="text" value={this.state.mtoken} onChange={this.handleChangeRToken} /></div>
+          <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>
+          
+                            <button className="button" onClick={this.startVideo.bind(this)}>开启视频</button>
+                        </div>
+                }
+            </div>
+      // <div>
+      //  { this.state.isPlay? 
+      //     <HSBC
+      //       tellerAccount={this.state.tellerAccount} 
+      //       roomId={this.state.roomId} 
+      //       mtoken={this.state.mtoken}
+      //       sessionId={this.state.sessionId}
+      //       imRoomId={this.state.imRoomId}
+      //       name={this.state.name}
+      //       lang={this.state.lang}
+      //       onLeaveRoom={this.exitRoom}
+      //     />
+      //   : 
+      //   <div style={{padding: '20px'}}>
+      //     <div>账号：  <input type="text" value={this.state.tellerAccount} onChange={this.handleChangeAccount} /></div>
+      //     <div>roomId：  <input type="text" value={this.state.roomId} onChange={this.handleChangeRoomId} /></div>
+      //     <div>rtoken：  <input type="text" value={this.state.mtoken} onChange={this.handleChangeRToken} /></div>
+      //     <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>姓名（非必填）：  <input type="text" value={this.state.name} onChange={this.handleChangeName} /></div>
+      //     <div>系统语言：  <input type="text" value={this.state.lang} onChange={this.handleChangeLang} /></div>
+      //     <div><button onClick={this.joinRoom} >加入房间</button></div>
+      //   </div>}
+      // </div>
     );
   }
 }
 
-// 指定 props 的默认值：
-Demo.defaultProps = {
-  type: "default",
-};
-
-Demo.propTypes = {
-  type: PropTypes.string,
-  onClick: PropTypes.func,
-};
-
 export default Demo;

package/packages/index.js

@@ -1,2 +1,3 @@
 import "./style/index.less";
 export { default as HSBC } from "./pages/index";
+// export { default as HSBC } from "./demo/demo";

package/packages/pages/foot/foot.jsx

@@ -50,8 +50,11 @@ export default class foot extends Component {
       inspection = ()=>{
           this.props.inspection()
       }
+      screenSwitching =()=>{
+          this.props.screenSwitching()
+      }
     render() {
-        const {clickedOcr,clickedFacial,isTranscribing,img,cameraImg,screenName,suspendName,customerList,menus,voiceName} = this.props
+        const {clickedOcr,clickedFacial,img,cameraImg,isTranscribing ,screenName,suspendName,customerList,menus,voiceName} = this.props
         const content = (
             <div>
               {customerList.map((item,index)=>{
@@ -69,7 +72,7 @@ export default class foot extends Component {
                   {
                       menus.map((item,index)=>{
                           return <div key={index}className='footHover'>
-                          {
+                          {/* {
                                   isTranscribing &&
                                   <div className="one" onClick={this.transcribingClick.bind(this)}>
                                   <img className="imgClass"src={require("../../assets/img/icon_copy.png").default} alt="" />
@@ -77,7 +80,7 @@ export default class foot extends Component {
                                       签字
                                   </div>
                               </div>
-                              }
+                              } */}
                               {
                                  item == 'SHARE' && <div className="one" onClick={this.sharedScreen.bind(this)}>
                                   <img className="imgClass" src={require("../../assets/img/Projection_screen.png").default} alt="" />
@@ -150,6 +153,14 @@ export default class foot extends Component {
                         </div>
                     </div>
                     </div>
+                    {/* <div className='footHover' onClick={this.screenSwitching.bind(this)}>
+                    <div className="one">
+                        <img className="imgClass" src={require("../../assets/img/inspection.png").default} alt="" />
+                        <div className="text">
+                            切换投屏
+                        </div>
+                    </div>
+                    </div> */}
                 </div>
                 {defaultList}
                 

package/packages/pages/video/video.jsx

@@ -41,6 +41,7 @@ class Video extends Component {
   cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
+    isScreenSwitching: false,
     whiteboardWidth: '',
     whiteboardHeight: '',
     laveRoomSharedScreen: false,
@@ -49,7 +50,8 @@ class Video extends Component {
     isWhiteboard: false,
     isSelect: '',
     loading: false,
-    isModalVisibleSign: false,
+    // isModalVisibleSign: '',
+    isModalVisibleSign: this.props.isTranscribing,
     titleModal: '人脸识别',
     faceCustomerType: 1, // 1无感人脸，2ocr
     faceCustomerUid: '',
@@ -321,8 +323,8 @@ class Video extends Component {
   enableServerRecording = () => {
     const filePath = 'recordId_' + new Date().valueOf();
     const recordParam = {};
-    recordParam.width = 640;
-    recordParam.height = 480;
+    recordParam.width = 1280;
+    recordParam.height = 720;
     recordParam.recordTotalStream = 0;
     recordParam.startTimeout = 10;
     recordParam.splitType = 0;
@@ -1322,12 +1324,14 @@ class Video extends Component {
         this.state.sessionType = false
         this.roomCallBack(2, 'im建立连接失败',5)
       } else {
-          this.state.imStatus = msg
-        if(this.state.imRoomId && !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.state.imStatus = msg
+        setTimeout(() => {
+          if(this.state.imRoomId && !this.state.imJoinRoom) {
+            joinRoom((this.props.tellerAccount + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
+              this.state.imJoinRoom =true
+            console.log('IMOpenfire 加入im房间')
+          }
+        }, 200);
       }
 
     }
@@ -2284,10 +2288,13 @@ class Video extends Component {
     // 切流成功通知
     this.test_controller.OnChangeMediaStreamSuccess = (sid) => {
       console.log('切流成功通知', sid);
-      this.messageClick('切换摄像头或麦克风成功','success')
-      this.setState({
-        isModalVisibleInspection: false
-      })
+      if(this.state.isModalVisibleInspection) {
+        this.messageClick('切换摄像头或麦克风成功','success')
+        this.setState({
+          isModalVisibleInspection: false
+        })
+      }
+      
     };
     // 切流失败通知
     this.test_controller.OnChangeMediaStreamFailed = (
@@ -2409,9 +2416,14 @@ class Video extends Component {
     // 停止共享
     this.test_controller.OnDesktopDisplayClosed = () => {
       console.log('OnDesktopDisplayClosed', this.state.isSharedScreen ,this.state.laveRoomSharedScreen)
+      if(this.state.isScreenSwitching) {
+        this.state.isScreenSwitching = false
+      } else {
         if (!this.state.laveRoomSharedScreen && this.state.isSharedScreen) {
           this.sharedScreen()
         }
+      }
+        
       
     }
   }
@@ -2468,6 +2480,7 @@ class Video extends Component {
       this.test_controller.Disconnect()
     }
     if(this.state.imStatus) {
+      console.log('disconnect断开连接')
       disconnect();
     }
     
@@ -2583,7 +2596,7 @@ class Video extends Component {
       this.props.resourcePath + "/beauty/backgroundBlur.js",
       this.props.resourcePath + "/adapter.js",
       this.props.resourcePath + "/getMediaInfo.js",
-      this.props.resourcePath + "/pdf.js",
+      // this.props.resourcePath + "/pdf.js",
       this.props.resourcePath + "/EBML.js",
       this.props.resourcePath + "/mcu.js",
       this.props.resourcePath + "/meeting_desk_stream.js",
@@ -2763,6 +2776,20 @@ class Video extends Component {
       }
     }
   };
+  screenSwitching=()=>{
+    if (this.isFileSuccuse()) {
+      const publish_config = {};
+      if (this.state.isSharedScreen) {
+        const publish_config = {}
+        publish_config.media_type = 1
+        publish_config.publish_device = 2
+        publish_config.video_profile_type = 1
+        publish_config.sid = document.getElementById('video20').name
+        this.test_controller.ChangeMediaStream(publish_config)
+        this.state.isScreenSwitching = true
+      }
+    }
+  }
   sharedScreen = () => {
     console.log('投屏')
     if (this.isFileSuccuse()) {
@@ -2782,6 +2809,7 @@ class Video extends Component {
           this.test_controller.UnPublish(document.getElementById('video20').name)
         }
         this.state.isSharedScreen = false
+        this.state.isScreenSwitching = false
         this.setState({
           screenName: '投屏'
         });
@@ -2794,20 +2822,21 @@ class Video extends Component {
         if (document.getElementById('video20').name) {
           publish_config.media_type = 1;
           publish_config.publish_device = 2;
-          publish_config.video_profile_type = 5;
+          publish_config.video_profile_type = 1;
           publish_config.sid = document.getElementById('video20').name;
           this.test_controller.ChangeMediaStream(publish_config);
         } else {
           publish_config.media_type = 1
           publish_config.publish_device = 2
           publish_config.need_volume_analyser = true
-          publish_config.video_profile_type = 5
+          publish_config.video_profile_type = 1
           publish_config.publish_video_id = 'video20'
           publish_config.publish_streamId_id = 'subscribe_streamId20'
           publish_config.publish_tag = 'projectionWhiteboard'
           this.test_controller.Publish(publish_config)
         }
         this.state.isSharedScreen = true
+        this.state.isScreenSwitching = false
         this.setState({
           screenName: '取消共享',
           isPDF: false
@@ -3215,9 +3244,16 @@ class Video extends Component {
     }
   }
   handleOkSign = () => {
-    this.counterSign({
-      file: this.signCanvas.current.canvas.drawing.toDataURL('image/png')
+    this.setState({
+      isModalVisibleSign: false,
     })
+    console.log(this.signCanvas.current.canvas.drawing.toDataURL('image/png'))
+    this.props.imgRMCallback(
+      this.signCanvas.current.canvas.drawing.toDataURL('image/png').replace(/data.+?;base64,/, "")
+    )
+    // this.counterSign({
+    //   file: this.signCanvas.current.canvas.drawing.toDataURL('image/png')
+    // })
   }
   switchExternal = () => {
     if (!this.state.isWhiteboard) {
@@ -3866,6 +3902,7 @@ class Video extends Component {
             ocrClick={this.ocrClick}
             switchExternal={this.switchExternal}
             inspection={this.inspection}
+            screenSwitching={this.screenSwitching}
           ></Foot>
           <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
             onCancel={this.handleCancel}>
@@ -3936,7 +3973,7 @@ class Video extends Component {
             }
             
           </Modal>
-          <Modal title="签字白板" closable={false} centered={true} visible={this.state.isModalVisibleSign} footer={
+          <Modal title="签字白板" width={600} destroyOnClose={true} closable={false} centered={true} visible={this.state.isModalVisibleSign} footer={
             [
               <div key='okSign'>
               <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSign}>确定</Button>
@@ -4007,6 +4044,7 @@ sessionId: "Fwua8kGB6",
     title: '--',
     host: '--',
     customers: ['--']
-  }
+  },
+  isTranscribing: false,
 }
 export default Video

package/packages/pages/video/video.less

@@ -152,7 +152,7 @@
   text-align: center;
 }
 .content{
-  height: 654px;
+  height: 200px;
   border-radius: 4px;
   border:1px dashed  #DDDDDD;
   margin: 24px;