From b63e73ae4f5df9d4ed9fb0bee12ac2cc09d7f523 Mon Sep 17 00:00:00 2001 From: zhaomingwork Date: Fri, 19 May 2023 06:30:13 +0000 Subject: [PATCH] add asr wss address input to html --- funasr/runtime/html5/readme.md | 7 +++--- funasr/runtime/html5/readme_cn.md | 8 +++---- funasr/runtime/html5/static/index.html | 9 ++++++-- funasr/runtime/html5/static/main.js | 25 ++++++++++++++++------ funasr/runtime/html5/static/wsconnecter.js | 17 +++++++++++++-- 5 files changed, 46 insertions(+), 20 deletions(-) diff --git a/funasr/runtime/html5/readme.md b/funasr/runtime/html5/readme.md index 5dd462b81..e60d5889a 100644 --- a/funasr/runtime/html5/readme.md +++ b/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 diff --git a/funasr/runtime/html5/readme_cn.md b/funasr/runtime/html5/readme_cn.md index d7fb1aa20..50376979d 100644 --- a/funasr/runtime/html5/readme_cn.md +++ b/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服务需要在同一个服务器上，否则存在跨域问题。 ## 自行生成证书 diff --git a/funasr/runtime/html5/static/index.html b/funasr/runtime/html5/static/index.html index 1cdc7d7d3..c0aae05eb 100644 --- a/funasr/runtime/html5/static/index.html +++ b/funasr/runtime/html5/static/index.html @@ -13,10 +13,15 @@ - +

FunAsr H5 Demo

- +
+ asr服务器地址(必填): +
+ +
+
语音识别结果显示：
diff --git a/funasr/runtime/html5/static/main.js b/funasr/runtime/html5/static/main.js index 5f6bb108b..eaa257ad0 100644 --- a/funasr/runtime/html5/static/main.js +++ b/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服务器，请等待..."; + } } diff --git a/funasr/runtime/html5/static/wsconnecter.js b/funasr/runtime/html5/static/wsconnecter.js index 594652d7f..82d751b5c 100644 --- a/funasr/runtime/html5/static/wsconnecter.js +++ b/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; } };