Search code examples
reactjswebrtc

Move a video or audio element to another place without disconnecting stream (Cut & Paste)


I am a frontend developer in a startup that is working on a video conference platofrm and we want to move the participant component to a sidebar when they mute their camera and place it back when they unmute without disconnecting the stream.

Something like what whereby is doing.


Solution

  • Moving elements in the DOM may cause them to be paused. Calling play() after moving them should suffice. Alternatively, use a separate element that you don't move and that is not visible.