Merge branch 'main' of github.com:alibaba-damo-academy/FunASR add

游雁

2023-08-30 c2e4e3c2e9be855277d9f4fa9cd0544892ff829a

 funasr/runtime/html5/readme.md

@@ -1,103 +1,93 @@
# online asr demo for html5

([简体中文](./readme_zh.md)|English)



## requirement

### python

```shell

flask

gevent

pyOpenSSL

```

# Speech Recognition Service Html5 Client Access Interface



### javascript

[html5录音](https://github.com/xiangyuecn/Recorder)

```shell

Recorder 
```

The server deployment uses the websocket protocol. The client can support html5 webpage access and microphone input or file input. There are two ways to access the service:

- Method 1: 


### demo页面如下

![img](https://github.com/alibaba-damo-academy/FunASR/blob/for-html5-demo/funasr/runtime/html5/demo.gif)

  Directly connect to the html client, manually download the client ([click here](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/html5/static)) to the local computer, and open the index.html webpage to enter the wss address and port number.



## 具体数据流向：

浏览器https麦克风 --> html5 demo服务 --> js wss接口 --> nginx服务 --> ws asr online srv

- Method 2: 


## 1.html5 demo服务启动

### 启动html5服务，需要ssl证书(自己生成请往后看)

   Html5 server, automatically download the client to the local computer, and support access by mobile phones and other devices.



## Starting Speech Recognition Service



Support the deployment of Python and C++ versions, where



- Python version

  
  Directly deploy the Python pipeline, support streaming real-time speech recognition models, offline speech recognition models, streaming offline integrated error correction models, and output text with punctuation marks. Single server, supporting a single client.



- C++ version

  
  funasr-runtime-sdk, supports one-key deployment, version 0.1.0, supports offline file transcription. Single server, supporting requests from hundreds of clients.



### Starting Python Version Service



#### Install Dependencies



```shell

usage: h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE]

                   [--keyfile KEYFILE]

python h5Server.py --port 1337

pip3 install -U modelscope funasr flask

# Users in mainland China, if encountering network issues, can install with the following command:

# pip3 install -U modelscope funasr -i https://mirror.sjtu.edu.cn/pypi/web/simple

git clone https://github.com/alibaba/FunASR.git && cd FunASR

```

## 2.启动ws asr online srv

[具体请看online asr](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket)

目前online asr只提供ws接口，需要通过nginx将wss转发到该online asr端口上



## 3.修改wsconnecter.js里asr接口地址

wsconnecter.js里配置online asr服务地址路径，这里配置的是nginx的wss端口)

var Uri = "wss://xxx:xxx/" 
#### Start ASR Service



## 4.配置nginx并启动

#### wss Method



## 5.浏览器打开地址测试

```shell

cd funasr/runtime/python/websocket

python funasr_wss_server.py --port 10095

```



For detailed parameter configuration and analysis, please click [here](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/python/websocket).



#### Html5 Service (Optional)



If you need to use the client method mentioned above to access it, you can start the html5 service



```shell

h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE] [--keyfile KEYFILE]             
```

As shown in the example below, pay attention to the IP address. If accessing from another device (such as a mobile phone), you need to set the IP address to the real public IP address.

```shell

cd funasr/runtime/html5

python h5Server.py --host 0.0.0.0 --port 1337

```



After starting, enter ([https://127.0.0.1:1337/static/index.html](https://127.0.0.1:1337/static/index.html)) in the browser to access it.



### Starting C++ Version Service



Since there are many dependencies for C++, it is recommended to deploy it using docker, which supports one-key start of the service.





```shell

curl -O https://isv-data.oss-cn-hangzhou.aliyuncs.com/ics/MaaS/ASR/shell/funasr-runtime-deploy-offline-cpu-zh.sh;

sudo bash funasr-runtime-deploy-offline-cpu-zh.sh install --workspace /root/funasr-runtime-resources

```

For detailed parameter configuration and analysis, please click [here](https://github.com/alibaba-damo-academy/FunASR/blob/main/funasr/runtime/docs/SDK_tutorial_zh.md).



## Client Testing



### Method 1



Directly connect to the html client, manually download the client ([click here](https://github.com/alibaba-damo-academy/FunASR/tree/main/funasr/runtime/html5/static)) to the local computer, and open the index.html webpage, enter the wss address and port number to use.



### Method 2



Html5 server, automatically download the client to the local computer, and support access by mobile phones and other devices. The IP address needs to be consistent with the html5 server. If it is a local computer, you can use 127.0.0.1.



```shell

https://127.0.0.1:1337/static/index.html











## 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协议的转换。



## 自行生成证书

生成证书(注意这种证书并不能被所有浏览器认可，部分手动授权可以访问,最好使用其他认证的官方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转发配置示例

```shell

events {                                                                                                            [0/1548]

    worker_connections  1024;

    accept_mutex on;

  }

http {

  error_log  error.log;

  access_log  access.log;

  server {

Enter the wss address and port number to use.



    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 [爱医声](http://www.aihealthx.com/) for contributing the html5 demo.
2. We acknowledge [AiHealthx](http://www.aihealthx.com/) for contributing the html5 demo.