2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

React 中的语音与摄像头输入：语音识别、媒体设备及权限管理

语音和摄像头是让静态网页应用变得栩栩如生的两种感官体验。你可以与之对话的搜索栏、能实时转录你话语的笔记应用、允许你选择使用哪个网络摄像头的会议工具，以及按住按键即可通话的对讲机功能。这些功能如今已不再新奇——浏览器拥有相关应用程序接口（API）已有多年——但每一项功能的背后，都隐藏着层层权限提示、厂商前缀以及生命周期方面的怪异行为，使得将它们集成到 React 组件中变得痛苦不堪。

本文将详细介绍四种用于语音和摄像头输入的浏览器能力：带有中间结果的实时语音识别、枚举用户的摄像头和麦克风、以能够应对权限撤销的方式查询权限状态，以及使用 Shift 键作为按住说话（Push-to-Talk）的修饰键。和往常一样，我们将先从手动实现开始，以便你理解其底层机制，然后将其替换为来自 ReactUse 的专用钩子函数。最后，我们将把这四种功能组合成一个完整的语音搜索组件，包含设备选择器、权限门禁以及按住录音的交互功能。

1. 实时语音识别

手动实现方式

Web Speech API 是较早出现的浏览器 API 之一，但从未真正标准化——Chrome 浏览器以 webkitSpeechRecognition 的形式提供该功能，而在大多数引擎中，无前缀的 SpeechRecognition 仍然缺失。最小可行的 React 封装如下：

function ManualSpeechRecognition() {
  const [transcript, setTranscript] = useState("");
  const [listening, setListening] = useState(false);
  const recognitionRef = useRef<any>(null);

  useEffect(() => {
    const SR =
      (window as any).SpeechRecognition ||
      (window as any).webkitSpeechRecognition;
    if (!SR) return;
    const recognition = new SR();
    recognition.
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。