add html5 local access asr service directly (#654)

zhaomingwork

2023-06-20 369f2ff8838569351c26d909407b497ab16d3bcf

add html5 local access asr service directly (#654)

 funasr/runtime/html5/readme.md

@@ -51,8 +51,18 @@
# https://30.220.136.139:1337/static/index.html

```



### modify asr address in html according to your environment

asr address in index.html must be wss

### open browser to open html5 file directly without h5Server

you can run html5 client by just clicking the index.html file directly in your computer.

1) lauch asr service without ssl, it must be in ws mode as ssl protocol will prohibit such access.

2) copy whole directory /funasr/runtime/html5/static to your computer

3) open /funasr/runtime/html5/static/index.html by browser

4) enter asr service ws address and connect





```shell



```

 




## Acknowledge


 funasr/runtime/html5/static/index.html

@@ -23,12 +23,33 @@
                <br>

                <br>

                <div style="border:2px solid #ccc;">

                选择录音模式:<br/>

    
        <label><input name="recoder_mode" onclick="on_recoder_mode_change()" type="radio" value="mic" checked="true"/>麦克风 </label>&nbsp;&nbsp;

        <label><input name="recoder_mode" onclick="on_recoder_mode_change()" type="radio" value="file" />文件 </label> 


                </div>

				
                <br>

                 <div id="mic_mode_div" style="border:2px solid #ccc;display:block;">

                选择asr模型模式:<br/>

    
      <label><input name="asr_mode" type="radio" value="2pass" checked="true"/>2pass </label>&nbsp;&nbsp;

      <label><input name="asr_mode" type="radio" value="online" />online </label>&nbsp;&nbsp;

      <label><input name="asr_mode" type="radio" value="offline" />offline </label> 



                </div>

				
                <div id="rec_mode_div" style="border:2px solid #ccc;display:none;">

		 
    
                  <input type="file" id="upfile">



                </div>

                <br>

		
				
			 
                语音识别结果显示：

                <br>

                


 funasr/runtime/html5/static/main.js

@@ -32,15 +32,121 @@
btnConnect= document.getElementById('btnConnect');

btnConnect.onclick = start;

 

var rec_text="";

var offline_text="";

var rec_text="";  // for online rec asr result

var offline_text=""; // for offline rec asr result

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;

var upfile = document.getElementById('upfile');

 

 


var isfilemode=false;  // if it is in file mode

var file_data_array;  // array to save file data

var isconnected=0;    // for file rec, 0 is not begin, 1 is connected, -1 is error

var totalsend=0;

 
upfile.onchange = function () {

　　　　　　var len = this.files.length;  
            for(let i = 0; i < len; i++) {

                let fileAudio = new FileReader();

                fileAudio.readAsArrayBuffer(this.files[i]);  
                fileAudio.onload = function() {

                 var audioblob= fileAudio.result;

                 file_data_array=audioblob;

                 console.log(audioblob);

                 btnConnect.disabled = false;

                 info_div.innerHTML='请点击连接进行识别';

               
                }

　　　　　　　　　　fileAudio.onerror = function(e) {

　　　　　　　　　　　　console.log('error' + e);

　　　　　　　　　　}

            }

        }



function play_file()

{

          var audioblob=new Blob( [ new Uint8Array(file_data_array)] , {type :"audio/wav"});

          var audio_record = document.getElementById('audio_record');

          audio_record.src =  (window.URL||webkitURL).createObjectURL(audioblob); 
          audio_record.controls=true;

          audio_record.play(); 
}

function start_file_send()

{

        sampleBuf=new Int16Array( file_data_array );

 
        var chunk_size=960; // for asr chunk_size [5, 10, 5]

 


 
		
 
        while(sampleBuf.length>=chunk_size){

			
            sendBuf=sampleBuf.slice(0,chunk_size);

            totalsend=totalsend+sampleBuf.length;

            sampleBuf=sampleBuf.slice(chunk_size,sampleBuf.length);

            wsconnecter.wsSend(sendBuf,false);

 
		 
        }

 
        stop();



 


}

function start_file_offline()

{             
                 console.log("start_file_offline",isconnected);  
              if(isconnected==-1)

              {

                  return;

              }

              if(isconnected==0){

			   
                setTimeout(start_file_offline, 1000);

                return;

              }

            start_file_send();

 
	         


		 
}

	
function on_recoder_mode_change()

{

            var item = null;

            var obj = document.getElementsByName("recoder_mode");

            for (var i = 0; i < obj.length; i++) { //遍历Radio 
                if (obj[i].checked) {

                    item = obj[i].value;  
                    break;

                }

		    


           }

            if(item=="mic")

            {

                document.getElementById("mic_mode_div").style.display = 'block';

                document.getElementById("rec_mode_div").style.display = 'none';

 
                btnConnect.disabled=false;

                isfilemode=false;

            }

            else

            {

                document.getElementById("mic_mode_div").style.display = 'none';

                document.getElementById("rec_mode_div").style.display = 'block';

                btnConnect.disabled = true;

                isfilemode=true;

                info_div.innerHTML='请点击选择文件';

			    
	 
            }

}

function getAsrMode(){



            var item = null;

@@ -53,7 +159,12 @@
            



           }

            if(isfilemode)

            {

                item= "offline";

            }

           console.log("asr mode"+item);

		   
           return item;

}

           

@@ -78,6 +189,18 @@
    varArea.value=rec_text;

    console.log( "offline_text: " + asrmodel+","+offline_text);

    console.log( "rec_text: " + rec_text);

    if (isfilemode==true){

        console.log("call stop ws!");

        play_file();

        wsconnecter.wsStop();

        
        info_div.innerHTML="请点击连接";

        isconnected=0;

        btnStart.disabled = true;

        btnStop.disabled = true;

        btnConnect.disabled=false;

    }

	
     

 

}

@@ -86,14 +209,11 @@
function getConnState( connState ) {

    if ( connState === 0 ) {

 

        //rec.open( function(){

        //    rec.start();

        //    console.log("开始录音");

 

        //});

        btnStart.disabled = false;

        btnConnect.disabled = true;

        info_div.innerHTML='连接成功!请点击开始';

        if (isfilemode==true){

            info_div.innerHTML='请耐心等待,大文件等待时间更长';

        }

    } else if ( connState === 1 ) {

        //stop();

    } else if ( connState === 2 ) {

@@ -102,6 +222,7 @@
         

        alert("连接地址"+document.getElementById('wssip').value+"失败,请检查asr地址和端口，并确保h5服务和asr服务在同一个域内。或换个浏览器试试。");

        btnStart.disabled = true;

        isconnected=0;



        info_div.innerHTML='请点击连接';

    }

@@ -109,29 +230,44 @@


function record()

{

 
         rec.open( function(){

         rec.start();

         console.log("开始");

         btnStart.disabled = true;

         });

 
}



 


// 识别启动、停止、清空操作

function start() {

    

    // 清除显示

    clear();

    //控件状态更新

 	    
     console.log("isfilemode"+isfilemode+","+isconnected);

    info_div.innerHTML="正在连接asr服务器，请等待...";

    //启动连接

    var ret=wsconnecter.wsStart();

    if(ret==1){

        isRec = true;

        btnStart.disabled = true;

        btnStart.disabled = false;

        btnStop.disabled = false;

        btnConnect.disabled=true;

        if (isfilemode)

        {

                 console.log("start file now");

                 start_file_offline();



                 btnStart.disabled = true;

                 btnStop.disabled = true;

                 btnConnect.disabled = true;

    }

        return 1;

    }

    return 0;

}



 

@@ -156,17 +292,22 @@
    

    



	
     //isconnected=0;

    // 控件状态更新

	
    isRec = false;

    info_div.innerHTML="请等候...";

    info_div.innerHTML="发送完数据,请等候,正在识别...";



   if(isfilemode==false){

    btnStop.disabled = true;

        btnStart.disabled = true;

        btnConnect.disabled=false;

    setTimeout(function(){

        console.log("call stop ws!");

        wsconnecter.wsStop();

        btnStart.disabled = true;

        btnConnect.disabled=false;

        isconnected=0;

        info_div.innerHTML="请点击连接";}, 3000 );

	   
    rec.stop(function(blob,duration){

  

        console.log(blob);

@@ -189,6 +330,7 @@
    },function(errMsg){

        console.log("errMsg: " + errMsg);

    });

   }

    // 停止连接

    

    


 funasr/runtime/html5/static/wsconnecter.js

@@ -15,8 +15,7 @@
              

    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*/))

        if(Uri.match(/wss:\S*|ws:\S*/))

        {

            console.log("Uri"+Uri);

        }

@@ -25,6 +24,7 @@
            alert("请检查wss地址正确性");

            return 0;

        }

 
        if ( 'WebSocket' in window ) {

            speechSokt = new WebSocket( Uri ); // 定义socket连接对象

            speechSokt.onopen = function(e){onOpen(e);}; // 定义响应函数

@@ -80,6 +80,7 @@
        speechSokt.send( JSON.stringify(request) );

        console.log("连接成功");

        stateHandle(0);

        isconnected=1;

    }

    

    function onClose( e ) {

@@ -92,9 +93,11 @@
    }

    

    function onError( e ) {

        isconnected=-1;

        info_div.innerHTML="连接"+e;

        console.log(e);

        stateHandle(2);

		
    }