无法在 Twilio 中获取远程视频轨道答案

【问题标题】：Can't fetch remote video track in Twilio无法在 Twilio 中获取远程视频轨道
【发布时间】：2020-01-21 09:00:24
【问题描述】：

我正在尝试在 Twilio 中构建 P2P 呼叫应用程序。问题不是获取远程视频轨道。我在 React 中使用 twilio-video。我关注了this article。最初我收到一个错误，说“track.attach()”不是一个函数。

错误是：

track.attach is not a function

我在room.particpants.forEach() 运行时发现了这个错误。实际上，我已经成功获取了participants 和tracks 但这不能运行track.attach()。

roomJoined(room) {

  // Attach the Tracks of the room's participants.
  room.participants.forEach(participant => {
    console.log("participant", participant)
    var previewContainer = document.getElementById("remote-media");
    this.attachParticipantTracks(participant, previewContainer);
  });
}

// Attach the Participant's Tracks to the DOM.
attachParticipantTracks(participant, container) {
  var tracks = Array.from(participant.tracks.values());
  this.attachTracks(tracks, container);
}

// Attach the Tracks to the DOM.
attachTracks(tracks, container) {
  tracks.forEach(track => {
    console.log("track", track);
    container.appendChild(track.attach());
  });
}

控制台：

participant: {
  RemoteParticipant {audioTracks: Map(1), dataTracks: Map(0), …}
  identity: "guest"
  networkQualityLevel: null
  networkQualityStats: null
  sid: (...)
  state: "connected"
  audioTracks: Map(1)
    [[Entries]]
    0: {"MTXXXXXXXXXXXXXXXXXXXXXXf" => RemoteAudioTrackPublication}
   size: (...)
  __proto__: Map
  dataTracks: Map(0)
  [[Entries]]
  No properties
  size: (...)
  __proto__: Map
  tracks: Map(2)
    [[Entries]]
    0: {"MTXXXXXXXXXXXXXXXXXXXXXXf" => RemoteAudioTrackPublication}
    key: "MTXXXXXXXXXXXXXXXXXXXXXXf"
    value: RemoteAudioTrackPublication {trackName: "XXXXXXXXXXXXXXXXXXXXXX", 
    trackSid: "MTXXXXXXXXXXXXXXXXXXXXXXf", kind: "audio", …}
    1: {"MTXXXXXXXXXXXXXXXXXXXXXXd" => RemoteVideoTrackPublication}
    key: "MTXXXXXXXXXXXXXXXXXXXXXXd"
    value: RemoteVideoTrackPublication {trackName: "XXXXXXXXXXXXXXXXXXXXXX", 
    trackSid: "MTXXXXXXXXXXXXXXXXXXXXXXd", kind: "video", …}
    size: (...)
    __proto__: Map
videoTracks: Map(1)
[[Entries]]
0: {"MTXXXXXXXXXXXXXXXXXXXXXXd" => RemoteVideoTrackPublication}
key: "MTXXXXXXXXXXXXXXXXXXXXXXd"
value:
}

track: {
  isSubscribed: (...)
  isTrackEnabled: (...)
  publishPriority: (...)
  track: (...)
  trackName: "aXXXXXXXXXXX8"
  trackSid: "MXXXXXXXXXXXXXXf"
  kind: "audio"
}

实际上，我怀疑应用程序未能将 previewTracks 发送到 Twilio，但我认为这可行。最初，我得到了localTrack 和localTracksPromise。我在连接到 Twilio 时发送了这个。

// get preview Tracks
var localTracksPromise = this.previewTracks
  ? Promise.resolve(this.previewTracks)
  : createLocalTracks();

localTracksPromise.then(
  tracks => {
    window.previewTracks = this.state.previewTracks = tracks;
    var previewContainer = document.getElementById("local-media");
    if (!previewContainer.querySelector("video")) {
      this.attachTracks(tracks, previewContainer);
    }
  },
  error => {
    console.log(`Unable to attachh tracks: ${error.message}`);
  }
);

// send preview Tracks
if (this.state.previewTracks) {
  connectOptions.tracks = this.state.previewTracks;
}

twilioConnect(twilioToken, connectOptions).then(
  room => this.roomJoined(room),
  error => {
    console.error(`Unable to connect to Room: ${error.message}`);
  }
);

【问题讨论】：

标签： reactjs twilio

【解决方案1】：

您是否检查过订阅的曲目？如果订阅了曲目，则可以。

【讨论】：

这不是答案。这是一条评论。