javascript - 当我分离轨道时,twilio 视频代码留下了视频标签
问题描述
所以我有点困惑。
这样做的方式是,我的视频通话中的每个人在加入时都已经在 ui 中有空间。当他们打开视频时,代码会将他们的曲目附加到 ui 上各自的 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
方法实际上返回轨道先前附加到的媒体元素,如果您不再需要该媒体元素,则可以将其从页面中删除。
您不需要传递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);
}
}
推荐阅读
- python - 使用 Conv1D 层时出现 ValueError
- flutter - BlocProvider 中的惰性标志有什么影响?
- android - 如何从视图中获取 TextView 和 Button 列表
- automated-tests - 点击发送请求时出现 Cypress 400 XHR 错误
- javascript - 使用 formdata 启动 axios 发布请求时反应更新页面
- java - 如何正确调用多个函数?
- android - 无法使用 API 16 和 API 19 启动 Flutter 应用程序
- sql - SELECT 以从由连接站对组成的数据中查找每个站的终端站
- reactjs - 如何在内容丰富的富文本中呈现超链接?
- php - PHP解析错误:语法错误:意外','