快速入门_湖南轩利_为用户提供一站式的云服务及音视频整体解决方案

入门使用

快速入门

更新时间：2019-11-19

以实现登录企业云通信服务器并加入视频会议为例，介绍如何使用Web SDK进行二次集成开发。

开发环境准备

在开发的过程中请满足如下环境要求。

表1 环境要求
环境和工具名称	版本要求	说明
操作系统	Windows 7专业版	硬件要求： CPU：i5-2400四核 3.1GHz及以上。内存：4GB及以上。
Visual Studio Code	VS Code 1.8	其他IDE工具。
浏览器	Google Chrome 62及以上版本 Mozilla Firefox 57及以上版本 Internet Explorer 11.0	开发者的电脑如果在企业内网，无法直接访问公网环境时，需要在浏览器上设置代理服务器，确保可以访问公网地址。设置方法如下：打开浏览器设置，选择“连接 > 局域网设置 > 代理服务器”，请添加可以访问公网的代理服务器地址。单击“高级”，在“代理设置”的“例外”中添加“localhost.cloudec.huaweicloud.com”。此外，还需要完成HTTPS证书配置，详细请参见https访问配置。
webcomponentsjs	1.0.20	浏览器兼容性组件，下载链接，文件为webcomponentsjs-1.0.20.zip（此组件仅用于Hello World支持多浏览器的演示使用，不作商用目的）。
Web服务器	Tomcat或Apache	在Web服务器中配置Web SDK路径，将SDK和HTML网页设置到对应的Web容器中。
会议云服务的用户帐号	NA	帐号可来源于华为公有云。开通方法请参见“开发前准备”。

注意：

新装windows系统可能缺失必要的系统运库(mfc140.dll, msvcp140.dll, msvcp140d.dll, msvcr120.dll, ucrtbased.dll, vcruntime140d.dll)。

SDK快速集成

SDK快速集成的代码样例可参考index.html完整代码。

解压下载到的“CloudEC_Client_API_Demo_Windows_JS.zip”软件包。
在本地创建名为“Hello_CloudEC”的文件夹，将解压后的“web_server_demo”目录中的sdk和usage文件夹拷贝到“Hello_CloudEC”文件夹下。
将下载到的“webcomponentsjs-1.0.20.zip”软件包解压到“Hello_CloudEC\usage\components”路径下。

图1 本地目录
打开“Visual Studio Code”软件。
单击“文件>打开文件夹”，选择“Hello_CloudEC”文件夹，完成新工程的创建。
在“Visual Studio Code”工程导航栏中右键单击，单击“新建文件”，创建“index.html”文件。

图2 新建文件

图3 创建index.html文件

注意：

“index.html”必须与SDK文件夹在同层次路径下。

在“index.html”的head标签开始处，导入Web SDK和UI控件。

<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-->

											 

初始化系统配置，创建“listeners”对象，注册各个监听事件和对应的回调函数，将listeners对象作为参数，传入createClient，创建Client对象。

<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); 

											 

创建login方法，并在其中调用client.login()接口。

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   

											 

创建joinConference函数，在其中调用client.joinConference()接口，加入已开始会议。创建joinInstanceConf函数，在其中调用client.joinInstantceConf()接口，创建立即会议并加入。

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) {});
}

											 

创建logout方法，并在其中调用client.logout()接口。

		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标签中，调用前述步骤中定义的登录、立即入会和预约入会方法，并且通过使用UIPlugin视频插件显示会议视频。

<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>

											 

基本功能介绍

安装并启动CloudLinkMeetingDeamon守护进程，双击CloudLinkMeetingDeamon_XXX_BASE.exe进入安装向导，根据界面提示完成安装。

图4 安装CloudLinkMeetingDeamon
在Web服务器中配置路径，并重启Web服务。

以Tomcat 8.5.24为例，首先请确认Java运行时环境配置正确，tomcat可以正常启动。在tomcat的conf/server.xml中Host标签下新增Context配置，将路径设置为Hello_CloudEC目录所在位置，重启tomcat。

图5 在Web服务器中配置路径
打开浏览器，在地址栏中输入https://localhost:443，并按Enter键。

说明：

CloudLinkMeetingDeamon进程仅支持一个浏览器连接，不支持同时打开多个浏览器窗口。
输入登录服务器地址、端口，输入登录帐号和密码，完成登录。
点击立即入会，创建并加入会议。

图6 加入会议