Question

我正在尝试在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}`);
  }
);

Answer 1

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

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

1 个答案: