From c2dee5e3c29eba79e591d9e9caebaef15ea4e56b Mon Sep 17 00:00:00 2001
From: hnluo <haoneng.lhn@alibaba-inc.com>
Date: 星期四, 29 六月 2023 11:09:28 +0800
Subject: [PATCH] Merge pull request #687 from alibaba-damo-academy/dev_lhn

---
 funasr/runtime/html5/readme.md |  120 ++++++++++++++++++++---------------------------------------
 1 files changed, 41 insertions(+), 79 deletions(-)

diff --git a/funasr/runtime/html5/readme.md b/funasr/runtime/html5/readme.md
index e60d588..0c1eba0 100644
--- a/funasr/runtime/html5/readme.md
+++ b/funasr/runtime/html5/readme.md
@@ -1,107 +1,69 @@
-# online asr demo for html5
+# Html5 server for asr service
 
-## requirement
-### python
+## Requirement
+#### Install the modelscope and funasr
 ```shell
-flask
-gevent
-pyOpenSSL
+pip install -U modelscope funasr
+# For the users in China, you could install with the command:
+# pip install -U modelscope funasr -i https://mirror.sjtu.edu.cn/pypi/web/simple
+git clone https://github.com/alibaba/FunASR.git && cd FunASR
+```
+#### Install the requirements for server
+```shell
+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
+cd funasr/runtime/html5
+python h5Server.py --host 0.0.0.0 --port 1337 
 ```
-### ws way
+### asr service
+[detail for asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/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 wss_srv_asr.py --port 10095
 ```
 
-## 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
+### open browser to access html5 demo
+```shell
+https://127.0.0.1:1337/static/index.html
+# https://30.220.136.139:1337/static/index.html
+```
 
+### 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
 
-
-## 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
-```
 
-## 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;
-
-    }
-  }
-```
 
 ## Acknowledge
 1. This project is maintained by [FunASR community](https://github.com/alibaba-damo-academy/FunASR).

--
Gitblit v1.9.1