react_hsbc_teller 1.0.9 → 1.1.2

package/package.json

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

package/packages/demo/demo.js

@@ -4,17 +4,17 @@ import Pdf from './pdf.js'
 
 class Demo extends Component {
   state = {
-    // imRoomId: "9K9ea1vOM@conference.ls-im-xmpp.chinawp.dev.ali.cloud.cn.hsbc",
-    // sessionId: "9K9ea1vOM",
-    // mtoken: "d4e648858b03",
-    // roomId: "645110140224386",
+    // mtoken: "182f46eea982",
+    // roomId: "646380817934933",
+    // imRoomId: "E9IYrsxUY@conference.openfire2.leimondata.cn",
+    // sessionId: "E9IYrsxUY",
     roomId: '',
     mtoken: '',
     imRoomId: '',
     sessionId: '',
     isVideo: false,
     tellerAccount: '00000000',
-    callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
+    callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
     businessNumber: '',
     lang: 'zh',
     roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',

package/packages/pages/foot/foot.jsx

@@ -36,9 +36,6 @@ export default class foot extends Component {
     customerFaceClick=(item)=>{
         this.props.customerFaceClick(item)
     }
-    switchExternal=()=>{
-        this.props.switchExternal()
-    }
     facialHandleVisibleChange = visible => {
         console.log(visible)
         this.props.facialHandleVisibleChange(visible)
@@ -53,8 +50,11 @@ export default class foot extends Component {
       screenSwitching =()=>{
           this.props.screenSwitching()
       }
+      switchExternal=()=>{
+        this.props.switchExternal()
+    }
     render() {
-        const {clickedOcr,clickedFacial,img,cameraImg,isTranscribing ,screenName,suspendName,customerList,menus,voiceName} = this.props
+        const {clickedOcr,clickedFacial,img,isWhiteboard,cameraImg,isTranscribing ,screenName,suspendName,customerList,menus,voiceName} = this.props
         const content = (
             <div>
               {customerList.map((item,index)=>{
@@ -69,6 +69,17 @@ export default class foot extends Component {
           );
           const defaultList = (
               <div className="total totalTwo">
+                  {
+                      isWhiteboard&&<div className='footHover' onClick={this.switchExternal.bind(this)}>
+                      <div className="one">
+                          <img className="imgClass" src={require("../../assets/img/Projection_screen.png").default} alt="" />
+                          <div className="text">
+                              白板
+                          </div>
+                      </div>
+                      </div>
+                  }
+                  
                   {
                       menus.map((item,index)=>{
                           return <div key={index}className='footHover'>

package/packages/pages/video/video.jsx

@@ -27,7 +27,9 @@ const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
   ROOM_DESTROYED: -1, // 房间异常
 }
-let pictureInPictureVideo = ''
+let pictureInPictureVideo
+let mix_stream
+let worker
 message.config({
   getContainer: ()=>document.getElementById('allHSBC')
 })
@@ -41,6 +43,7 @@ class Video extends Component {
   cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
+    listVideoPicture: [],
     isScreenSwitching: false,
     whiteboardWidth: '',
     whiteboardHeight: '',
@@ -592,16 +595,16 @@ class Video extends Component {
         if(!val) {
           document.exitPictureInPicture()
         } else {
-          this.pictureInPictureClick()
+          this.pictureInPictureClick('update')
         }
       } else {
         if(!val) {
-        this.pictureInPictureClick()
+        this.pictureInPictureClick('add')
         }
       }
     }
   };
-  pictureInPictureClick=()=>{
+  pictureInPictureClick=(val)=>{
     let interval
     const list = []
     if (document.getElementById('video1').name) {
@@ -710,12 +713,18 @@ class Video extends Component {
       })
     }
     console.log(list)
-    const width = 640;
-    const height = 360 * list.length;
+    this.state.listVideoPicture = list
+    // const width = 640;
+    // const height = 360 * this.state.listVideoPicture.length;
+    if(val == 'add') {
+      pictureInPictureVideo.srcObject = mix_stream;
+      let flag1 = true;
+      worker.postMessage(flag1);
+    }
+  }
+  workerClick=()=>{
     const canvas = document.createElement('canvas');
     const cobj = canvas.getContext('2d'); // 获取绘图环境
-    canvas.width = width;
-    canvas.height = height;
     let blob = new Blob([
       `
       let timer;
@@ -729,15 +738,17 @@ class Video extends Component {
       `,
     ]);
     let url = window.URL.createObjectURL(blob);
-    var worker = new Worker(url);
+    worker = new Worker(url);
     window.URL.revokeObjectURL(blob);
-    let flag1 = true;
+    
 
     worker.onmessage =() => {
-      cobj.clearRect(0, 0, width, height);
-      for (let i = 0; i < list.length; i++) {
+      cobj.clearRect(0, 0, 640, 360 * this.state.listVideoPicture.length);
+      canvas.width = 640;
+      canvas.height = 360 * this.state.listVideoPicture.length;
+      for (let i = 0; i < this.state.listVideoPicture.length; i++) {
 
-        let videoId = list[i].name;
+        let videoId = this.state.listVideoPicture[i].name;
         let videoDiv = document.getElementById(videoId);
         let videoWidth = videoDiv.videoWidth;
         let videoHeight = videoDiv.videoHeight;
@@ -748,7 +759,7 @@ class Video extends Component {
         } else {
           newVideoHeight = videoHeight * 640 / videoWidth;
         }
-        if(list[i].noVideo){
+        if(this.state.listVideoPicture[i].noVideo){
           cobj.fillStyle = '#333';
         cobj.fillRect((640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight)
         } else {
@@ -762,11 +773,11 @@ class Video extends Component {
         cobj.fill();
         cobj.stroke();
         cobj.beginPath();
-        cobj.font = "28px auto";
+        cobj.font = "normal lighter 25px sans-serif";
         cobj.textAlign = 'left';
         cobj.lineWidth = 1;
         // 文字
-        let str = list[i].title
+        let str = this.state.listVideoPicture[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)
@@ -781,7 +792,7 @@ class Video extends Component {
         //左边框
         cobj.beginPath();
         cobj.moveTo(0, 0);
-        cobj.lineTo(0, 360 * list.length);
+        cobj.lineTo(0, 360 * this.state.listVideoPicture.length);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -798,7 +809,7 @@ class Video extends Component {
 
         //右边框
         cobj.beginPath();
-        cobj.moveTo(640, 360 * list.length);
+        cobj.moveTo(640, 360 * this.state.listVideoPicture.length);
         cobj.lineTo(640, 0);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
@@ -808,8 +819,8 @@ class Video extends Component {
 
         //上边框
         cobj.beginPath();
-        cobj.moveTo(0, 360 * list.length);
-        cobj.lineTo(640, 360 * list.length);
+        cobj.moveTo(0, 360 * this.state.listVideoPicture.length);
+        cobj.lineTo(640, 360 * this.state.listVideoPicture.length);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -819,26 +830,15 @@ class Video extends Component {
         let microphoneSize = 50
         var img = document.getElementById("icon_huatong");
         var img1 = document.getElementById("icon_huatong_close");
-        if(this.state[list[i].voice]) {
+        if(this.state[this.state.listVideoPicture[i].voice]) {
           cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
         } else {
           cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
 
         // 绘制实时音量
-        let sid = document.getElementById(list[i].name).name
+        let sid = document.getElementById(this.state.listVideoPicture[i].name).name
         let analyser = this.state.analyserData.get(sid)
         aou(analyser)
-        //  let sid = document.getElementById(list[i].name).name
-        //   let stream = this.test_controller.GetMediaInfo(sid).audio_
-        //   let acc = new AudioContext()
-        //   let mic = acc.createMediaStreamSource(stream)
-        //   let analyser = acc.createAnalyser()
-        //   analyser.fftSize = 256
-        //   mic.connect(analyser)
-        //   aou(analyser) 
-        //   let microphoneSize = 50
-        //   var img = document.getElementById("icon_huatong");
-        //   cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
         function aou(analyser){
           if(analyser) {
             let dataArray = new Uint8Array(analyser.frequencyBinCount);
@@ -873,11 +873,11 @@ class Video extends Component {
         
       }
     };
-    worker.postMessage(flag1);
+   
     const captureStream = canvas.captureStream();
-    const mix_stream = new MediaStream(captureStream);
+    mix_stream = new MediaStream(captureStream);
     pictureInPictureVideo = document.getElementById('mixedvideo');
-    pictureInPictureVideo.srcObject = mix_stream;
+    
     pictureInPictureVideo.onloadedmetadata = () => {
       pictureInPictureVideo.requestPictureInPicture();
     };
@@ -892,9 +892,11 @@ class Video extends Component {
     pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
       pictureInPictureVideo.srcObject = null;
       pictureInPictureVideo.style.display = "none";
+      this.state.listVideoPicture = []
       worker.postMessage(false);
       this.state.isPictureInPicture = false
     });
+
   }
   roomCallBack = (type, manege,code) => {
     this.setState({
@@ -1135,7 +1137,10 @@ class Video extends Component {
       else if (Mival.typeId == 1220) {
         // 一炒多的图片
         if (Mival.sessionId == this.state.sessionId) {
-          this.props.imgCallback(Mival.data.type, Mival.data.file) // 文字抄录和风险抄录，3--风险，，2--文字
+          this.props.imgCallback({
+            type: Mival.data.type, 
+            file: Mival.data.file}
+            ) // 文字抄录和风险抄录，3--风险，，2--文字
         }
       } else if (Mival.typeId == 1216) {
         // 签字回调
@@ -1150,10 +1155,16 @@ class Video extends Component {
           } else if (Mival.type == 2) {
             this.tabTitlesClick('RMWhiteboard', 'delect')
             if (this.state.isSharedScreen) {
-              this.state.isWhiteboard = false
+              this.setState({
+                isWhiteboard: false
+              })
             } else {
-              this.test_controller.UnPublish(document.getElementById('video20').name)
-              this.state.isWhiteboard = false
+              if(document.getElementById('video20').name) {
+                this.test_controller.UnPublish(document.getElementById('video20').name)
+              }
+              this.setState({
+                isWhiteboard: false
+              })
             }
           }
 
@@ -1355,7 +1366,7 @@ class Video extends Component {
       type: '2',
       sigType: 1
     };
-
+    this.workerClick()
     this.test_controller.GetDevices();
     // 获取设备成功
     this.test_controller.OnGetDevicesSuccess = (devicesInfo) => {
@@ -2617,6 +2628,7 @@ class Video extends Component {
       this.props.resourcePath + "/beauty/beauty.js",
       this.props.resourcePath + "/beauty/meeting_beautify_stream.js",
       this.props.resourcePath + "/beauty/backgroundBlur.js",
+
       this.props.resourcePath + "/adapter.js",
       this.props.resourcePath + "/getMediaInfo.js",
       // this.props.resourcePath + "/pdf.js",
@@ -2628,10 +2640,17 @@ class Video extends Component {
       this.props.resourcePath + "/meeting_im.js",
       this.props.resourcePath + "/meeting_vod.js",
       this.props.resourcePath + "/meeting_invite.js",
-      this.props.resourcePath + "/client_record.js",
+      this.props.resourcePath + "/client_record.js",  
       this.props.resourcePath + "/remote_record.js",
       this.props.resourcePath + "/meeting_camera_stream.js",
       this.props.resourcePath + "/meeting_api.js",
+
+      this.props.resourcePath + "/eruda.js",
+      this.props.resourcePath + "/iconfont.js",
+      this.props.resourcePath + "/dialogue.css",
+      
+
+        
     ]
     const that = this
     let i = 0
@@ -2807,6 +2826,8 @@ class Video extends Component {
         publish_config.media_type = 1
         publish_config.publish_device = 2
         publish_config.video_profile_type = 1
+        publish_config.enableDesktopAudio=true
+        publish_config.degradationType=2
         publish_config.sid = document.getElementById('video20').name
         this.test_controller.ChangeMediaStream(publish_config)
         this.state.isScreenSwitching = true
@@ -2818,19 +2839,19 @@ class Video extends Component {
     if (this.isFileSuccuse()) {
       const publish_config = {};
       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 {
+        // 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({
@@ -2846,6 +2867,8 @@ class Video extends Component {
           publish_config.media_type = 1;
           publish_config.publish_device = 2;
           publish_config.video_profile_type = 1;
+          publish_config.enableDesktopAudio=true
+          publish_config.degradationType=2
           publish_config.sid = document.getElementById('video20').name;
           this.test_controller.ChangeMediaStream(publish_config);
         } else {
@@ -2853,6 +2876,8 @@ class Video extends Component {
           publish_config.publish_device = 2
           publish_config.need_volume_analyser = true
           publish_config.video_profile_type = 1
+          publish_config.enableDesktopAudio=true
+          publish_config.degradationType=2
           publish_config.publish_video_id = 'video20'
           publish_config.publish_streamId_id = 'subscribe_streamId20'
           publish_config.publish_tag = 'projectionWhiteboard'
@@ -3214,6 +3239,7 @@ class Video extends Component {
       console.log(inp.value, '复制到的内容')
       document.execCommand('Copy') // 执行浏览器复制命令
       inp.remove()
+      this.messageClick('复制成功','success')
   }
   queryStaff = async () => {
     if(!this.state.employeeNumber) return
@@ -3246,21 +3272,108 @@ class Video extends Component {
       this.signCanvas.current.canvas.drawing.toDataURL('image/png').replace(/data.+?;base64,/, "")
     )
   }
+  switchExternalAge = ()=>{
+    const that = this
+    if(this.state.isSharedScreen) {
+      this.state.isSharedScreen = false
+      this.setState({
+        
+        screenName: '共享模式'
+      });
+      this.tabTitlesClick('RMScreen', 'delect')
+      if (this.state.isPictureInPicture) {
+        document.exitPictureInPicture()
+      }
+    }
+
+    const publish_config = {};
+    const width = this.state.whiteboardWidth;
+    const height = this.state.whiteboardHeight;
+    const canvas = document.createElement('canvas');
+    const videoMedia = document.getElementById('manedvideo');
+    const cobj = canvas.getContext('2d'); // 获取绘图环境
+    const w = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
+    const h = document.getElementById("whiteboardDIV").getBoundingClientRect().top
+    canvas.width = width;
+    canvas.height = height;
+    videoMedia.addEventListener('play', (event) =>{
+      var $this = this; //cache
+      console.log('333111',!$this.paused,!$this.ended)
+      loop()
+      function loop() {
+          if (!$this.paused && !$this.ended) {
+            cobj.drawImage(videoMedia, w, h, width, height, 0, 0,width, height,);
+              setTimeout(loop, 1000 / 10); // drawing at 30fps
+          }
+      }
+      
+      if (document.getElementById('video20').name) {
+        // 代表已经有了进行切流
+        publish_config.publish_device = 5
+        publish_config.media_type = 1
+        publish_config.degradationType=2
+        publish_config.sid = document.getElementById('video20').name
+        publish_config.stream = canvas.captureStream(10)
+        publish_config.video_profile_type = 9
+        this.test_controller.ChangeMediaStream(publish_config);
+      } else {
+
+        publish_config.media_type = 1
+        publish_config.publish_device = 5
+        publish_config.need_volume_analyser = true
+        publish_config.video_profile_type = 9
+        publish_config.degradationType=2
+        publish_config.stream = canvas.captureStream(10)
+        publish_config.publish_video_id = 'video20'
+        publish_config.publish_streamId_id = 'subscribe_streamId10'
+        publish_config.publish_tag = 'projectionWhiteboard'
+        this.test_controller.Publish(publish_config)
+      }
+  }, 0);
+    navigator.mediaDevices.getDisplayMedia({
+      video: true
+  })
+  .then((stream) => {
+    videoMedia.srcObject = stream;
+    stream.getVideoTracks()[0].onended = async ()=>{
+      //单击停止共享按钮后，触发这个事件
+      if(document.getElementById('video20').name && !this.state.isSharedScreen) {
+        that.test_controller.UnPublish(document.getElementById('video20').name)
+      }
+      }
+  }, error => {
+      console.log("Unable to acquire screen capture", error);
+  });
+  }
   switchExternal = () => {
+    const that = this
     if (!this.state.isWhiteboard) {
       const publish_config = {};
-      this.state.isWhiteboard = true
+      this.setState({
+        isWhiteboard: true
+      })
       this.tabTitlesClick({
         value: 'RMWhiteboard',
         name: 'RM白板'
       }, 'add')
+      if(this.state.isSharedScreen) {
+        this.state.isSharedScreen = false
+        this.setState({
+          
+          screenName: '共享模式'
+        });
+        this.tabTitlesClick('RMScreen', 'delect')
+        if (this.state.isPictureInPicture) {
+          document.exitPictureInPicture()
+        }
+      }
       const width = this.state.whiteboardWidth;
       const height = this.state.whiteboardHeight;
       const canvas = document.createElement('canvas');
       const videoMedia = document.getElementById('manedvideo');
       const cobj = canvas.getContext('2d'); // 获取绘图环境
-      const w = window.screen.width;
-      const h = window.screen.height;
+      const w = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
+      const h = document.getElementById("whiteboardDIV").getBoundingClientRect().top
       canvas.width = width;
       canvas.height = height;
       videoMedia.addEventListener('play', (event) =>{
@@ -3269,7 +3382,7 @@ class Video extends Component {
         loop()
         function loop() {
             if (!$this.paused && !$this.ended) {
-              cobj.drawImage(videoMedia, 0, 0, width, height, 0, 0,width, height,);
+              cobj.drawImage(videoMedia, w, h, width, height, 0, 0,width, height,);
                 setTimeout(loop, 1000 / 10); // drawing at 30fps
             }
         }
@@ -3278,16 +3391,18 @@ class Video extends Component {
           // 代表已经有了进行切流
           publish_config.publish_device = 5
           publish_config.media_type = 1
+          publish_config.degradationType=2
           publish_config.sid = document.getElementById('video20').name
           publish_config.stream = canvas.captureStream(10)
-          publish_config.video_profile_type = 5
+          publish_config.video_profile_type = 9
           this.test_controller.ChangeMediaStream(publish_config);
         } else {
   
           publish_config.media_type = 1
           publish_config.publish_device = 5
           publish_config.need_volume_analyser = true
-          publish_config.video_profile_type = 5
+          publish_config.video_profile_type = 9
+          publish_config.degradationType=2
           publish_config.stream = canvas.captureStream(10)
           publish_config.publish_video_id = 'video20'
           publish_config.publish_streamId_id = 'subscribe_streamId10'
@@ -3300,6 +3415,12 @@ class Video extends Component {
     })
     .then((stream) => {
       videoMedia.srcObject = stream;
+      stream.getVideoTracks()[0].onended = async ()=>{
+        //单击停止共享按钮后，触发这个事件
+        if(document.getElementById('video20').name&&!this.state.isSharedScreen) {
+          that.test_controller.UnPublish(document.getElementById('video20').name)
+        }
+        }
     }, error => {
         console.log("Unable to acquire screen capture", error);
     });
@@ -3518,7 +3639,7 @@ class Video extends Component {
                     id="video20"
                     autoPlay
                     muted={true}
-                    className="video"
+                    className="videoTab"
                   />
                   <audio id="audio20" autoPlay />
                   <label style={{ display: 'none' }} id="feedId20" type="text" />
@@ -3537,7 +3658,7 @@ class Video extends Component {
                     id="video21"
                     autoPlay
                     muted={true}
-                    className="video"
+                    className="videoTab"
                   />
                   <audio id="audio21" autoPlay />
                   <label style={{ display: 'none' }} id="feedId21" type="text" />
@@ -3955,6 +4076,7 @@ class Video extends Component {
             customerList={this.state.customerList}
             clickedOcr={this.state.clickedOcr}
             clickedFacial={this.state.clickedFacial}
+            isWhiteboard={this.state.isWhiteboard}
             {...this.props}
             suspend={this.suspend}
             facialHandleVisibleChange={this.facialHandleVisibleChange}
@@ -3969,7 +4091,7 @@ class Video extends Component {
             invitationClick={this.invitationClick}
             customerFaceClick={this.customerFaceClick}
             ocrClick={this.ocrClick}
-            switchExternal={this.switchExternal}
+            switchExternal={this.switchExternalAge}
             inspection={this.inspection}
             screenSwitching={this.screenSwitching}
           ></Foot>
@@ -4027,19 +4149,19 @@ class Video extends Component {
               <div className="invitationDiv">
               <span className="modalSpan">&nbsp;&nbsp;&nbsp;姓名：</span><span>{this.state.employeeName}</span>
               </div>
-              {
-                this.state.employeeName &&<div className='invitationDiv'>
-                <span className="modalSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><Button className="invitationButton" onClick={this.linkClick}> <img className='invitationImg' src={require("../../assets/img/link.png").default} alt="" />复制会议链接</Button>
-                </div>
-              }
               
+                 <div className='invitationDiv' style={{ height: '27px'}}>
+                <span  className="modalSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                <Button style={{ display: this.state.employeeName? '' : 'none'}} className="invitationButton" onClick={this.linkClick}> <img className='invitationImg' src={require("../../assets/img/link.png").default} alt="" />复制会议链接</Button>
+                </div>
+                
             </div>
-            {
-              this.state.employeeError && <div className='errorClassInvitation'>
-              <img alt="" src={require("../../assets/img/tooltips2_fail.png").default} />
-              <span>{this.state.employeeError}</span>
+            
+            <div className={`errorClassInvitation ${this.state.employeeError ? 'errorClassInvitationColor' : ''}`}>
+              <img style={{ display: this.state.employeeError? '' : 'none'}} alt="" src={require("../../assets/img/tooltips2_fail.png").default} />
+              <span style={{ display: this.state.employeeError? '' : 'none'}}>{this.state.employeeError}</span>
               </div>
-            }
+            
             
           </Modal>
           <Modal title="签字白板" width={600} destroyOnClose={true} closable={false} centered={true} visible={isTranscribing} footer={
@@ -4075,7 +4197,9 @@ class Video extends Component {
               {
                 this.state.speakerList.length > 0 &&
                  <span>
-                   <div>扬声器：</div>
+                   <div>扬声器：
+                     <span className='speakerTitle'>（请更改系统设置）</span>
+                   </div>
               {speaker}
                  </span>
               }