FunASR/funasr/runtime/html5

online asr demo for html5

requirement

python

flask
gevent
pyOpenSSL

javascript

html5 recorder.js

Recorder 

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

usage: h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE]
                   [--keyfile KEYFILE]
python h5Server.py --port 1337

2.asr online srv start

detail for online asr Online asr provides wss or ws way. if started in ws way, nginx is required for relay.

wss way, ssl certificate is required

python ws_server_online.py --certfile server.crt --keyfile server.key  --port 5921

ws way

python ws_server_online.py  --port 5921

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.open browser to access html5 demo

https://youraddress:port/static/index.html

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.

### 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 run in ws way, you should use nginx to convert wss to ws.

nginx wss->ws configuration example

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.
2. We acknowledge AiHealthx for contributing the html5 demo.