reactjs Twilio视频聊天 - 将视频附加为远程媒体

Question

我是新手，并且正在开发基于twilio视频聊天的组件。有人建议，当有人加入通话时，此人的视频会附加到远程媒体上吗？

我发现了一些链接，指的是建立一个反应动力的Twilio视频聊天。

https://www.twilio.com/blog/2016/03/building-a-react-powered-video-chat.html

Answer 1

Twilio开发者传道者在这里。

当participant加入视频会议室并且您想要观看他们的视频并听取他们的音频时，您需要将他们的incoming media tracks连接到您应用中的视频元素。您可以收听参与者的trackAdded和trackRemoved事件，以便了解何时附加和分离曲目。例如：

room.on('participantConnected', function(participant) {
  participant.on('trackAdded', function(track) {
    // Attach the track to a DOM element that you have access to.
    // This creates a <video> element for VideoTracks and an <audio> element for AudioTracks
    track.attach(element);
  });

  participant.on('trackRemoved', function(track) {
    track.detach();
  })
}

我对React本人很陌生，但我认为Eddie在博客文章中附加媒体的方式，在JSX中使用ref，然后在组件生命周期事件中使用this.refs.localMedia对元素的引用和附加媒体，是一种很好的方法。

请注意，该博文使用了已弃用的视频对话API，而不是新的Rooms API。然而，参与者/跟踪模型以及将跟踪链接到DOM是类似的。

让我知道这是否有帮助。