更新時間:2019-11-19
以實現(xiàn)登錄企業(yè)云通信服務器并加入視頻會議為例,介紹如何使用Web SDK進行二次集成開發(fā)。
在開發(fā)的過程中請滿足如下環(huán)境要求。
環(huán)境和工具名稱 |
版本要求 |
說明 |
---|---|---|
操作系統(tǒng) |
Windows 7專業(yè)版 |
硬件要求:
|
Visual Studio Code |
VS Code 1.8 |
其他IDE工具。 |
瀏覽器 |
|
開發(fā)者的電腦如果在企業(yè)內(nèi)網(wǎng),無法直接訪問公網(wǎng)環(huán)境時,需要在瀏覽器上設(shè)置代理服務器,確保可以訪問公網(wǎng)地址。設(shè)置方法如下:
此外,還需要完成HTTPS證書配置,詳細請參見https訪問配置。 |
webcomponentsjs |
1.0.20 |
瀏覽器兼容性組件,下載鏈接,文件為webcomponentsjs-1.0.20.zip(此組件僅用于Hello World支持多瀏覽器的演示使用,不作商用目的)。 |
Web服務器 |
Tomcat或Apache |
在Web服務器中配置Web SDK路徑,將SDK和HTML網(wǎng)頁設(shè)置到對應的Web容器中。 |
會議云服務的用戶帳號 |
NA |
帳號可來源于華為公有云。開通方法請參見“開發(fā)前準備”。 |
新裝windows系統(tǒng)可能缺失必要的系統(tǒng)運庫(mfc140.dll, msvcp140.dll, msvcp140d.dll, msvcr120.dll, ucrtbased.dll, vcruntime140d.dll)。
SDK快速集成的代碼樣例可參考index.html完整代碼。
“index.html”必須與SDK文件夾在同層次路徑下。
<html> <head> <meta charset="UTF-8"> <script src="./sdk/CloudEC-SDK.js" /></script> <!--begin:webcomponentsts init--> <script> if (!window.customElements) { document.write('<!--'); } else { window.ShadyDOM = { force: true }; window.customElements.forcePolyfill = true; } </script> <script src="./usage/components/webcomponentsjs-1.0.20/custom-elements-es5-adapter.js"></script> <!--! do not remove --> <script src="./usage/components/webcomponentsjs-1.0.20/webcomponents-loader.js"></script> <!--end:webcomponentsts init--> |
<script> var options = { domain: "localhost.cloudec.huaweicloud.com", isWSS: 1, confCtrlProtocol: 1, isTlsSupport: 0, uiPluginAppDisplayName : "eSDK-Desktop", uiPluginlLanguage : 0, uiPluginResourcesPath: "", uiPluginUserFilesPath:"", uiPluginHasFrameInfo:0, uiPluginFrameInfoX:0, uiPluginFrameInfoY:0, uiPluginFrameInfoWidth:1280, uiPluginFrameInfoHeight:720, uiPluginHasParentInfo:0, uiPluginParentInfoIsNeedAttach:0, uiPluginParentInfoXOffsetRate:0, uiPluginParentInfoYOffsetRate:0, uiPluginHideTopToolBar:0, uiPluginHideBottomToolBar:0, uiPluginHideInviteButton:1, uiPluginHideAttendeesButton:1, uiPluginHideShareButton:1, uiPluginDataHideInviteButton:1, uiPluginDataHideAttendeesButton:1, uiPluginDataHideRequestRemotecontrolButton:1, } cloudEC.configure(options); var listeners = { onConfConnected: function (ret) { alert("the conference is connected" + JSON.stringify(ret)) }, onError: function (ret) { alert("wowo,error is coming!" + JSON.stringify(ret)) console.error(JSON.stringify(ret)) } //......other events } var client = cloudEC.createClient(listeners); |
function login() { var account = document.getElementById("name").value; var passwd = document.getElementById("passwd").value; var serverAddress = document.getElementById("svr_addr").value; var serverPort = document.getElementById("svr_port").value; //0: account auth type, 1: third token auth type client.login(0, { 'account': account, 'passwd': passwd }, { 'serverAddress': serverAddress, 'serverPort': parseInt(serverPort) }, function callback(evt) { if (!evt.result) { alert("login failed errorCode:" + evt.info.errorCode + "errorInfo:" + evt.info.errorInfo) } else { alert("good,to do something here for login success") var userInfo = "<dl><dt>USER INFO</dt><dd>user account:" + evt.info.userAccount + "</dd><dd>SIP number:" + evt.info.sipAccount + "</dd><dd>short number:" + evt.info.shortNumber + "</dd><dd>login time" + evt.info.loginTime + "</dd>" document.getElementById("userinfo").innerHTML = userInfo; //change UI to login successful document.getElementById("login").style.display = "none"; document.getElementById("usage").style.display = "block"; } }); }//end login |
function joinConference() { var joinConfParam = { conferenceId: document.getElementById("conferenceId").value, accessNumber: document.getElementById("accessNumber").value, confPasswd: document.getElementById("confPasswd").value } client.joinConference(joinConfParam, function callback(evt) { console.info(JSON.stringify(evt.info)) }); } function joinInstanceConf() { var attendeeInfo = document.getElementById("member_list").value; var array = attendeeInfo.split(","); var attendees = new Array(); for (var i = 0; i < array.length; i++) { attendees[i] = { number: array[i], name: "", smsPhone: "", email: "", autoInvite: 1, role: 0 }; } var instanceConfParam = { isVideo: 1, language: 1, attendees: attendees, isHdConf: 1} client.joinInstanceConf(instanceConfParam, function callback(ret) {}); } |
function logout() { alert("hi i am going now!") client.logout(); //change UI to login document.getElementById("login").style.display = "block"; document.getElementById("usage").style.display = "none"; } </script> </head> |
<body> <h2>CloudEC JS SDK Hello World</h2> <div id="tab-content1" class="tab-content"> <fieldset> <legend>User login</legend> <div id="login"> server address: <input type="text" id="svr_addr" value="bmeeting.huaweicloud.com" /> port: <input type="text" id="svr_port" value="443" /> username: <input type="text" id="name" value="" /> password: <input type="password" id="passwd" value="" /> <button onclick="login()">login</button> </div> </fieldset> </div> <div id="usage" style="display:none"> <fieldset> <legend>User logout</legend> <div id="userinfo"></div> <button onclick="logout()">logout</button> </fieldset> <fieldset> <legend>Instance conference</legend> members list: <input type="text" id="member_list" value="" /> <button onclick="joinInstanceConf()">instance conference</button> </fieldset> <fieldset> <legend>Book conference</legend> conference ID: <input type="text" id="conferenceId" value="" /> access code: <input type="text" id="accessNumber" value="+991117" /> conference password: <input type="text" id="confPasswd" value="" /> <button onclick="joinConference()">access reserved conference</button> </fieldset> </div> </body> </html> |
以Tomcat 8.5.24為例,首先請確認Java運行時環(huán)境配置正確,tomcat可以正常啟動。在tomcat的conf/server.xml中Host標簽下新增Context配置,將路徑設(shè)置為Hello_CloudEC目錄所在位置,重啟tomcat。
CloudLinkMeetingDeamon進程僅支持一個瀏覽器連接,不支持同時打開多個瀏覽器窗口。