gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 17:14:05 24 4
gpt4 key购买 nike

所以我有点困惑。

它的工作方式是,我的视频通话中的每个人在加入时都已经在用户界面中拥有了空间。当他们打开视频时,代码会将他们的轨道附加到用户界面上各自的 div 空间。

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

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 次时会发生什么

2 blank chat boxes when there should only be the video

和上图的html

the html

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

最佳答案

此处为 Twilio 开发人员布道师。

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

您也不需要将 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);
}
}

关于javascript - 当我分离轨道时,twilio 视频代码留下视频标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69007946/

24 4 0