Move jitsi iframe in the dom without rejoining the call

Developers Jitsi Meet API
1

Hello,
We are building a video conference feature into our app and we are using jitsi, out app is built with nextjs and we are using the jitsi react sdk

we want to be able to move the IFrame in the dom without rejoin, so when the user in a specific page the IFrame shows in specific place inside the page but when the user navigate to another page we move the IFrame to a floating popup ( like Microsoft Teams for example )

we can’t just move the IFrame because browsers will reload the IFrame so the user must join again

what i thought about is somehow we can access the JitsiConference object created inside the IFrame when the user join the call and store it in global state then when we want to move the IFrame we remove the old IFrame and just pass the JitsiConference we have to the new IFrame in the new place so it can continue the same call

so for example the JitsiMeeting component would have:

  • a prop called onJitsiConferenceCreate for example that takes a function and pass JitsiConference to it
  • a prop called intialJitsiConference that we can pass JitsiConference object to and it uses it instead of creating a new one

PS: there is currently an workaround but would be very hard to impelement in nextjs or even impossible which is to use Shadow DOM and slot based on this hack Reparenting iframes without reloading · Issue #5484 · whatwg/html · GitHub

2

After research I don’t think the approach I described would work,

I went with another approach by hoisting the iframe element to a common parent and give it position absolute and put it relative to div elements in the ui with floating ui, so when the user navigate away the iframe isn’t reloaded and and I just have to tell floating ui to change the the div element the iframe should be positioned relative to,. This is the approach element is doing with jitsi

I am happy to elaborate if some one wanted more info