| | |
|---|
| | | ```
|
|---|
| | |
|
|---|
| | | ### javascript
|
|---|
| | | [html5 recorder.js](https://github.com/xiangyuecn/Recorder)
|
|---|
| | | ```shell
|
|---|
| | | Recorder [html5录音](https://github.com/xiangyuecn/Recorder)
|
|---|
| | | Recorder |
|---|
| | | ```
|
|---|
| | | ## html5服务配置
|
|---|
| | | ### 启动html5服务
|
|---|
| | |
|
|---|
| | | ### demo
|
|---|
| | | 
|
|---|
| | |
|
|---|
| | | ## 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
|
|---|
| | |
|
|---|
| | | ```shell
|
|---|
| | | usage: h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE]
|
|---|
| | | [--keyfile KEYFILE]
|
|---|
| | | python h5Server.py --port 1337
|
|---|
| | | ```
|
|---|
| | | 注:
|
|---|
| | | wsconnecter.js里配置online asr wss路径
|
|---|
| | | var Uri = "wss://xxx:xxx/" |
|---|
| | | ## 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 way
|
|---|
| | | ```shell
|
|---|
| | | python ws_server_online.py --port 5921
|
|---|
| | | ```
|
|---|
| | |
|
|---|
| | | ### 浏览器打开地址
|
|---|
| | | https://127.0.0.1:1337/static/index.html
|
|---|
| | | ## 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
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | ### demo页面如下
|
|---|
| | | 
|
|---|
| | |
|
|---|
| | | ## 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.
|
|---|
| | |
|
|---|
| | | ##后端配置
|
|---|
| | | h5打开麦克风需要https协议，同时后端的asr websocket也必须是wss协议，而目前[online asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket)模型只支持ws协议，所以我们通过nginx配置实现wss协议到ws协议的转换。
|
|---|
| | |
|
|---|
| | | ##具体过程如下：
|
|---|
| | | 浏览器htts --> html5 demo服务 --> js wss接口 --> nginx服务 --> ws asr online srv
|
|---|
| | |
|
|---|
| | | ##配置nginx wss协议(了解的可以跳过）
|
|---|
| | | 生成证书(注意这种证书并不能被所有浏览器认可，部分手动授权可以访问,最好使用其他认证的官方ssl证书)
|
|---|
| | |
|
|---|
| | | ### 生成私钥，按照提示填写内容
|
|---|
| | | ```shell
|
|---|
| | | ### 1) Generate a private key
|
|---|
| | | openssl genrsa -des3 -out server.key 1024
|
|---|
| | |
|
|---|
| | | ### 生成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转发配置示例
|
|---|
| | | ## 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;
|
|---|
| | |
|---|
| | | location /wss/ {
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | proxy_pass http://127.0.0.1:1111/; # asr online model ws address:port
|
|---|
| | | 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";
|
|---|
| | |
|---|
| | |
|
|---|
| | | ## Acknowledge
|
|---|
| | | 1. This project is maintained by [FunASR community](https://github.com/alibaba-damo-academy/FunASR).
|
|---|
| | | 2. We acknowledge [爱医声](http://www.aihealthx.com/) for contributing the html5 demo. |
|---|
| | | 2. We acknowledge [AiHealthx](http://www.aihealthx.com/) for contributing the html5 demo. |
|---|
