Merge pull request #533 from zhaomingwork/for-html5-demo

add asr wss address input to html

funasr/runtime/html5/readme.md

@@ -41,13 +41,12 @@ python ws_server_online.py --certfile server.crt --keyfile server.key  --port 59
 ```shell
 python ws_server_online.py  --port 5921
 ```
-## 3.modify asr address in wsconnecter.js according to your environment
-asr address in wsconnecter.js must be wss, just like
-var Uri = "wss://xxx:xxx/" 
 
-## 4.open browser to access html5 demo
+## 3.open browser to access html5 demo
 https://youraddress:port/static/index.html
 
+## 4.modify asr address in html according to your environment
+asr address in index.html must be wss
 
 
 

funasr/runtime/html5/readme_cn.md

@@ -41,14 +41,12 @@ python ws_server_online.py --certfile server.crt --keyfile server.key  --port 59
 ```shell
 python ws_server_online.py  --port 5921
 ```
-## 3.修改wsconnecter.js里asr接口地址
-wsconnecter.js里配置online asr服务地址路径，这里配置的是wss端口
-var Uri = "wss://xxx:xxx/" 
 
-## 4.浏览器打开地址测试
+## 3.浏览器打开地址测试,请根据实际ip填写
 https://127.0.0.1:1337/static/index.html
 
-
+## 4.修改网页里asr接口地址
+直接网页里修改后，点击开始即可使用。注意h5服务和asr服务需要在同一个服务器上，否则存在跨域问题。
 
 
 ## 自行生成证书

funasr/runtime/html5/static/index.html

@@ -13,10 +13,15 @@
 
 		 
 
-
+        <h1>FunAsr H5 Demo</h1>
 		<div class="div_class_topArea">
-      
+            
 			<div class="div_class_recordControl">
+				asr服务器地址(必填):
+				<br>
+				<input id="wssip" type="text" style=" width: 100%;height:100%" value="wss://127.0.0.1:5921/"/>
+				<br>
+				<br>
 				语音识别结果显示：
 				<br>
 				

funasr/runtime/html5/static/main.js

@@ -32,7 +32,11 @@ btnStop.disabled = true;
  
 var rec_text=""
 var info_div = document.getElementById('info_div');
- 
+
+var now_ipaddress=window.location.href;
+now_ipaddress=now_ipaddress.replace("https://","wss://");   
+now_ipaddress=now_ipaddress.replace("static/index.html","");   
+document.getElementById('wssip').value=now_ipaddress;
 
 // 语音识别结果; 对jsonMsg数据解析,将识别结果附加到编辑框中
 function getJsonMessage( jsonMsg ) {
@@ -59,23 +63,30 @@ function getConnState( connState ) {
 	} else if ( connState === 2 ) {
 		stop();
 		console.log( 'connecttion error' );
-		setTimeout(function(){btnStart.disabled = true;info_div.innerHTML='connecttion error';}, 4000 );
+		 
+		alert("连接地址"+document.getElementById('wssip').value+"失败,请检查asr地址和端口，并确保h5服务和asr服务在同一个域内。或换个浏览器试试。");
+		btnStart.disabled = true;
+		info_div.innerHTML='请点击开始';
 	}
 }
 
 
 // 识别启动、停止、清空操作
 function start() {
-	info_div.innerHTML="正在连接asr服务器，请等待...";
+	
 	// 清除显示
 	clear();
 	//控件状态更新
  	    
-	isRec = true;
-	btnStart.disabled = true;
-	btnStop.disabled = false;
+
 	//启动连接
-	wsconnecter.wsStart();
+	var ret=wsconnecter.wsStart();
+	if(ret==1){
+		isRec = true;
+		btnStart.disabled = true;
+		btnStop.disabled = false;
+	    info_div.innerHTML="正在连接asr服务器，请等待...";
+	}
 }
 
  

funasr/runtime/html5/static/wsconnecter.js

@@ -5,7 +5,8 @@
 /* 2021-2023 by zhaoming,mali aihealthx.com */
 
 function WebSocketConnectMethod( config ) { //定义socket连接方法类
-    var Uri = "wss://30.220.136.139:5921/"  //	var Uri = "wss://30.221.177.46:5921/" //设置wss asr online接口地址 如 wss://X.X.X.X:port/wss/
+
+	
 	var speechSokt;
 	var connKeeperID;
 	
@@ -13,16 +14,28 @@ function WebSocketConnectMethod( config ) { //定义socket连接方法类
 	var stateHandle = config.stateHandle;
 			  
 	this.wsStart = function () {
-		
+		var Uri = document.getElementById('wssip').value; //"wss://111.205.137.58:5821/wss/" //设置wss asr online接口地址 如 wss://X.X.X.X:port/wss/
+ 
+		if(Uri.match(/wss:\S*/))
+		{
+			console.log("Uri"+Uri);
+		}
+		else
+		{
+			alert("请检查wss地址正确性");
+			return 0;
+		}
 		if ( 'WebSocket' in window ) {
 			speechSokt = new WebSocket( Uri ); // 定义socket连接对象
 			speechSokt.onopen = function(e){onOpen(e);}; // 定义响应函数
 			speechSokt.onclose = function(e){onClose(e);};
 			speechSokt.onmessage = function(e){onMessage(e);};
 			speechSokt.onerror = function(e){onError(e);};
+			return 1;
 		}
 		else {
 			alert('当前浏览器不支持 WebSocket');
+			return 0;
 		}
 	};