插入或拔出耳机时如何更改音频设备

如何解决插入或拔出耳机时如何更改音频设备

我想通过WebRTC项目中的用户选择来更改音频输出设备。例子

内部
扬声器

我使用了以下代码

// Audio Inputs
  const [audioInputschanged,setAudioInputschanged] = useState(false);
  const [selectedAudioOutput,setSelectedAudioOutput] = useState(null);
  const [audioInputs,setAudioInputs] = useState([]);

  navigator.mediaDevices.ondevicechange = (event) => {
    setAudioInputschanged(true);
    navigator.mediaDevices.enumerateDevices()
      .then((devices) => {
        setAudioInputs(devices);
        devices.forEach((device) => {
          device.kind === 'audiooutput' && console.log(device.deviceid);
        });
      });
  }

  const closeAudioPopup = () => setAudioInputschanged(false);

  const handleSelectedAudio = (deviceid) => {
    otPublisher && otPublisher.current.state.publisher.setAudioSource(deviceid);
    closeAudioPopup();
  }

  const renderAudioDevices = () => {
    return audioInputs.map((device) => {
      const { kind,deviceid,label } = device;
      return kind === 'audiooutput' && (
        <li
          key={deviceid}
          onClick={() => setSelectedAudioOutput(deviceid)}
        >
          {label}
        </li>
      );
    });
  }

  useEffect(() => {
    handleSelectedAudio(selectedAudioOutput);
  },[selectedAudioOutput])

将基于状态值显示弹出窗口。当我插入或拔下USB麦克风时，此方法有效。但是插入或拔下3.5毫米耳机时无法使用。代码中有什么错误？