Reactjs Twilio+React：如何在通话中更改音频或视频输入设备？

我一直在看文档，但我想不出来。当一个用户选择不同的设备时，其他用户就听不到那个人了。这一定意味着取消发布曲目的工作进展顺利，对吧？我不确定

这是我的代码，供用户更改设备：

const setDevice = (device) => {
    if(!room) return
    let deviceId = device.deviceId
    const localParticipant = room.localParticipant

    if(device.kind === 'audioinput'){
        setSelectedAudioDevice(device.label)

        Video.createLocalAudioTrack({
            deviceId: {exact: deviceId}
        }).then((localAudioTrack) => {
            const tracks = localParticipant.audioTracks

            tracks.forEach((track) => {
                localParticipant.unpublishTrack(track.track)
            })

            localParticipant.publishTrack(localAudioTrack)
        })
    } else if(device.kind === 'videoinput'){
        setSelectedVideoDevice(device.label)

        Video.createLocalVideoTrack({
            deviceId: {exact: deviceId}
        }).then((localVideoTrack) => {
            const tracks = localParticipant.videoTracks

            tracks.forEach((track) => {
                localParticipant.unpublishTrack(track.track)
            })

            localParticipant.publishTrack(localVideoTrack)
        })
    }
}

每个参与者都有自己的订阅曲目的组件。然而，这段代码来自一个Twilio示例，所以我不完全确定它是如何工作的

const trackpubsToTracks = (trackMap) =>
    Array.from(trackMap.values())
      .map((publication) => publication.track)
      .filter((track) => track !== null);

useEffect(() => {
    setVideoTracks(trackpubsToTracks(participant.videoTracks));
    setAudioTracks(trackpubsToTracks(participant.audioTracks));

    const trackSubscribed = (track) => {
      if (track.kind === "video") {
        setVideoTracks((videoTracks) => [...videoTracks, track]);
      } else if (track.kind === "audio") {
        setAudioTracks((audioTracks) => [...audioTracks, track]);
      }
    };

    const trackUnsubscribed = (track) => {
      if (track.kind === "video") {
        setVideoTracks((videoTracks) => videoTracks.filter((v) => v !== track));
      } else if (track.kind === "audio") {
        setAudioTracks((audioTracks) => audioTracks.filter((a) => a !== track));
      }
    };

    participant.on("trackSubscribed", trackSubscribed);
    participant.on("trackUnsubscribed", trackUnsubscribed);

    return () => {
      setVideoTracks([]);
      setAudioTracks([]);
      participant.removeAllListeners();
    };
  }, [participant]);

  useEffect(() => {
    const videoTrack = videoTracks[0];
    if (videoTrack) {
      videoTrack.attach(videoRef.current);

      return () => {
        videoTrack.detach();
      };
    }
  }, [videoTracks]);

  useEffect(() => {
    const audioTrack = audioTracks[0];
    if (audioTrack) {
      audioTrack.attach(audioRef.current);

      return () => {
    audioTrack.detach();
      };
    }
  }, [audioTracks]);

---

如果有人知道我如何处理通话中的设备切换，我将不胜感激。

这里是Twilio开发者福音传道者

我发现这里的最佳操作顺序是：

取消发布会议室中本地参与者的现有曲目，这将触发会议室中任何其他参与者的trackRemoved事件 从页面分离现有曲目 完全停止轨道 使用createLocalVideo | AudioTrack请求新曲目 将新曲目附加到页面 将新曲目发布到会议室，为其他参与者触发会议室上的trackAdded事件 这对于不允许您一次访问多个摄像头的iOS设备尤其如此

以下是我以前使用过的一些代码，但不是在React应用程序中使用的：

功能止回阀{ tracks.forEachfunctiontrack{ 如果轨道{track.stop；} } } 函数updateVideoDeviceevent{ const select=event.target； const localParticipant=activeRoom.localParticipant； 如果选择.value！=={ const tracks=Array.fromlocalParticipant.videoTracks.values.map 功能跟踪出版物{ 返回trackPublication.track； } ; localParticipant.unpublishtracks； 可拆卸轨道； 停车场； Video.createLocalVideoTrack{ deviceId:{exact:select.value} }.Then函数本地视频跟踪{ localParticipant.publishTracklocalVideoTrack； loglocalParticipant.identity+'添加的曲目：'+localVideoTrack.kind； const previewContainer=document.getElementById'local-media'； attachTracks[localVideoTrack]，previewContainer； }; } } 您可以在和中看到整个应用程序

我想你提到的React例子也是我的。事实上，我曾尝试在分支机构的回购协议中添加相机更改。那显然是一年前的事了，但是。希望这也能为你指明正确的方向