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

Posted 2023-02-16

【中文标题】我在 Angular 中离开房间时出错 twilio-programmable-video

【英文标题】：I have an error leaving the room twilio-programmable-video in Angular

【发布时间】：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 是什么？

【参考方案1】：

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