FunASR Html5 网页客户端实战从 wss 语音识别服务到浏览器端实时/离线转写体验【免费下载链接】FunASROpen-source speech recognition toolkit for training, inference, streaming ASR, VAD, punctuation, speaker diarization pipelines, and OpenAI-compatible/MCP serving.项目地址: https://gitcode.com/GitHub_Trending/fun/FunASR本文围绕 FunASR 仓库中 Html5 客户端访问界面readme_zh.md展开完整讲解如何将 FunASR 部署为 WebSocket(wss) 语音识别服务并通过 runtime/html5 提供的纯浏览器端客户端实现麦克风实时录音识别与文件离线转写读完本文你将能够独立完成 Python 版 wss 服务 html5 服务的组合部署理解客户端 PCM 音频采集、重采样、分块发送与 JSON 会话协议的底层细节并可进一步扩展为支持手机访问的在线体验 Demo。架构总览wss 服务端 Html5 浏览器客户端FunASR 的服务端部署采用 websocket 协议Html5 客户端支持麦克风输入与文件输入两种形态可通过下面两种方式访问原文档给出的两种访问方式方式一Html 客户端直连。手动将 runtime/html5/static 目录下的客户端文件下载到本地直接打开index.html网页在页面中填入 wss 地址与端口号即可使用。该方式下 Html5 页面仅作为静态页面存在适合快速验证。方式二Html5 服务端。启动 FunASR 自带的h5Server.py服务由服务端自动分发客户端页面天然支持手机等端上设备访问适合对外提供体验地址。runtime/html5目录的关键组成如下文件作用h5Server.py基于 Flask 的 Html5 静态页面服务入口自带 SSL 上下文支持static/index.html客户端主页面wss 地址、麦克风/文件模式、ASR 模式、ITN、热词设置static/main.js核心逻辑录音、重采样、分块发送、结果解析与时间戳渲染static/wsconnecter.js不存在实际文件为 wsconnecter.jsWebSocket 连接封装与 JSON 会话消息构造static/pcm.js / static/wav.jsPCM/WAV 编码与 44 字节 WAV 头处理static/recorder-core.js浏览器录音核心基于 Recorder 库ssl_key/预置的自签名 SSL 证书server.crt/server.key附 自行生成证书 说明启动 Python 版 ASR 服务wssPython 版本直接部署 FunASR 的 Python pipeline支持流式实时语音识别模型、离线语音识别模型、流式离线一体化2pass纠错模型并可输出带标点的文字。单个 server 对应单个 client 的会话模型。安装依赖环境pip3 install -U modelscope funasr flask # 中国大陆用户如果遇到网络问题可以通过下面指令安装 # pip3 install -U modelscope funasr -i https://mirror.sjtu.edu.cn/pypi/web/simple git clone https://gitcode.com/GitHub_Trending/fun/FunASR.git cd FunASR注意原文档将flask一并列入安装依赖这正是 Html5 服务h5Server.py基于 Flask所需的运行时依赖。以 wss 方式启动 ASR 服务cd runtime/python/websocket python funasr_wss_server.py --port 10095结合 funasr_wss_server.py 的源码可以看到该服务的默认配置与原文档的端口选择是配套设计的--port默认10095--host默认0.0.0.0默认离线模型为iic/speech_paraformer-large-contextual_asr_nat-zh-cn-16k-common-vocab8404默认流式在线模型为iic/speech_paraformer-large_asr_nat-zh-cn-16k-common-vocab8404-online默认 VAD 为iic/speech_fsmn_vad_zh-cn-16k-common-pytorch默认标点模型为iic/punc_ct-transformer_zh-cn-common-vad_realtime-vocab272727各模型均带--*_revision版本参数--certfile/--keyfile默认指向仓库中的 runtime/ssl_key/server.crt 与 runtime/ssl_key/server.key即服务开箱即支持 wss 加密传输这也是浏览器端可以直连的前提从源码结构看服务端引入了线程池与并发控制参数--worker_threads、--concurrent_vad、--concurrent_asr_online、--concurrent_asr_offline、--concurrent_punc等以及--save_offline_segments调试开关将 2pass 离线阶段送入 ASR 的 VAD 切分片段存为 wav便于排查切分问题。更完整的参数说明可参考 runtime/python/websocket 目录含 README.md、客户端示例 funasr_wss_client.py 等。启动 Html5 服务h5Server.py若使用上文方式二访问需要启动 Html5 服务。原文档给出的用法为h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE] [--keyfile KEYFILE]结合 h5Server.py 源码各参数的默认值如下参数默认值说明--host0.0.0.0监听地址可填localhost、0.0.0.0--port1337Html5 服务端口--certfile./ssl_key/server.crtSSL 证书文件--keyfile./ssl_key/server.keySSL 私钥文件启动示例需注意如果要从其他设备例如手机端访问需要把 host 设为0.0.0.0并在浏览器中使用该机器的真实公网 IP / 局域网 IP 访问cd runtime/html5 python h5Server.py --host 0.0.0.0 --port 1337启动后在浏览器中输入https://127.0.0.1:1337/static/index.html即可访问客户端页面。从源码看其工作机制Flask 应用以static_folderstatic、static_url_path/static挂载静态目录h5Server.py根路由/直接 302 重定向到/static/index.htmlapp.run(..., threadedTrue, ssl_context(args.certfile, args.keyfile))表明服务默认以 HTTPS 方式运行浏览器页面为https协议时WebSocket才能以wss加密方式连接 ASR 服务。因此即使不使用手机访问只要走方式二本地访问地址也必须是https://而非http://。关于自签名证书预置证书为自签名证书ssl_key/readme_cn.md 明确提示这种证书并不能被所有浏览器认可部分需手动授权可以访问最好使用其他认证的官方 SSL 证书。自行生成证书的流程如下原文档同节内容### 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为配合自签名证书的体验客户端页面中提供了点此处手工授权链接见下文客户端一节首次连接遇到浏览器证书告警时可先通过该链接完成一次页面级授权再连接。客户端实现剖析采集、重采样与会话协议Html5 客户端全部由 static/ 下的原生 JavaScript 组成理解其实现有助于排查连接失败、识别结果异常等问题。页面功能index.htmlindex.html 提供以下控件asr 服务器地址必填输入框wssip默认wss://127.0.0.1:10095/下方手工授权链接会由 main.js 根据当前输入地址动态生成对应的https链接用于 iOS 等设备上手动完成证书授权录音模式麦克风/文件二选一isfilemode标志控制分支ASR 模型模式2pass默认流式 离线一体化纠错/online纯流式/offline纯离线逆文本标准化ITN是 / 否热词设置一行一个关键字、空格隔开权重如阿里巴巴 20结果展示区、状态提示区以及连接 / 开始 / 停止三个按钮和录音回放audio控件。音频采集与发送main.js从 main.js 的实现可以看出完整的音频处理链路录音配置Recorder({type:pcm, bitRate:16, sampleRate:16000, onProcess:recProcess})即浏览器端直接以 16bit PCM 采集重采样recProcess回调中用Recorder.SampleData(..., bufferSampleRate, 16000)将系统采样率如 48k下采样到 16kHz与 FunASR 16k 模型对齐分块发送以chunk_size960采样点16kHz 下即 60ms为粒度从环形缓冲中切块wsSend与请求 JSON 中声明的chunk_size [5, 10, 5]前处理 5 帧、当前 10 帧、后处理 5 帧帧长 60ms相配套文件模式通过FileReader读取所选音频文件对 wav 文件还会用内置的readWavInfo解析 44 字节 WAV 头提取sampleRate、bitRate、numChannels与data块位置从而在会话 JSON 中上报真实采样率停止流程先冲刷剩余缓冲再发送is_speaking: false的 JSON 结束请求麦克风模式等待约 3 秒结果后断开连接并把本次录音转成 wav 供页面回放Recorder.pcm2wav见 pcm.js。WebSocket 会话协议wsconnecter.jswsconnecter.js 封装了连接生命周期。onopen时客户端会先发送一条 JSON 会话消息wsconnecter.js{ chunk_size: [5, 10, 5], wav_name: h5, is_speaking: true, chunk_interval: 10, itn: false, mode: 2pass, wav_format: PCM, audio_fs: 16000, hotwords: {\阿里巴巴\: 20, \hello world\: 40} }字段含义chunk_size/chunk_interval为流式模型的分块参数mode取自页面单选文件模式下强制为offline见 main.jswav_format/audio_fs仅文件模式下上报hotwords由页面上的热词文本解析为{关键词: 权重}的 JSON 字符串每行关键词 空格 数字权重见 main.js。之后的每个二进制帧就是一段 PCM 音频服务端回推的 JSON 中包含text、mode、is_final、timestamp等字段客户端据此区分流式增量结果与 2pass/离线最终结果main.js并将timestamp按秒:文字格式渲染为带时间戳的文本中文按字、英文按词对齐。启动 C 版本服务一键部署C 版本基于 funasr-runtime-sdk支持一键部署0.1.0 版本支持离线文件转写单个 server 可支持上百路 client 请求适合对并发有要求的场景。由于 C 依赖环境较多原文档建议采用 docker 方式一键启动。该部署脚本在仓库中的位置是 runtime/deploy_tools/funasr-runtime-deploy-offline-cpu-zh.sh安装命令形如sudo bash funasr-runtime-deploy-offline-cpu-zh.sh install --workspace /root/funasr-runtime-resources详细参数配置与解析请参考 SDK 教程仓库同时提供 SDK_tutorial.md、benchmark_libtorch.md 等配套文档。C 服务以相同协议提供 wss 接口协议细节可参考 websocket_protocol_zh.md因此前文的 Html5 客户端无需任何改动即可对接。客户端测试步骤方式一客户端直连手动将 runtime/html5/static 目录下载到本地打开index.html输入 wss 地址与端口号如wss://127.0.0.1:10095/即可使用。此方式下客户端页面本身不是 https 环境连接 wss 时部分浏览器会有混合内容或证书限制适合本机快速调试。方式二Html5 服务端启动h5Server.py后在手机或电脑浏览器访问ip 地址需与 html5 server 一致本地机器可用 127.0.0.1https://127.0.0.1:1337/static/index.html在页面中确认 wss 地址端口无误后点击连接即可进行麦克风实时识别或选择文件进行离线转写。首次连接若遇到自签名证书告警可点击页面上的手工授权链接先完成一次浏览器授权。文件模式下大文件等待时间会更长属正常现象客户端会提示请耐心等待,大文件等待时间更长。小结服务端runtime/python/websocket下的funasr_wss_server.pyPython 版单 client 会话带 VAD 标点 2pass 一体化能力或 funasr-runtime-sdk 的 C 一键部署单 server 上百路 client两者均默认走 wss客户端runtime/html5的h5Server.pyFlask SSLstatic/纯前端页面覆盖麦克风实时2pass/online与文件离线offline两种模式附带 ITN 与热词配置关键点16k/16bit PCM、960 采样点/帧的分块节奏、chunk_size [5,10,5]会话 JSON、自签名证书与浏览器手工授权是这套 Html5 体验链路能否跑通的四个决定因素。【免费下载链接】FunASROpen-source speech recognition toolkit for training, inference, streaming ASR, VAD, punctuation, speaker diarization pipelines, and OpenAI-compatible/MCP serving.项目地址: https://gitcode.com/GitHub_Trending/fun/FunASR创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考