From 9faddba623f8fdd7cc5c996ef0bb859ccbacb575 Mon Sep 17 00:00:00 2001
From: zhifu gao <zhifu.gzf@alibaba-inc.com>
Date: 星期三, 17 五月 2023 00:07:57 +0800
Subject: [PATCH] Merge pull request #515 from zhaomingwork/for-html5-demo

---
 funasr/runtime/html5/readme.md    |   54 +++++++++---------
 funasr/runtime/html5/readme_cn.md |  109 ++++++++++++++++++++++++++++++++++++
 2 files changed, 136 insertions(+), 27 deletions(-)

diff --git a/funasr/runtime/html5/readme.md b/funasr/runtime/html5/readme.md
index 612dc20..5dd462b 100644
--- a/funasr/runtime/html5/readme.md
+++ b/funasr/runtime/html5/readme.md
@@ -9,70 +9,70 @@
 ```
 
 ### javascript
-[html5褰曢煶](https://github.com/xiangyuecn/Recorder)
+[html5 recorder.js](https://github.com/xiangyuecn/Recorder)
 ```shell
 Recorder 
 ```
 
-### demo椤甸潰濡備笅
-![img](https://github.com/alibaba-damo-academy/FunASR/blob/for-html5-demo/funasr/runtime/html5/demo.gif)
+### demo
+![img](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/html5/demo.gif)
 
-## 涓ょws_server_online杩炴帴妯″紡
-### 1)鐩存帴杩炴帴妯″紡锛屾祻瑙堝櫒https楹﹀厠椋� --> html5 demo鏈嶅姟 --> js wss鎺ュ彛 --> wss asr online srv(璇佷功鐢熸垚璇峰線鍚庣湅)
+## wss or ws protocol for ws_server_online
+1) wss: browser microphone data --> html5 demo server --> js wss api --> wss asr online srv #for certificate generation just look back
 
-### 2)nginx涓浆锛屾祻瑙堝櫒https楹﹀厠椋� --> html5 demo鏈嶅姟 --> js wss鎺ュ彛 --> nginx鏈嶅姟 --> ws asr online srv
+2) ws: browser microphone data  --> html5 demo server --> js wss api --> nginx wss server --> ws asr online srv
 
-## 1.html5 demo鏈嶅姟鍚姩
-### 鍚姩html5鏈嶅姟锛岄渶瑕乻sl璇佷功(鑷繁鐢熸垚璇峰線鍚庣湅)
+## 1.html5 demo start
+### ssl certificate is required
 
 ```shell
 usage: h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE]
                    [--keyfile KEYFILE]
 python h5Server.py --port 1337
 ```
-## 2.鍚姩ws or wss asr online srv
-[鍏蜂綋璇风湅online asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket)
-online asr鎻愪緵涓ょws鍜寃ss妯″紡锛寃ss妯″紡鍙互鐩存帴鍚姩锛屾棤闇�nginx涓浆銆傚惁鍒欓渶瑕侀�氳繃nginx灏唚ss杞彂鍒拌online asr鐨剋s绔彛涓�
-### wss鏂瑰紡
+## 2.asr online srv start
+[detail for online asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket)
+Online asr provides wss or ws way. if started in ws way, nginx is required for relay.
+### wss way, ssl certificate is required
 ```shell
 python ws_server_online.py --certfile server.crt --keyfile server.key  --port 5921
 ```
-### ws鏂瑰紡
+### ws way
 ```shell
 python ws_server_online.py  --port 5921
 ```
-## 3.淇敼wsconnecter.js閲宎sr鎺ュ彛鍦板潃
-wsconnecter.js閲岄厤缃畂nline asr鏈嶅姟鍦板潃璺緞锛岃繖閲岄厤缃殑鏄痺ss绔彛
+## 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.娴忚鍣ㄦ墦寮�鍦板潃娴嬭瘯
-https://127.0.0.1:1337/static/index.html
+## 4.open browser to access html5 demo
+https://youraddress:port/static/index.html
 
 
 
 
-## 鑷鐢熸垚璇佷功
-鐢熸垚璇佷功(娉ㄦ剰杩欑璇佷功骞朵笉鑳借鎵�鏈夋祻瑙堝櫒璁ゅ彲锛岄儴鍒嗘墜鍔ㄦ巿鏉冨彲浠ヨ闂�,鏈�濂戒娇鐢ㄥ叾浠栬璇佺殑瀹樻柟ssl璇佷功)
+## certificate generation by yourself
+generated certificate may not suitable for all browsers due to security concerns. you'd better buy or download an authenticated ssl certificate from authorized agency.
 
 ```shell
