React 语音识别在 IP 上无法工作

Question

我无法弄清楚如何允许浏览器使用我的麦克风。我用的是

npm-speech-recognition

图书馆。 我的代码如下：

import React, { useEffect } from "react";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";
import styles from "./MicrophoneSpeech.module.css";

const MicrophoneSpeech = () => {
  const {
    transcript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition,
  } = useSpeechRecognition();

  if (!browserSupportsSpeechRecognition) {
    return <span>Browser doesn't support speech recognition.</span>;
  }

  return (
    <div>
      <p>Microphone: {listening ? "on" : "off"}</p>
      <button onClick={SpeechRecognition.startListening}>Start</button>
      <button onClick={SpeechRecognition.stopListening}>Stop</button>
      <button onClick={resetTranscript}>Reset</button>
      <p>{transcript}</p>
    </div>
  );
};
export default MicrophoneSpeech;

简单，取自文档。

当我在 wifi IPv4（

http://192.XXX.X.X:3000/wall

）上启动应用程序并单击按钮以允许麦克风开始录音时，它会立即停止。网址旁边有麦克风的符号，表示麦克风被阻止。我注意到当我在本地主机时，这并没有发生。

我尝试在 Windows 中禁用防火墙，但没有成功。

Answer 1

在浏览器中，您可以转到设置/标志，在那里您可以导入您想要为其麦克风/摄像头授予用于开发目的的权限的特定 IP。