智慧服务，成就美好体验 项目咨询

主页 > 服务与支持 > 开发平台 > 客户端SDK参考 > Web SDK > 附录 index.html完整代码

入门使用

index.html完整代码

更新时间：2019-11-20

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
<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>