add asr wss address input to html

zhaomingwork

2023-05-19 b63e73ae4f5df9d4ed9fb0bee12ac2cc09d7f523

add asr wss address input to html

 funasr/runtime/html5/readme.md

@@ -41,13 +41,12 @@
```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 @@
```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 @@
 

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 @@
    } 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 @@
    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;

        }

    };