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);
    }
  }

さて、ビデオを三回再生して止めるとどうなるか見てください

そして上の画像のHTML

私は、track を切り離した後に動画要素を手動で削除するためのコードを追加しようとしましたが、うまくいきませんでした。皆さんに助けてもらえるかと思い、お願いします。ありがとうございます。

回答 #1

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);
    }
}

回答 #2

これを直すのがどれほど簡単だったかは驚くべきことであり、それでいて本当に痛みを伴うことでもあります。

変更なしの 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 = '';