html5 docs

funasr/runtime/html5/h5Server.py

@@ -37,13 +37,13 @@ parser.add_argument("--port",
 
 parser.add_argument("--certfile",
                     type=str,
-                    default="server.crt",
+                    default="./ssl_key/server.crt",
                     required=False,
                     help="certfile for ssl")
                     
 parser.add_argument("--keyfile",
                     type=str,
-                    default="server.key",
+                    default="./ssl_key/server.key",
                     required=False,
                     help="keyfile for ssl")
 

funasr/runtime/html5/readme.md

@@ -1,107 +1,51 @@
-# online asr demo for html5
+# Html5 server for asr service
 
-## requirement
+## Requirement
 ### python
 ```shell
-flask
-gevent
-pyOpenSSL
+pip install flask
+# pip install gevent (Optional)
+# pip install pyOpenSSL (Optional)
 ```
 
-### javascript
+### javascript (Optional)
 [html5 recorder.js](https://github.com/xiangyuecn/Recorder)
 ```shell
 Recorder 
 ```
 
-### demo
-![img](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/html5/demo.gif)
+## demo
+<div align="center"><img src="./demo.gif" width="150"/> </div>
 
-## 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) ws: browser microphone data  --> html5 demo server --> js wss api --> nginx wss server --> ws asr online srv
-
-## 1.html5 demo start
-### ssl certificate is required
+## Steps
+### Html5 demo
 
 ```shell
-usage: h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE]
-                   [--keyfile KEYFILE]
-python h5Server.py --port 1337
+usage: h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE] [--keyfile KEYFILE]
 ```
-## 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
+`e.g.`
 ```shell
-python ws_server_online.py --certfile server.crt --keyfile server.key  --port 5921
+python h5Server.py --host 0.0.0.0 --port 1337 
 ```
-### ws way
+### asr service
+[detail for asr]((../python/websocket))
+
+`Tips:` asr service and html5 service should be deployed on the same device.
 ```shell
-python ws_server_online.py  --port 5921
+cd ../python/websocket
+python ws_server_online.py --port 1095
 ```
 
-## 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
-
-
-
-## 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.
 
+### open browser to access html5 demo
 ```shell
-### 1) Generate a private key
-openssl genrsa -des3 -out server.key 1024
- 
-### 2) Generate a csr file
-openssl req -new -key server.key -out server.csr
- 
-### 3) Remove pass
-cp server.key server.key.org 
-openssl rsa -in server.key.org -out server.key
- 
-### 4) Generated a crt file, valid for 1 year
-openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
+https://127.0.0.1:1337/static/index.html
+# https://30.220.136.139:1337/static/index.html
 ```
 
-## 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;
-    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;
+### modify asr address in html according to your environment
+asr address in index.html must be wss
 
-    }
-  }
-```
 
 ## Acknowledge
 1. This project is maintained by [FunASR community](https://github.com/alibaba-damo-academy/FunASR).

funasr/runtime/html5/readme_cn.md

@@ -17,37 +17,31 @@ Recorder
 ## demo页面如下
 <div align="center"><img src="./demo.gif" width="150"/> </div>
 
-## 两种ws_server连接模式
-### 1)直接连接模式，浏览器https麦克风 --> html5 demo服务 --> js wss接口 --> wss asr online srv(证书生成请往后看)
+[//]: # (## 两种ws_server连接模式)
 
-### 2)nginx中转，浏览器https麦克风 --> html5 demo服务 --> js wss接口 --> nginx服务 --> ws asr online srv
+[//]: # (### 1&#41;直接连接模式，浏览器https麦克风 --> html5 demo服务 --> js wss接口 --> wss asr online srv&#40;证书生成请往后看&#41;)
+
+[//]: # (### 2&#41;nginx中转，浏览器https麦克风 --> html5 demo服务 --> js wss接口 --> nginx服务 --> ws asr online srv)
 
 ## 操作步骤
 ### html5 demo服务启动
-#### 启动html5服务，需要ssl证书(已生成，如需要自己生成请往后看)
-用法如下:
+启动html5服务，需要ssl证书(已生成，如需要自己生成请往后看)
 ```shell
 h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE] [--keyfile KEYFILE]             
 ```
 例子如下，需要注意ip地址，如果从其他设备访问需求（例如手机端），需要将ip地址设为真实ip 
 ```shell
-python h5Server.py --host 0.0.0.0 --port 1337 --keyfile server.key
-# python h5Server.py --host 30.220.136.139 --port 1337 --keyfile server.key
+python h5Server.py --host 0.0.0.0 --port 1337
+# python h5Server.py --host 30.220.136.139 --port 1337
 ```
-### 启动ws or wss asr online srv
+### 启动ASR服务
 [具体请看online asr](../python/websocket)
-online asr提供两种wss和ws模式，wss模式可以直接启动，无需nginx中转。否则需要通过nginx将wss转发到该online asr的ws端口上
 
 `Tips:` asr 服务需要与html5服务部署到同一个物理机器上
 #### wss方式
 ```shell
 cd ../python/websocket
