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

【问题标题】：I have an error leaving the room twilio-programmable-video in Angular我在 Angular 中离开房间时出错 twilio-programmable-video
【发布时间】：2019-10-31 19:12:01
【问题描述】：

应用程序工作，进入房间，当有人进入房间时显示新的摄像头，等等。但是在一个出去的那一刻我得到以下错误

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.detach().forEach((元素) => { 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();

}

我想要的是，当我离开房间的另一边时，屏幕是安静的，我的相机是我的身边

【问题讨论】：

在您的 detachParticipantTracks 方法的上下文中，this 是什么？

标签： angular twilio

【解决方案1】：

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

【讨论】：