react_hsbc_teller 0.5.7 → 0.6.1

package/packages/pages/video/video.jsx

@@ -23,9 +23,10 @@ import { Button } from '../../../node_modules/antd/lib/index';
 import CanvasDraw from "react-canvas-draw";
 import { FormattedMessage, injectIntl } from 'react-intl';
 import html2canvas from 'html2canvas';
+import axios from 'axios';
 const LEAVE_TYPE = {
-  TELLER_EXIT: '1', // 坐席退出
-  ROOM_DESTROYED: '-1', // 房间异常
+  TELLER_EXIT: 1, // 坐席退出
+  ROOM_DESTROYED: -1, // 房间异常
 }
 let pictureInPictureVideo = ''
 @injectIntl
@@ -100,6 +101,7 @@ class Video extends Component {
     voiceVideoTwelve: false,
     cameraList: [],
     microphoneList: [],
+    speakerList: [],
     isModalVisibleInspection: false,
     cameraValue: '',
     microphoneValue: '',
@@ -144,6 +146,7 @@ class Video extends Component {
       this.props.createRoomCallback({
         type: 1,
         errorManage: '',
+        errorCode: 0,
         data: {
           mtoken: this.state.rtoken,
           imRoomId: result.imRoomId,
@@ -156,6 +159,7 @@ class Video extends Component {
       this.props.createRoomCallback({
         type: 2,
         errorManage: '保存房间信息失败',
+        errorCode:-9,
         data: {}
       })
     }
@@ -181,7 +185,7 @@ class Video extends Component {
       }
     } catch (err) {
       console.error(err);
-      this.roomCallBack(2, '签名失败')
+      this.roomCallBack(2, '签名失败',-8)
     }
   };
   handleEdit = () => {
@@ -644,7 +648,18 @@ class Video extends Component {
             cobj.font = "28px auto";
             cobj.textAlign = 'center';
             cobj.lineWidth = 1;
-            cobj.strokeText(list[i].title, 150, 360 * (i + 1) - 20);
+            // 文字
+            let str = list[i].title
+            for (let k = 0; k < str.length; k++){
+              // console.log(str.substring(0,k+1))
+              // console.log(cobj.measureText(str.substring(0,k+1)).width)
+                  if (cobj.measureText(str.substring(0,k+1)).width>300){
+                    str = str.substring(0,k-2)
+                    str += '...'
+                    break;
+                  }
+            }
+            cobj.strokeText(str, 150, 360 * (i + 1) - 20);
             cobj.stroke();
             //左边框
             cobj.beginPath();
@@ -751,17 +766,19 @@ class Video extends Component {
       });
     }
   };
-  roomCallBack = (type, manege) => {
+  roomCallBack = (type, manege,code) => {
     if (this.state.sessionId) {
       this.props.joinRoomCallback({
         type: type,
         errorManage: manege,
+        errorCode: code,
         data: {}
       })
     } else {
       this.props.createRoomCallback({
         type: type,
         errorManage: manege,
+        errorCode: code,
         data: {}
       })
     }
@@ -805,11 +822,13 @@ class Video extends Component {
             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 == 1215) {
+      }
+      //  else if (Mival.typeId == 1010) {
+      //   if (Mival.sessionId == this.state.sessionId) {
+      //     this.endSession('customerHangUp')
+      //   }
+      // } 
+      else if (Mival.typeId == 1215) {
         // 一炒多的图片
         if (Mival.sessionId == this.state.sessionId) {
           this.props.imgCallback(Mival.data.type, Mival.data.file) // 文字抄录和风险抄录，3--风险，，2--文字
@@ -1017,7 +1036,7 @@ class Video extends Component {
     window.IMOpenfire = msg =>{
       console.log('im登录', msg)
       if(!msg) {
-        this.roomCallBack(2, 'im建立连接失败')
+        this.roomCallBack(2, 'im建立连接失败',-7)
       } else {
         this.setState({
           imStatus: msg
@@ -1093,6 +1112,7 @@ class Video extends Component {
       this.setState({
         cameraList: obj,
         microphoneList: obj1,
+        speakerList: obj2
       })
       if (!this.state.appId) {
         this.mpaasSig(data);
@@ -1111,7 +1131,7 @@ class Video extends Component {
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头','error')
-      this.roomCallBack(2, '获取失败')
+      this.roomCallBack(2, '获取设备失败',-1)
     };
     // 建立连接成功
     this.test_controller.OnConnectOK = () => {
@@ -1120,7 +1140,7 @@ class Video extends Component {
     };
     this.test_controller.OnConnectFailed = (code, msg) => {
       console.log('建立连接失败', code, msg)
-      this.roomCallBack(2, '连接失败')
+      this.roomCallBack(2, '连接失败',-2)
     };
     // 断开连接回调
     this.test_controller.OnConnectClose = (code, msg) => {
@@ -1134,7 +1154,7 @@ class Video extends Component {
     // 初始化房间失败
     this.test_controller.OnInitRoomConfigFail = (err_code, err_msg) => {
       console.log('初始化房间失败', err_code, err_msg)
-      this.roomCallBack(2, '初始化失败')
+      this.roomCallBack(2, '初始化失败',-3)
     };
     // 初始化成功回调
     this.test_controller.OnInitRoomConfigOK = () => {
@@ -1160,7 +1180,7 @@ class Video extends Component {
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
       console.log('创建房间失败', err_code, err_msg)
-      this.roomCallBack(2, '创建失败')
+      this.roomCallBack(2, '创建房间失败',-4)
     };
     // 初始化⾳视频成功
     this.test_controller.OnMediaCallSucc = (sid) => {
@@ -1177,12 +1197,12 @@ class Video extends Component {
     // 加入房间成功
     this.test_controller.OnJoinRoomSucc = () => {
       console.log('加入房间成功')
-      this.roomCallBack(1, '')
+      this.roomCallBack(1, '',0)
     };
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
       console.log('加入房间失败', err_code, err_msg)
-      this.roomCallBack(2, '加入失败')
+      this.roomCallBack(2, '加入失败',-5)
     };
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
@@ -1202,6 +1222,7 @@ class Video extends Component {
     // 发布媒体流失败
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
       console.log('发布媒体流失败', sid, err_code, err_msg)
+      this.roomCallBack(2, '发布失败',-6)
     };
     // 订阅媒体流成功
     this.test_controller.OnSubscribeSucc = (feed, sid) => {
@@ -2090,6 +2111,15 @@ class Video extends Component {
     this.setState({
       loading: true,
     })
+    axios.get(this.props.resourcePath + "/beauty/beauty.js")
+    .then(response => this.addToScriptClick()).catch(function (error) {
+      console.log(error);
+      this.roomCallBack(2, '创建房间失败',-4)
+      
+  })
+    
+  }
+  addToScriptClick=()=>{
     const _dependScripts = [
       // https://counter-web.leimondata.cn:7199
       this.props.resourcePath + "/beauty/beauty.js",
@@ -2472,6 +2502,10 @@ class Video extends Component {
 
   }
   handleOkInvitation = async () => {
+    if(!this.state.employeeName || this.state.employeeError) {
+      this.messageClick('请输入正确的员工号','error')
+      return
+    }
     try {
       let result = await API.sendLink({
         sessionId: this.state.sessionId,
@@ -2649,6 +2683,7 @@ class Video extends Component {
     }
   }
   queryStaff = async () => {
+    if(!this.state.employeeNumber) return
     try {
       let result = await API.getUsername({
         userId: this.state.employeeNumber
@@ -2656,13 +2691,17 @@ class Video extends Component {
       console.log(result)
       if (result.code == 200) {
         this.setState({
-          employeeName: result.data.username
+          employeeName: result.data.username,
+          employeeError: '',
         })
       } else {
         this.messageClick('查询失败','error')
       }
     } catch (err) {
-
+      console.log(err)
+      this.setState({
+        employeeError: '未搜索到相关信息'
+      })
     }
   }
   counterSign = async data => {
@@ -2804,31 +2843,16 @@ class Video extends Component {
         }
       </div>
     )
-    const videoCustomer =
-      this.state.videoList.map((item, index) => {
-        return <div className={`itemed`} style={{ display: (item.isVideo) ? '' : 'none', }}>
-          <video
-            id={'video' + item.videoIndex}
-            autoPlay
-            muted={true}
-            className="video"
-          />
-          <audio id={'audio' + item.videoIndex} autoPlay />
-          <label style={{ display: 'none' }} id={'feedId' + item.videoIndex} type="text" />
-          <div className={`customerTitle titleSamlle`}>
-            <div className='titleName' style={{ background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
-              {this.state.videoTwoName}
-            </div>
-          </div>
-          <canvas className="canvasClassOne" id={'subscribe_volumeView' + item.videoIndex} width="40" height="70"></canvas>
-        </div>
-      })
     const camera = (
       <div class="cameraAnMicrophone">
         {
-          this.state.cameraList.map((item, index) => {
+          this.state.cameraList.map((item) => {
             return <div>
-              <input type="radio" name="camere" value={item.actionid} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br />
+              <label className="radio">
+              <input type="radio" name="camere" value={item.actionid} style={{float: 'left'}} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)}  /><i></i>
+              {item.actionname}
+            </label>
+              {/* <input type="radio" name="camere" value={item.actionid} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br /> */}
             </div>
           })
         }
@@ -2838,27 +2862,51 @@ class Video extends Component {
     const microphone = (
       <div>
         {
-          this.state.microphoneList.map((item, index) => {
+          this.state.microphoneList.map((item) => {
             return <div class="cameraAnMicrophone">
-              <input type="radio" name="microphone" value={item.actionid} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br />
+              <label className="radio">
+              <input type="radio" name="microphone" value={item.actionid} style={{float: 'left'}} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)}  /><i></i>
+              {item.actionname}
+            </label>
+              {/* <input type="radio" name="microphone" value={item.actionid} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br /> */}
             </div>
           })
         }
       </div>
     )
+    const speaker = (
+      <div>
+        {
+          this.state.speakerList.map((item) => {
+            return <div class="cameraAnMicrophone">
+              {item.actionname}<br />
+            </div>
+          })
+        }
+      </div>
+    )
+
     const sectionStyle = this.state.tabTitles.length > 0 ? {
-      'z-index': '-1',
+      zIndex: '-1',
       width:'100%', 
       height:'100%',
       position: 'absolute',
-      left: 0
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      margin: 'auto'
 
     } :{
-      'z-index': '0',
+      zIndex: '0',
       width:'100%', 
-      height:'100%',
+      // height:'100%',
       position: 'absolute',
-      left: 0
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      margin: 'auto'
     };
     return (
       <div className="all">
@@ -2912,11 +2960,11 @@ class Video extends Component {
                         <label className='labelClass'>{meetingInfo.title}</label>
                       </li>
                       <li>
-                        <span>主持人：</span>
+                        <span>客户：</span>
                         <label className='labelClass'>{meetingInfo.host}</label>
                       </li>
                       <li>
-                        <span>参会客户：</span>
+                        <span>参会人：</span>
                         {customerNameList}
                       </li>
                     </ul>
@@ -2951,15 +2999,12 @@ class Video extends Component {
                       className="imgClassVoice voiceClass"
                     />
                   }
-                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
-                    <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>坐席</div>
+                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
+                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>坐席</div>
                   </div>
                 </div>
 
               </div>
-              {/* {
-                videoCustomer
-              } */}
               <div
                 className={`itemed`}
                 style={{ position: "relative", display: (this.state.videoOneName) ? '' : 'none' }}
@@ -2989,9 +3034,9 @@ class Video extends Component {
                       className="imgClassVoice voiceVideoClass"
                     />
                   }
-                  <canvas style={{ display: (this.state.videoOneName && !this.state.voiceVideoOne) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px'}} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
+                  <canvas style={{ display: (this.state.videoOneName && !this.state.voiceVideoOne) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px'}} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
 
-                    <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                       {this.state.videoOneName}
                     </div>
 
@@ -3017,9 +3062,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoTwoName && !this.state.voiceVideoTwo) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoTwoName && !this.state.voiceVideoTwo) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoTwoName}
                   </div>
                 </div>
@@ -3035,7 +3080,7 @@ class Video extends Component {
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
                 
-                <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoThree && <img
                     alt=""
@@ -3043,9 +3088,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoThreeName && !this.state.voiceVideoThree) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoThreeName && !this.state.voiceVideoThree) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoThreeName}
                   </div>
                 </div>
@@ -3060,7 +3105,7 @@ class Video extends Component {
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
                 
-                <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoFour && <img
                     alt=""
@@ -3068,9 +3113,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoFourName && !this.state.voiceVideoFour) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoFourName && !this.state.voiceVideoFour) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoFourName}
                   </div>
                 </div>
@@ -3086,7 +3131,7 @@ class Video extends Component {
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
                 
-                <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoFive && <img
                     alt=""
@@ -3094,9 +3139,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoFiveName && !this.state.voiceVideoFive) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoFiveName && !this.state.voiceVideoFive) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{  color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoFiveName}
                   </div>
                 </div>
@@ -3111,7 +3156,7 @@ class Video extends Component {
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
                 
-                <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoSix && <img
                     alt=""
@@ -3119,9 +3164,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
+                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoSixName}
                   </div>
                 </div>
@@ -3156,9 +3201,9 @@ class Video extends Component {
                       className="imgClassVoice voiceVideoClass"
                     />
                   }
-                  <canvas style={{ display: (this.state.videoSevenName && !this.state.voiceVideoSeven) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView7" width="40" height="70"></canvas>
+                  <canvas style={{ display: (this.state.videoSevenName && !this.state.voiceVideoSeven) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView7" width="40" height="70"></canvas>
 
-                    <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                       {this.state.videoSevenName}
                     </div>
 
@@ -3184,9 +3229,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoEightName && !this.state.voiceVideoEight) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoEightName && !this.state.voiceVideoEight) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoEightName}
                   </div>
                 </div>
@@ -3201,7 +3246,7 @@ class Video extends Component {
                 <audio id="audio9" autoPlay />
                 <label style={{ display: 'none' }} id="feedId9" type="text" />
                 
-                <div style={{ display: (this.state.videoNineName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoNineName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoNine && <img
                     alt=""
@@ -3209,9 +3254,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView9" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView9" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoNineName}
                   </div>
                 </div>
@@ -3228,7 +3273,7 @@ class Video extends Component {
                 <audio id="audio10" autoPlay />
                 <label style={{ display: 'none' }} id="feedId10" type="text" />
                 
-                <div style={{ display: (this.state.videoTenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoTenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoTen && <img
                     alt=""
@@ -3236,9 +3281,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoTenName && !this.state.voiceVideoTen) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView10" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoTenName && !this.state.voiceVideoTen) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView10" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{  color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoTenName}
                   </div>
                 </div>
@@ -3253,7 +3298,7 @@ class Video extends Component {
                 <audio id="audio11" autoPlay />
                 <label style={{ display: 'none' }} id="feedId11" type="text" />
                 
-                <div style={{ display: (this.state.videoElevenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoElevenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoEleven && <img
                     alt=""
@@ -3261,9 +3306,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoElevenName && !this.state.voiceVideoEleven) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView11" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoElevenName && !this.state.voiceVideoEleven) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView11" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoElevenName}
                   </div>
                 </div>
@@ -3279,7 +3324,7 @@ class Video extends Component {
                 <audio id="audio12" autoPlay />
                 <label style={{ display: 'none' }} id="feedId12" type="text" />
                 
-                <div style={{ display: (this.state.videoTwelveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoTwelveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoTwelve && <img
                     alt=""
@@ -3287,9 +3332,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoTwelveName && !this.state.voiceVideoTwelve) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView12" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoTwelveName && !this.state.voiceVideoTwelve) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView12" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{  color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoTwelveName}
                   </div>
                 </div>
@@ -3369,6 +3414,13 @@ class Video extends Component {
               <span class="modalSpan">&nbsp;&nbsp;&nbsp;姓名：</span><span>{this.state.employeeName}</span>
               </div>
             </div>
+            {
+              this.state.employeeError && <div className='errorClassInvitation'>
+              <img alt="" src={require("../../assets/img/tooltips2_fail.png").default} />
+              <span>{this.state.employeeError}</span>
+              </div>
+            }
+            
           </Modal>
           <Modal title="签字白板" closable={false} centered={true} visible={this.state.isModalVisibleSign} footer={
             [
@@ -3396,11 +3448,13 @@ class Video extends Component {
               {camera}
               <div>麦克风设备：</div>
               {microphone}
+              <div>扬声器设备：</div>
+              {speaker}
             </div>
           </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>
+            webkit-playsinline={true} playsInline={true} x5-playsinline="x5-playsinline"
+            x-webkit-airplay={true}></video>
         </Spin>
       </div>);
   }
@@ -3409,8 +3463,11 @@ Video.defaultProps = {
   tellerAccount: 't001',
   businessNumber: '123',
   callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
+  // roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws', 
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
+
   resourcePath: 'https://counter-web.leimondata.cn:7199',
+  // resourcePath: 'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
   prohbiitPrompt: '当前无客户',
   voiceColor: '#0AE544',
   titleBackground: 'rgba(0,0,0,0.65)',