add html5 local access asr service directly (#654)

funasr/runtime/html5/readme.md

@@ -51,8 +51,18 @@ https://127.0.0.1:1337/static/index.html
 # 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

@@ -21,14 +21,35 @@
 				<br>
 				<input id="wssip" type="text" style=" width: 100%;height:100%" value="wss://127.0.0.1:10095/"/>
 				<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 style="border:2px solid #ccc;">
+				 <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> 
+      <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 @@ btnStart.disabled = true;
 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 @@ function getAsrMode(){
 		    
 
            }
+            if(isfilemode)
+			{
+				item= "offline";
+			}
 		   console.log("asr mode"+item);
+		   
 		   return item;
 }
 		   
@@ -78,6 +189,18 @@ function getJsonMessage( jsonMsg ) {
 	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 getJsonMessage( jsonMsg ) {
 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,36 +222,52 @@ function getConnState( connState ) {
 		 
 		alert("连接地址"+document.getElementById('wssip').value+"失败,请检查asr地址和端口，并确保h5服务和asr服务在同一个域内。或换个浏览器试试。");
 		btnStart.disabled = true;
-
+		isconnected=0;
+ 
 		info_div.innerHTML='请点击连接';
 	}
 }
 
 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;
 }
 
  
@@ -152,21 +288,26 @@ function stop() {
 		}
 	   wsconnecter.wsSend( JSON.stringify(request) ,false);
  
-	 
-	
+	  
 	
+	 
 
-	
+	 //isconnected=0;
 	// 控件状态更新
+	
 	isRec = false;
-    info_div.innerHTML="请等候...";
-	btnStop.disabled = true;
-	setTimeout(function(){
-		console.log("call stop ws!");
-		wsconnecter.wsStop();
+    info_div.innerHTML="发送完数据,请等候,正在识别...";
+
+   if(isfilemode==false){
+	    btnStop.disabled = true;
 		btnStart.disabled = true;
 		btnConnect.disabled=false;
+	  setTimeout(function(){
+		console.log("call stop ws!");
+		wsconnecter.wsStop();
+        isconnected=0;
 		info_div.innerHTML="请点击连接";}, 3000 );
+	   
 	rec.stop(function(blob,duration){
   
 		console.log(blob);
@@ -189,8 +330,9 @@ function stop() {
 	},function(errMsg){
 		console.log("errMsg: " + errMsg);
 	});
+   }
     // 停止连接
-	
+ 
     
 
 }

funasr/runtime/html5/static/wsconnecter.js

@@ -15,8 +15,7 @@ function WebSocketConnectMethod( config ) { //定义socket连接方法类
 			  
 	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 @@ function WebSocketConnectMethod( config ) { //定义socket连接方法类
 			alert("请检查wss地址正确性");
 			return 0;
 		}
+ 
 		if ( 'WebSocket' in window ) {
 			speechSokt = new WebSocket( Uri ); // 定义socket连接对象
 			speechSokt.onopen = function(e){onOpen(e);}; // 定义响应函数
@@ -80,6 +80,7 @@ function WebSocketConnectMethod( config ) { //定义socket连接方法类
 		speechSokt.send( JSON.stringify(request) );
 		console.log("连接成功");
 		stateHandle(0);
+		isconnected=1;
 	}
 	
 	function onClose( e ) {
@@ -92,9 +93,11 @@ function WebSocketConnectMethod( config ) { //定义socket连接方法类
 	}
 	
 	function onError( e ) {
+		isconnected=-1;
 		info_div.innerHTML="连接"+e;
 		console.log(e);
 		stateHandle(2);
+		
 	}