0

我一直在查看文档，但我无法弄清楚。当用户选择不同的设备时，其他用户将无法再听到该人的声音。这一定意味着取消发布曲目的事情进展顺利，对吗？我不确定。

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

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]);

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

4

1 回答 1

0

Twilio 开发人员布道者在这里。

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

  1. 从房间中取消发布本地参与者的现有曲目，这将为trackRemoved任何其他参与者触发房间上的事件
  2. 从页面中分离现有轨道
  3. 完全停止轨道
  4. 请求新曲目createLocal(Video|Audio)Track
  5. 将新曲目附加到页面
  6. 将新曲目发布到房间，trackAdded为其他参与者触发房间上的事件

对于不允许您一次访问多个摄像头的 iOS 设备尤其如此。

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

function stopTracks(tracks) {
  tracks.forEach(function(track) {
    if (track) { track.stop(); }
  })
}

function updateVideoDevice(event) {
  const select = event.target;
  const localParticipant = activeRoom.localParticipant;
  if (select.value !== '') {
    const tracks = Array.from(localParticipant.videoTracks.values()).map(
      function(trackPublication) {
        return trackPublication.track;
      }
    );
    localParticipant.unpublishTracks(tracks);
    detachTracks(tracks);
    stopTracks(tracks);
    Video.createLocalVideoTrack({
      deviceId: { exact: select.value }
    }).then(function(localVideoTrack) {
      localParticipant.publishTrack(localVideoTrack);
      log(localParticipant.identity + ' added track: ' + localVideoTrack.kind);
      const previewContainer = document.getElementById('local-media');
      attachTracks([localVideoTrack], previewContainer);
    });
  }
}

你可以在 GitHub 上的这个 repo 中看到整个应用程序，我在这里写过。

我认为您所指的 React 示例也是我的示例之一。实际上，我尝试在分支上的该存储库中添加相机更改。显然是一年前，但您可以在此处查看更新。希望这也可以为您指明正确的方向。

于 2021-06-02T06:08:09.480 回答