Question

该应用程序可以正常工作，进入房间，当有人进入房间时，会显示新的摄像机，等等。但是当我出门时，出现以下错误

ERROR TypeError: Cannot read property 'getTracks' of undefined

     at detachParticipantTracks (video.component.ts: 72)

     at Map.forEach (<anonymous>)

     at Room. <anonymous> (video.component.ts: 143)

     at Room.emit (events.js: 146)

     at RoomV2.stateChanged (room.js: 485)

     at RoomV2.emit (events.js: 151)

     at RoomV2.transition (statemachine.js: 367)

     at RoomV2.preempt (statemachine.js: 211)

     at RoomV2._disconnect (room.js: 136)

     at RoomV2._disconnect (room.js: 194)

我的代码试用版

//从DOM分离给定的轨道 detachTrack（track：any）{ track.detach（）。forEach（（element）=> { element.remove（）; }）; }

// A new RemoteTrack was published to the Room.
trackPublished(publication: any, container: any) {
  if (publication.isSubscribed) {
    this.attachTrack(publication.track, container);
  }
  publication.on('subscribed', (track) => {
    console.log('Subscribed to ' + publication.kind + ' track');
    this.attachTrack(track, container);
  });
  publication.on('unsubscribed', this.detachTrack);
}
    // A new RemoteParticipant joined the Room
participantConnected(participant: any, container: any) {
  participant.tracks.forEach((publication) => {
  participant.on('trackUnpublished', this.trackUnpublished);
}
// A RemoteTrack was unpublished from the Room.
trackUnpublished(publication: any) {
  console.log(publication.kind + ' track was unpublished.');
}

// Detach the Participant's Tracks from the DOM.
detachParticipantTracks(participant: any) {
  const tracks = this.getTracks(participant);
  tracks.forEach(this.detachTrack);
}


private async getAuthToken(name: string, room: string) {
  const auth = await this.http
  .post('http://localhost:8000/token', {name, room}).toPromise();
  return auth;
}

// Get the Participant's Tracks.
getTracks(participant:any) {
return Array.from(participant.tracks.values()).filter(publication => {
  return publication.track;
}).map((publication) => {
  return publication.track;
});
}
async onRoom(){
if(!this.room || !this.user){
  alert('Llena todos los datos')
  return;
}
const token = await this.getAuthToken(this.user, this.room);
try {
  await connect(
      token, {
          name,
      }).then(room =>
        {
          this.activeRoom = room;

          // Log new Participants as they connect to the Room
          const remoteMediaContainer = document.getElementById('remote-media');

          // Log Participants as they disconnect from the Room
          room.once('participantDisconnected', participant => {
            console.log(`El participante "${participant.identity}"se está desconectando`);
          });


          room.on('participantDisconnected', participant => {
            console.log(`El participante ${participant.identity} se desconecto` );
            this.detachParticipantTracks(participant);
          });

          room.on('disconnected', room => {
              console.log(`La sala ${room} se ha desconectado con éxito`);
              if(this.previewTracks) {
                this.previewTracks.forEach(track=>{
                  track.stop();
                });
                this.previewTracks = null;
              }
              this.detachParticipantTracks(room.localParticipant);
              room.participants.forEach(this.detachParticipantTracks);
              this.activeRoom = null;
          });


        });
} catch (error) {
    return console.error(`Unable to connect to Room: ${error.message}`);
}
}

leave(){
this.activeRoom.disconnect();

}

我想要的是，当我离开房间的另一侧时，屏幕非常漂亮，我的相机也恰好是我的一侧

Answer 1

不能完全确定它在Angular中如何工作，但是在使用Jquery和Twilio js库的应用程序中执行此操作时，我遇到了相同的问题。每当我连接到房间时，我都会将.connect方法返回的activeRoom对象复制为全局变量。以后可以用来断开房间。在您的情况下，当您调用Leave（）方法时，activeRoom对象是未定义的。希望对您有所帮助。

我在Angular中离开房间twilio-programmable-video时出错

1 个答案: