react_hsbc_teller 2.0.54 → 2.0.56

package/packages/demo/demo.js

@@ -1,306 +1,306 @@
-import React, { Component } from "react";
-import HSBC from "../pages/index";
-import Pdf from './pdf.js'
-
-class Demo extends Component {
-  state = {
-    shareMask: false,
-    imRoomId: "",
-    sessionId: "",
-    mtoken: "",
-    roomId: "",
-    // roomId: '',
-    // mtoken: '',
-    // imRoomId: '',
-    // sessionId: '',
-    pdfRendering: false,
-    isVideo: false,
-    tellerAccount: 'wmzTeller',
-    // callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
-    callbackUrl: 'https://aag.wealth-platform.uat.ali.cloud.cn.hsbc/nosaml/api/appointment/wealth/api/v1/appointment/ali/createMeetingRoom',
-    businessNumber: '123',
-    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',
-    // resourcePath:'http://121.196.19.70:8027/',
-    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: '无客户',
-  titleBackground: '#40a9ff',
-  titleColor: '#faad14',
-  microphoneSize: 50,
-  fontSize: 14,
-  fontFamily: 'auto',
-  isTranscribing: false,
-  userSide: 2,
-  meetingDuration: 1, // 会议时长，单位小时
-  recordMode: 1, // 录制模式 1远程录制 2网点录制
-  defaultBranchCode: "BranchCode",// 员工网点缩写
-  customerId: "testCustomerId", //客户号
-  salesBranchCode: 'salesBranchCode', //网点编号(分行号)
-  financialOffice: "defaultOfficeId", // 理财室
-}
-componentWillMount() {
-}
-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)
-    if (val.code == 1) {
-        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('errorType',file)
-}
-shareMaskClick=()=>{
-    console.log(this.state.shareMask)
-
-    if(this.state.shareMask) {
-        this.setState({
-            shareMask: false
-        }, ()=>{
-            console.log(this.state.shareMask)
-        })
-    } else {
-        this.setState({
-            shareMask: true
-        }, ()=>{
-            console.log(this.state.shareMask)
-        })
-    }
-    
-}
-pdfRenderingClick=()=>{
-    if(this.state.pdfRendering) {
-        this.setState({
-            pdfRendering: false
-        })
-    } else {
-        this.setState({
-            pdfRendering: true
-        })
-    }
-}
-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)
-    // setInterval(
-    //     () => {
-    //         console.log('isTranscribing',this.state.isTranscribing)
-    //         this.state.isTranscribing = !this.state.isTranscribing
-    //         this.setState({
-    //             isTranscribing: this.state.isTranscribing
-    //         })
-    //         console.log('isTranscribing',this.state.isTranscribing)
-    //     },
-    //     5000
-    //   );
-}
-joinRoomCallback=(data)=>{
-    console.log('joinRoomCallback', data)
-}
-handleChangeUserSide = (event) => {
-    this.setState({
-        userSide: event.target.value
-    })
-}
-userExit =(val)=>{
-        console.log(val)
-    }
-    staffPermission=(val)=>{
-        return new Promise((resolve, reject) => {
-            setTimeout(() => { // 定时器
-                if(val.staffId && val.password) {
-                    resolve('成功')
-                } else {
-                    reject('失败')
-                }
-              }, 2000)
-            
-          })
-    }
-    componentDidCatch(error, info) {
-        console.log('componentDidCatch')
-        console.error(error, info)
-    }
-  render() {
-    return (
-      <div className="test">
-                {
-                    this.state.isVideo ?
-                    <div>
-                        <HSBC
-                        isOpenSound={true}
-                        shareMask={this.state.shareMask}
-                        pdfRendering={this.state.pdfRendering}
-                        roomId={this.state.roomId} 
-            mtoken={this.state.mtoken}
-            sessionId={this.state.sessionId}
-            imRoomId={this.state.imRoomId}
-            userSide={this.state.userSide}
-            whetherDetectFace={true}
-            whetherDetectLight={true}
-            whetherNeedAsr={true}
-            screenSharedInterval={6}
-                            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}
-                            isWeakSound={true}
-                            roomServerUrl={this.state.roomServerUrl}
-                            baseURL={this.state.baseURL}
-                            resourcePath={this.state.resourcePath}
-                            isTranscribing={this.state.isTranscribing}
-                            meetingDuration={this.state.meetingDuration}
-                            recordMode={this.state.recordMode}
-                            defaultBranchCode={this.state.defaultBranchCode}
-                            customerId={this.state.customerId}
-                            salesBranchCode={this.state.salesBranchCode}
-                            financialOffice={this.state.financialOffice}
-                            onLeaveRoom={this.onLeaveRoom}
-                            getBusinessData={() => { return { businessList: [], businessType: 'REC' } }}
-                            createRoomCallback={this.createRoomCallback}
-                            joinRoomCallback={this.joinRoomCallback}
-                            imgCallback={this.imgCallback}
-                            sfpCallback={()=>{console.log('sfpCallback success')}}
-                            signatureCallback={(msg)=>{console.log('signatureCallback', msg)}}
-                            OnNetworkWeak={(a, b, c)=>{console.log('OnNetworkWeak', a,b,c)}}
-                            userExit={this.userExit}
-                            staffPermission={this.staffPermission}
-                            >
-                                
-                                <Pdf></Pdf>
-                        </HSBC>
-                        <button onClick={this.shareMaskClick.bind(this)}>遮罩层</button>
-                        <button onClick={this.pdfRenderingClick.bind(this)}>{this.state.pdfRendering?'继续':'暂停'}渲染</button>
-                        </div>
-                        :
-                        <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>
-          <div>userSide:  <input type="text" value={this.state.userSide} onChange={this.handleChangeUserSide} /></div>
-          <div>meetingDuration:  <input type="text" value={this.state.meetingDuration} onChange={(e)=>{this.setState({  meetingDuration: e.target.value })}} /></div>
-          <div>recordMode:  <input type="text" value={this.state.recordMode} onChange={(e)=>{this.setState({  recordMode: e.target.value })}} /></div>
-          <div>defaultBranchCode:  <input type="text" value={this.state.defaultBranchCode} onChange={(e)=>{this.setState({  defaultBranchCode: e.target.value })}} /></div>
-          <div>customerId:  <input type="text" value={this.state.customerId} onChange={(e)=>{this.setState({  customerId: e.target.value })}} /></div>
-          <div>salesBranchCode:  <input type="text" value={this.state.salesBranchCode} onChange={(e)=>{this.setState({  salesBranchCode: e.target.value })}} /></div>
-          <div>financialOffice:  <input type="text" value={this.state.financialOffice} onChange={(e)=>{this.setState({  financialOffice: e.target.value })}} /></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>
-    );
-  }
-}
-
-export default Demo;
+import React, { Component } from "react";
+import HSBC from "../pages/index";
+import Pdf from './pdf.js'
+
+class Demo extends Component {
+  state = {
+    shareMask: false,
+    imRoomId: "",
+    sessionId: "",
+    mtoken: "",
+    roomId: "",
+    // roomId: '',
+    // mtoken: '',
+    // imRoomId: '',
+    // sessionId: '',
+    pdfRendering: false,
+    isVideo: false,
+    tellerAccount: 'wmzTeller',
+    // callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
+    callbackUrl: 'https://aag.wealth-platform.uat.ali.cloud.cn.hsbc/nosaml/api/appointment/wealth/api/v1/appointment/ali/createMeetingRoom',
+    businessNumber: '123',
+    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',
+    // resourcePath:'http://121.196.19.70:8027/',
+    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: '无客户',
+  titleBackground: '#40a9ff',
+  titleColor: '#faad14',
+  microphoneSize: 50,
+  fontSize: 14,
+  fontFamily: 'auto',
+  isTranscribing: false,
+  userSide: 2,
+  meetingDuration: 1, // 会议时长，单位小时
+  recordMode: 1, // 录制模式 1远程录制 2网点录制
+  defaultBranchCode: "BranchCode",// 员工网点缩写
+  customerId: "testCustomerId", //客户号
+  salesBranchCode: 'salesBranchCode', //网点编号(分行号)
+  financialOffice: "defaultOfficeId", // 理财室
+}
+componentWillMount() {
+}
+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)
+    if (val.code == 1) {
+        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('errorType',file)
+}
+shareMaskClick=()=>{
+    console.log(this.state.shareMask)
+
+    if(this.state.shareMask) {
+        this.setState({
+            shareMask: false
+        }, ()=>{
+            console.log(this.state.shareMask)
+        })
+    } else {
+        this.setState({
+            shareMask: true
+        }, ()=>{
+            console.log(this.state.shareMask)
+        })
+    }
+    
+}
+pdfRenderingClick=()=>{
+    if(this.state.pdfRendering) {
+        this.setState({
+            pdfRendering: false
+        })
+    } else {
+        this.setState({
+            pdfRendering: true
+        })
+    }
+}
+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)
+    // setInterval(
+    //     () => {
+    //         console.log('isTranscribing',this.state.isTranscribing)
+    //         this.state.isTranscribing = !this.state.isTranscribing
+    //         this.setState({
+    //             isTranscribing: this.state.isTranscribing
+    //         })
+    //         console.log('isTranscribing',this.state.isTranscribing)
+    //     },
+    //     5000
+    //   );
+}
+joinRoomCallback=(data)=>{
+    console.log('joinRoomCallback', data)
+}
+handleChangeUserSide = (event) => {
+    this.setState({
+        userSide: event.target.value
+    })
+}
+userExit =(val)=>{
+        console.log(val)
+    }
+    staffPermission=(val)=>{
+        return new Promise((resolve, reject) => {
+            setTimeout(() => { // 定时器
+                if(val.staffId && val.password) {
+                    resolve('成功')
+                } else {
+                    reject('失败')
+                }
+              }, 2000)
+            
+          })
+    }
+    componentDidCatch(error, info) {
+        console.log('componentDidCatch')
+        console.error(error, info)
+    }
+  render() {
+    return (
+      <div className="test">
+                {
+                    this.state.isVideo ?
+                    <div>
+                        <HSBC
+                        isOpenSound={true}
+                        shareMask={this.state.shareMask}
+                        pdfRendering={this.state.pdfRendering}
+                        roomId={this.state.roomId} 
+            mtoken={this.state.mtoken}
+            sessionId={this.state.sessionId}
+            imRoomId={this.state.imRoomId}
+            userSide={this.state.userSide}
+            whetherDetectFace={true}
+            whetherDetectLight={true}
+            whetherNeedAsr={true}
+            screenSharedInterval={6}
+                            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}
+                            isWeakSound={true}
+                            roomServerUrl={this.state.roomServerUrl}
+                            baseURL={this.state.baseURL}
+                            resourcePath={this.state.resourcePath}
+                            isTranscribing={this.state.isTranscribing}
+                            meetingDuration={this.state.meetingDuration}
+                            recordMode={this.state.recordMode}
+                            defaultBranchCode={this.state.defaultBranchCode}
+                            customerId={this.state.customerId}
+                            salesBranchCode={this.state.salesBranchCode}
+                            financialOffice={this.state.financialOffice}
+                            onLeaveRoom={this.onLeaveRoom}
+                            getBusinessData={() => { return { businessList: [], businessType: 'REC' } }}
+                            createRoomCallback={this.createRoomCallback}
+                            joinRoomCallback={this.joinRoomCallback}
+                            imgCallback={this.imgCallback}
+                            sfpCallback={()=>{console.log('sfpCallback success')}}
+                            signatureCallback={(msg)=>{console.log('signatureCallback', msg)}}
+                            OnNetworkWeak={(a, b, c)=>{console.log('OnNetworkWeak', a,b,c)}}
+                            userExit={this.userExit}
+                            staffPermission={this.staffPermission}
+                            >
+                                
+                                <Pdf></Pdf>
+                        </HSBC>
+                        <button onClick={this.shareMaskClick.bind(this)}>遮罩层</button>
+                        <button onClick={this.pdfRenderingClick.bind(this)}>{this.state.pdfRendering?'继续':'暂停'}渲染</button>
+                        </div>
+                        :
+                        <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>
+          <div>userSide:  <input type="text" value={this.state.userSide} onChange={this.handleChangeUserSide} /></div>
+          <div>meetingDuration:  <input type="text" value={this.state.meetingDuration} onChange={(e)=>{this.setState({  meetingDuration: e.target.value })}} /></div>
+          <div>recordMode:  <input type="text" value={this.state.recordMode} onChange={(e)=>{this.setState({  recordMode: e.target.value })}} /></div>
+          <div>defaultBranchCode:  <input type="text" value={this.state.defaultBranchCode} onChange={(e)=>{this.setState({  defaultBranchCode: e.target.value })}} /></div>
+          <div>customerId:  <input type="text" value={this.state.customerId} onChange={(e)=>{this.setState({  customerId: e.target.value })}} /></div>
+          <div>salesBranchCode:  <input type="text" value={this.state.salesBranchCode} onChange={(e)=>{this.setState({  salesBranchCode: e.target.value })}} /></div>
+          <div>financialOffice:  <input type="text" value={this.state.financialOffice} onChange={(e)=>{this.setState({  financialOffice: e.target.value })}} /></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>
+    );
+  }
+}
+
+export default Demo;

package/packages/demo/index.js

@@ -1,3 +1,3 @@
-import Demo from "./demo";
-
-export default Demo;
+import Demo from "./demo";
+
+export default Demo;