当我分离轨道时，twilio 视频代码留下视频标签

Question

所以我有点困惑。

其运作方式是，我的视频通话中的每个人在加入时都已经在 ui 中拥有 space。当他们打开视频时，代码会将他们的曲目附加到 ui.

上各自的 div space

为清楚起见，这里是开始视频代码。它与这个问题无关，但对上下文有益。

startvideo(){
    navigator.mediaDevices.getUserMedia({video: true}).then((stream)=>{
      createLocalVideoTrack({
        deviceId: stream.id
      }).then(localVideoTrack =>{
        return this.videoclient.localParticipant.publishTrack((localVideoTrack)).then(publication =>{
          this.localvideotrack = localVideoTrack;
          let div = document.getElementById( this.videoclient.localParticipant.sid + 'vid');
          div.appendChild(localVideoTrack.attach());
          this.removenovideohtml(this.videoclient.localParticipant.sid);
          this.mms.getDevicesOnComputer();
          this.devicessubscription = this.mms.receiveDevices()
            .subscribe(
              (req: any)=>{
                this.devicesoptions = req;
              }
            );
        });
      });
    });
  }

这是结束视频代码，这是在上下文中：

endvideo(){
    if(this.localvideotrack != null){
      let div = document.getElementById( this.videoclient.localParticipant.sid + 'vid');
      this.localvideotrack.detach(div);
      this.localvideotrack.stop();
      this.videoclient.localParticipant.unpublishTrack(this.localvideotrack);
      this.addremovevideohtml(this.videoclient.localParticipant.sid);
    }
  }

现在看看当我开始和停止视频 3 次时会发生什么

和上图的html

我尝试添加代码，然后在分离 track 后手动删除视频元素，但没有成功。想知道你们是否可以帮助我。谢谢。

Answer 1

解决这个问题是多么容易，这令人惊讶，但也确实很痛苦。

这是未更改的 endvideo() 代码：

endvideo(){
    if(this.localvideotrack != null){
      let div = document.getElementById( this.videoclient.localParticipant.sid + 'vid');
      this.localvideotrack.detach(div);
      this.localvideotrack.stop();
      
      this.videoclient.localParticipant.unpublishTrack(this.localvideotrack);
      this.addremovevideohtml(this.videoclient.localParticipant.sid);
    }

现在这是新的 endvideo() 代码：

endvideo(){
    if(this.localvideotrack != null){
      let div = document.getElementById( this.videoclient.localParticipant.sid + 'vid');
      this.localvideotrack.detach(div);
      this.localvideotrack.stop();
      div.innerHTML = '';
      this.videoclient.localParticipant.unpublishTrack(this.localvideotrack);
      this.addremovevideohtml(this.videoclient.localParticipant.sid);
    }
  }

这是区别：

div.innerHTML = '';

Answer 2

这里是 Twilio 开发人员布道者。

detach method 实际上 returns 轨道之前附加到的媒体元素，这样您就可以在不再需要时从页面中删除媒体元素。

您也不需要将 div 传递给 detach，视频轨道知道它附加到的元素。这意味着您也不需要进行 getElementById 查找。

我建议您将 endvideo 函数更新为以下内容：

endvideo(){
    if(this.localvideotrack != null){
      const mediaElements = this.localvideotrack.detach();
      mediaElements.forEach(mediaElement => mediaElement.remove());
      this.localvideotrack.stop();
      this.videoclient.localParticipant.unpublishTrack(this.localvideotrack);
      this.addremovevideohtml(this.videoclient.localParticipant.sid);
    }
}

当我分离轨道时，twilio 视频代码留下视频标签

twilio video code leaving video tag behind when I detach track

javascript

html

typescript

twilio

twilio-video