-python ws_server_online.py --certfile ../../html5/server.crt --keyfile ../../html5/server.key  --port 1095
-```
-#### ws方式
-```shell
-cd ../python/websocket
-python ws_server_online.py  --port 1095
+python ws_server_online.py --port 1095
 ```
 
 ### 浏览器打开地址
@@ -61,61 +55,73 @@ https://127.0.0.1:1337/static/index.html
 修改网页中，asr服务器地址（websocket srv的ip与端口），点击开始即可使用。注意h5服务和asr服务需要在同一个服务器上，否则存在跨域问题。
 
 
-## 自行生成证书
-生成证书(注意这种证书并不能被所有浏览器认可，部分手动授权可以访问,最好使用其他认证的官方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配置说明&#40;了解的可以跳过&#41;)
 
-## nginx配置说明(了解的可以跳过)
-h5打开麦克风需要https协议，同时后端的asr websocket也必须是wss协议，如果[online asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket)以ws方式运行，我们可以通过nginx配置实现wss协议到ws协议的转换。
+[//]: # (h5打开麦克风需要https协议，同时后端的asr websocket也必须是wss协议，如果[online asr]&#40;https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket&#41;以ws方式运行，我们可以通过nginx配置实现wss协议到ws协议的转换。)
 
-### 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;
-
-    }
-  }
-```
-### 修改wsconnecter.js里asr接口地址
-wsconnecter.js里配置online asr服务地址路径，这里配置的是wss端口
-var Uri = "wss://xxx:xxx/wss/" 
+[//]: # ()
+[//]: # (### 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;)
+
+[//]: # ()
+[//]: # (    })
+
+[//]: # (  })
+
+[//]: # (```)
+
+[//]: # (### 修改wsconnecter.js里asr接口地址)
+
+[//]: # (wsconnecter.js里配置online asr服务地址路径，这里配置的是wss端口)
+
+[//]: # (var Uri = "wss://xxx:xxx/wss/" )
 ## 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.

funasr/runtime/html5/ssl_key

@@ -0,0 +1 @@
+../ssl_key

funasr/runtime/python/websocket/README.md

@@ -35,7 +35,7 @@ python ws_server_offline.py \
 ```
 ##### Usage examples
 ```shell
-python ws_server_offline.py --port 10095 --asr_model "damo/speech_paraformer-large_asr_nat-zh-cn-16k-common-vocab8404-pytorch" --certfile ./server.crt --keyfile ./server.key
+python ws_server_offline.py --port 10095 --asr_model "damo/speech_paraformer-large_asr_nat-zh-cn-16k-common-vocab8404-pytorch"
 ```
 
 #### ASR streaming server
@@ -51,7 +51,7 @@ python ws_server_online.py \
 ```
 ##### Usage examples
 ```shell
-python ws_server_online.py --port 10095 --asr_model_online "damo/speech_paraformer-large_asr_nat-zh-cn-16k-common-vocab8404-online" --certfile ./server.crt --keyfile ./server.key
+python ws_server_online.py --port 10095 --asr_model_online "damo/speech_paraformer-large_asr_nat-zh-cn-16k-common-vocab8404-online"
 ```
 
 #### ASR offline/online 2pass server

funasr/runtime/python/websocket/parse_args.py

@@ -37,13 +37,13 @@ parser.add_argument("--ncpu",
                     help="cpu cores")
 parser.add_argument("--certfile",
                     type=str,
-                    default="",
+                    default="./ssl_key/server.crt",
                     required=False,
                     help="certfile for ssl")
                     
 parser.add_argument("--keyfile",
                     type=str,
-                    default="",
+                    default="./ssl_key/server.key",
                     required=False,
                     help="keyfile for ssl")
 args = parser.parse_args()

funasr/runtime/python/websocket/ssl_key

@@ -0,0 +1 @@
+../../ssl_key

funasr/runtime/ssl_key/readme.md

@@ -0,0 +1,17 @@
+## 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) Generate a private key
+openssl genrsa -des3 -out server.key 1024
+ 
+### 2) Generate a csr file
+openssl req -new -key server.key -out server.csr
+ 
+### 3) Remove pass
+cp server.key server.key.org 
+openssl rsa -in server.key.org -out server.key
+ 
+### 4) Generated a crt file, valid for 1 year
+openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
+```

funasr/runtime/ssl_key/readme_cn.md

@@ -0,0 +1,17 @@
+## 自行生成证书
+生成证书(注意这种证书并不能被所有浏览器认可，部分手动授权可以访问,最好使用其他认证的官方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
+```