所以我有点困惑。
它的工作方式是,我的视频通话中的每个人在加入时都已经在用户界面中拥有了空间。当他们打开视频时,代码会将他们的轨道附加到用户界面上各自的 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 次时会发生什么
和上图的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/