0
153
Viewsel código de video twilio deja una etiqueta de video cuando separo la pista
Así que estoy un poco confundido.
La forma en que esto funciona es que cada persona en mi videollamada ya tiene espacio en la interfaz de usuario cuando se unen. Cuando encienden su video, el código adjunta su pista a su respectivo espacio div en la interfaz de usuario.
Solo para mayor claridad, aquí está el código de inicio del video. No está relacionado con esta pregunta, pero es bueno para el contexto.
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; } ); }); }); }); }y aquí está el código del video final, esto está en contexto:
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); } }ahora mira lo que pasa cuando empiezo y detengo el video tres veces
y el html de la imagen de arriba
Intenté agregar código para luego eliminar manualmente los elementos de video después de separar la track , pero no tuve éxito. Me pregunto si ustedes pueden ayudarme. Gracias.
2 answers
Answer question0
Desarrollador evangelista de Twilio aquí.
El detach de separación en realidad devuelve el elemento multimedia al que se adjuntó previamente la pista, lo que le permite eliminar el elemento multimedia de la página si ya no lo necesita.
Tampoco necesita pasar div para detach , la pista de video es consciente del elemento al que está adjunta. Esto significa que tampoco necesita realizar la búsqueda getElementById .
Te recomiendo que actualices la función endvideo a lo siguiente:
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); } }0
Es sorprendente y, sin embargo, realmente doloroso lo fácil que fue arreglar esto.
Aquí está el código endvideo() sin cambios:
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); }ahora aquí está el nuevo código 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); } }esta es la diferencia:
div.innerHTML = '';