WebRTC与Whisper：Web端语音识别的创新实践

在Web应用中集成语音识别功能，既能提升用户体验，又能拓展交互场景。然而传统方案往往依赖后端服务或浏览器原生API的局限性，使得开发者面临实时性差、准确率低、隐私风险高等挑战。经过实践探索，我发现WebRTC + Whisper的组合能够高效解决这些问题，为Web端语音识别提供了一套轻量级、高准确率的解决方案。

一、WebRTC：Web端实时音频采集的基石

WebRTC（Web Real-Time Communication）是浏览器内置的实时通信协议，其核心优势在于无需插件即可实现音频、视频的实时采集与传输。对于语音识别场景，WebRTC的MediaStream API和WebAudio API提供了关键能力：

1. 音频设备访问与流控制

通过navigator.mediaDevices.getUserMedia({ audio: true })，开发者可以快速获取用户麦克风输入，并生成包含原始音频数据的MediaStream对象。例如：

async function startAudioCapture() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // 将流传递给音频处理模块
    return stream;
  } catch (err) {
    console.error('麦克风访问失败:', err);
  }
}

此代码通过Promise异步获取音频流，并处理用户拒绝授权或设备不可用等异常情况。

2. 音频数据处理与优化

WebAudio API允许对音频流进行实时处理，例如降噪、增益调整或分帧。以下是一个简单的音频分帧示例：

function createAudioProcessor(stream, sampleRate = 16000) {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const source = audioContext.createMediaStreamSource(stream);
  const processor = audioContext.createScriptProcessor(1024, 1, 1);
  source.connect(processor);
  processor.connect(audioContext.destination);
  processor.onaudioprocess = (e) => {
    const inputBuffer = e.inputBuffer.getChannelData(0);
    // 将输入Buffer转换为16kHz采样率的Float32Array
    // 此处可接入Whisper的音频预处理逻辑
  };
}

通过调整ScriptProcessor的缓冲区大小（如1024样本）和采样率（Whisper推荐16kHz），可以匹配模型输入要求。

二、Whisper：端到端语音识别的轻量级方案

Whisper是OpenAI发布的开源语音识别模型，其核心优势在于支持多语言、抗噪声能力强，且可通过量化压缩实现浏览器端运行。

1. 模型选择与量化压缩

Whisper提供了多种规模的模型（tiny、base、small、medium、large），其中tiny和base模型经过量化后（如4位量化），体积可压缩至几十MB，适合Web端部署。例如，使用onnxruntime-web加载量化后的模型：

import * as ort from 'onnxruntime-web';
async function loadWhisperModel() {
  const session = await ort.InferenceSession.create('./whisper-tiny.quant.onnx');
  return session;
}

量化后的模型在保持较高准确率的同时，显著降低了内存占用和推理时间。

2. 音频预处理与特征提取

Whisper的输入要求为16kHz单声道音频的Mel频谱图。以下是一个完整的预处理流程：

async function preprocessAudio(audioBuffer, sampleRate = 16000) {
  // 1. 重采样为16kHz（若原始采样率不同）
  const resampled = resampleAudio(audioBuffer, sampleRate);
  // 2. 分帧并计算Mel频谱图
  const frameSize = 512; // 每帧512样本（32ms @16kHz）
  const hopLength = 160; // 帧移160样本（10ms）
  const melBands = 80;
  const melSpectrogram = computeMelSpectrogram(
    resampled, frameSize, hopLength, melBands
  );
  // 3. 归一化并转换为模型输入格式
  return normalizeMelSpectrogram(melSpectrogram);
}

实际开发中，可使用librosa的Web端替代库（如mel-spectrogram）或自定义WebGL实现以加速计算。

3. 端到端推理流程

结合WebRTC采集的音频流和预处理逻辑，完整的推理流程如下：

async function transcribeAudio(stream, modelSession) {
  const audioContext = new AudioContext();
  const source = audioContext.createMediaStreamSource(stream);
  const processor = audioContext.createScriptProcessor(1024, 1, 1);
  let audioBuffer = [];
  processor.onaudioprocess = (e) => {
    const input = e.inputBuffer.getChannelData(0);
    audioBuffer.push(...input);
  };
  source.connect(processor);
  processor.connect(audioContext.destination);
  // 定时触发推理（例如每1秒）
  setInterval(async () => {
    if (audioBuffer.length > 0) {
      const melSpectrogram = await preprocessAudio(audioBuffer);
      const tensor = new ort.Tensor('float32', melSpectrogram, [1, 80, 300]); // 假设300帧
      const feeds = { input: tensor };
      const outputs = await modelSession.run(feeds);
      const transcript = decodeOutput(outputs); // 自定义解码逻辑
      console.log('识别结果:', transcript);
      audioBuffer = []; // 清空缓冲区
    }
  }, 1000);
}

此代码实现了每秒一次的实时识别，开发者可根据需求调整触发频率。

三、性能优化与实战建议

1. 模型量化与WebAssembly加速

• 使用tflite-web或onnxruntime-web加载量化模型，减少内存占用。
• 通过WebAssembly实现关键计算（如Mel频谱图生成），提升处理速度。

2. 分块处理与流式识别

Whisper原生支持流式识别，可通过以下方式优化：

• 将音频流分割为固定长度的块（如30秒），逐块推理并合并结果。
• 使用whisper.cpp的Web端移植版，直接调用C++优化的推理逻辑。

3. 隐私与安全设计

• 避免将原始音频上传至服务器，所有处理均在客户端完成。
• 提供用户明确的麦克风使用授权提示，并支持随时停止采集。

四、完整代码示例与部署

以下是一个基于React和onnxruntime-web的完整示例：

import React, { useEffect, useRef } from 'react';
import * as ort from 'onnxruntime-web';
function VoiceRecognizer() {
  const modelRef = useRef(null);
  const audioStreamRef = useRef(null);
  useEffect(() => {
    // 1. 加载模型
    ort.InferenceSession.create('./whisper-tiny.quant.onnx').then(session => {
      modelRef.current = session;
    });
    // 2. 启动音频采集
    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
      audioStreamRef.current = stream;
      const audioContext = new AudioContext();
      const source = audioContext.createMediaStreamSource(stream);
      // ...此处接入预处理和推理逻辑
    });
  }, []);
  const stopRecording = () => {
    if (audioStreamRef.current) {
      audioStreamRef.current.getTracks().forEach(track => track.stop());
    }
  };
  return (
    <div>
      <button onClick={stopRecording}>停止录音</button>
      <div id="transcript"></div>
    </div>
  );
}

部署时需注意：

• 将ONNX模型文件通过webpack或vite打包为Base64或单独文件。
• 使用HTTPS协议以确保麦克风访问权限。

五、总结与展望

通过结合WebRTC的实时音频采集能力和Whisper的端到端语音识别模型，开发者可以在Web端实现低延迟、高准确率的语音识别功能。这一方案的优势在于：

• 隐私安全：所有处理均在客户端完成，避免数据泄露风险。
• 跨平台兼容：支持Chrome、Firefox、Safari等现代浏览器。
• 灵活扩展：可轻松替换为其他量化模型（如VAD模型用于语音活动检测）。

未来，随着WebGPU的普及和模型量化技术的进步，Web端语音识别的性能将进一步提升，为智能客服、语音笔记、实时字幕等场景提供更强大的支持。