-### 1)鐢熸垚绉侀挜锛屾寜鐓ф彁绀哄～鍐欏唴瀹�
+### 1) Generate a private key
 openssl genrsa -des3 -out server.key 1024
  
-### 2)鐢熸垚csr鏂囦欢 锛屾寜鐓ф彁绀哄～鍐欏唴瀹�
+### 2) Generate a csr file
 openssl req -new -key server.key -out server.csr
  
-### 鍘绘帀pass
+### 3) Remove pass
 cp server.key server.key.org 
 openssl rsa -in server.key.org -out server.key
  
-### 鐢熸垚crt鏂囦欢锛屾湁鏁堟湡1骞达紙365澶╋級
+### 4) Generated a crt file, valid for 1 year
 openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
 ```
 
-## nginx閰嶇疆璇存槑(浜嗚В鐨勫彲浠ヨ烦杩�)
-h5鎵撳紑楹﹀厠椋庨渶瑕乭ttps鍗忚锛屽悓鏃跺悗绔殑asr websocket涔熷繀椤绘槸wss鍗忚锛屽鏋淸online asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket)浠s鏂瑰紡杩愯锛屾垜浠彲浠ラ�氳繃nginx閰嶇疆瀹炵幇wss鍗忚鍒皐s鍗忚鐨勮浆鎹€��
-
-### nginx杞彂閰嶇疆绀轰緥
+## nginx configuration (you can skip it if you known)
+https and wss protocol are required by browsers when want to open microphone and websocket.  
+if [online asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket) run in ws way, you should use nginx to convert wss to ws.
+### nginx wss->ws configuration example
 ```shell
 events {                                                                                                            [0/1548]
     worker_connections  1024;
diff --git a/funasr/runtime/html5/readme_cn.md b/funasr/runtime/html5/readme_cn.md
new file mode 100644
index 0000000..612dc20
--- /dev/null
+++ b/funasr/runtime/html5/readme_cn.md
@@ -0,0 +1,109 @@
+# online asr demo for html5
+
+## requirement
+### python
+```shell
+flask
+gevent
+pyOpenSSL
+```
+
+### javascript
+[html5褰曢煶](https://github.com/xiangyuecn/Recorder)
+```shell
+Recorder 
+```
+
+### demo椤甸潰濡備笅
+![img](https://github.com/alibaba-damo-academy/FunASR/blob/for-html5-demo/funasr/runtime/html5/demo.gif)
+
+## 涓ょws_server_online杩炴帴妯″紡
+### 1)鐩存帴杩炴帴妯″紡锛屾祻瑙堝櫒https楹﹀厠椋� --> html5 demo鏈嶅姟 --> js wss鎺ュ彛 --> wss asr online srv(璇佷功鐢熸垚璇峰線鍚庣湅)
+
+### 2)nginx涓浆锛屾祻瑙堝櫒https楹﹀厠椋� --> html5 demo鏈嶅姟 --> js wss鎺ュ彛 --> nginx鏈嶅姟 --> ws asr online srv
+
+## 1.html5 demo鏈嶅姟鍚姩
+### 鍚姩html5鏈嶅姟锛岄渶瑕乻sl璇佷功(鑷繁鐢熸垚璇峰線鍚庣湅)
+
+```shell
+usage: h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE]
+                   [--keyfile KEYFILE]
+python h5Server.py --port 1337
+```
+## 2.鍚姩ws or wss asr online srv
+[鍏蜂綋璇风湅online asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket)
+online asr鎻愪緵涓ょws鍜寃ss妯″紡锛寃ss妯″紡鍙互鐩存帴鍚姩锛屾棤闇�nginx涓浆銆傚惁鍒欓渶瑕侀�氳繃nginx灏唚ss杞彂鍒拌online asr鐨剋s绔彛涓�
+### wss鏂瑰紡
+```shell
+python ws_server_online.py --certfile server.crt --keyfile server.key  --port 5921
+```
+### ws鏂瑰紡
+```shell
+python ws_server_online.py  --port 5921
+```
+## 3.淇敼wsconnecter.js閲宎sr鎺ュ彛鍦板潃
+wsconnecter.js閲岄厤缃畂nline asr鏈嶅姟鍦板潃璺緞锛岃繖閲岄厤缃殑鏄痺ss绔彛
+var Uri = "wss://xxx:xxx/" 
+
+## 4.娴忚鍣ㄦ墦寮�鍦板潃娴嬭瘯
+https://127.0.0.1:1337/static/index.html
+
+
+
+
+## 鑷鐢熸垚璇佷功
+鐢熸垚璇佷功(娉ㄦ剰杩欑璇佷功骞朵笉鑳借鎵�鏈夋祻瑙堝櫒璁ゅ彲锛岄儴鍒嗘墜鍔ㄦ巿鏉冨彲浠ヨ闂�,鏈�濂戒娇鐢ㄥ叾浠栬璇佺殑瀹樻柟ssl璇佷功)
+
+```shell
+### 1)鐢熸垚绉侀挜锛屾寜鐓ф彁绀哄～鍐欏唴瀹�
+openssl genrsa -des3 -out server.key 1024
+ 
+### 2)鐢熸垚csr鏂囦欢 锛屾寜鐓ф彁绀哄～鍐欏唴瀹�
+openssl req -new -key server.key -out server.csr
+ 
+### 鍘绘帀pass
+cp server.key server.key.org 
+openssl rsa -in server.key.org -out server.key
+ 
+### 鐢熸垚crt鏂囦欢锛屾湁鏁堟湡1骞达紙365澶╋級
+openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
+```
+
+## nginx閰嶇疆璇存槑(浜嗚В鐨勫彲浠ヨ烦杩�)
+h5鎵撳紑楹﹀厠椋庨渶瑕乭ttps鍗忚锛屽悓鏃跺悗绔殑asr websocket涔熷繀椤绘槸wss鍗忚锛屽鏋淸online asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket)浠s鏂瑰紡杩愯锛屾垜浠彲浠ラ�氳繃nginx閰嶇疆瀹炵幇wss鍗忚鍒皐s鍗忚鐨勮浆鎹€��
+
+### nginx杞彂閰嶇疆绀轰緥
+```shell
+events {                                                                                                            [0/1548]
+    worker_connections  1024;
+    accept_mutex on;
+  }
+http {
+  error_log  error.log;
+  access_log  access.log;
+  server {
+
+    listen 5921 ssl http2;  # nginx listen port for wss
+    server_name www.test.com;
+
+    ssl_certificate     /funasr/server.crt;
+    ssl_certificate_key /funasr/server.key;
+    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
+    ssl_ciphers         HIGH:!aNULL:!MD5;
+
+    location /wss/ {
+
+
+      proxy_pass http://127.0.0.1:1111/;  # asr online model ws address and port
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_read_timeout 600s;
+
+    }
+  }
+```
+
+## Acknowledge
+1. This project is maintained by [FunASR community](https://github.com/alibaba-damo-academy/FunASR).
+2. We acknowledge [AiHealthx](http://www.aihealthx.com/) for contributing the html5 demo.
\ No newline at end of file

--
Gitblit v1.9.1