能否使用webkitSpeechRecognition在客户端提取上传视频的文本内容

核心结论 #

你完全可以仅通过客户端纯JavaScript实现该需求，全程不会上传任何视频数据到外部服务器。核心流程为：本地读取用户上传的视频Blob -> 提取视频中的音频轨道 -> 生成MediaStream音频流喂给webkitSpeechRecognition接口 -> 实时接收识别结果写入textarea即可。

前置限制说明 #

• 仅Chromium内核浏览器（Chrome、Edge、Opera等）支持webkitSpeechRecognition接口，其他浏览器（Firefox、Safari等）暂不兼容
• 该接口的识别逻辑由浏览器内核实现，部分版本的Chrome需要联网完成识别（仅识别请求走浏览器自带的识别服务，不会上传你的原始视频数据），完全离线识别需要浏览器提前下载好对应语言的离线语音识别包
• 接口调用前需要用户授权麦克风权限，这是浏览器对语音识别接口的统一权限要求，即便你使用的是本地视频的音频流也需要满足

完整可运行代码 #

<!-- 页面结构 -->
<input type="file" id="videoUpload" accept="video/*">
<br>
<textarea id="resultText" rows="10" cols="80" placeholder="识别结果将展示在这里"></textarea>

<script>
// 兼容不同浏览器的语音识别接口
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

// 识别基础配置
recognition.continuous = true; // 开启持续识别
recognition.interimResults = false; // 只返回最终确认的结果
recognition.lang = 'zh-CN'; // 可按需修改为其他语言编码

const uploadInput = document.getElementById('videoUpload');
const resultText = document.getElementById('resultText');

uploadInput.addEventListener('change', async (e) => {
  const videoFile = e.target.files[0];
  if (!videoFile) return;

  // 本地创建video元素加载视频Blob，不需要插入页面DOM
  const videoEl = document.createElement('video');
  videoEl.src = URL.createObjectURL(videoFile);
  videoEl.muted = false;
  await videoEl.play();

  // 提取视频中的音频轨道生成可用流
  const audioTracks = videoEl.captureStream().getAudioTracks();
  const audioStream = new MediaStream(audioTracks);
  
  // 对接音频上下文兼容旧版接口识别要求
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const source = audioContext.createMediaStreamSource(audioStream);
  const destination = audioContext.createMediaStreamDestination();
  source.connect(destination);

  // 启动识别
  recognition.start();
  
  // 监听识别结果写入文本框
  recognition.onresult = (event) => {
    let transcript = '';
    for (let i = event.resultIndex; i < event.results.length; i++) {
      transcript += event.results[i][0].transcript;
    }
    resultText.value += transcript;
  };

  // 视频播放完毕自动停止识别
  videoEl.onended = () => {
    recognition.stop();
    videoEl.pause();
    URL.revokeObjectURL(videoEl.src);
  };

  // 错误捕获
  recognition.onerror = (event) => {
    resultText.value += `识别出错：${event.error}\n`;
    recognition.stop();
  };
});
</script>

内容的提问来源于stack exchange，提问作者shrw