Docking & undocking the IFrame

Developers Jitsi Meet API
#1

Hello,

I’m trying to implement the docking/undocking feature in my application based on the event ‘iframeDockStateChanged’.

Is there some documentation on how to do that ?

On my own, I did the following:

api.addListener("iframeDockStateChanged", (state) => {
      if(!state.docked) {
        this.win = window.open(`about:config?width=${640}&height=${480}&?ontop`, 'newWindow', `height=600, width=800, popup=yes, scrollbars=auto, resizable=no, location=no, status=no`);
        this.win.document.open();
        this.win.document.write("<!DOCTYPE html><html style='overflow:hidden;height: 100%; width: 100%;margin: 0'><head></head><body id='container' style='height: 100%; width: 100%;margin: 0'></body></html>");
        this.win.document.querySelector('#container').appendChild(api.getIFrame());
        this.win.document.close();
        this.win.onload = () => {
          console.log("loaded");
        }

        this.win.onbeforeunload = () => {
          console.log("unloaded");
          // reconnect
          api = new window["JitsiMeetExternalAPI"](domain, options)
        }
      }
    });

When the external window is opened, the internal Iframe instance is disposed. And when the external window is closed, I reinstantiate the IFrame.

Is there a way to avoid being disconnected when transferring the IFrame?

Thanks in advance

#2

Instead of passing the IFrame DOM element, I preferred to inject the Jitsi library to the external Window and load it.

Manipulation is done from the main window which can subscribe to Jitsi events from the external window.

Doing that, it is easy to customize the toolbar button when in the main window (to keep only the undock button) and when in the external window (dock button only)

In the same way, capturing the “leave” action from the external window avoid to reload the conference when the external window is closed

But, for sure, doing that way is not the right way to avoid a disconnect/reconnect.

#3

That feature ended up being scrapped so the code will be going away. It’s not even functional, the buttons just send the event and expect the host app to do something about it.

This was a prototype for Electron, and we ended up opening the meeting in a new window.

#4

Thanks for our answer.

As said, I succeeded to display the dock button when in the external window and capture the event. This works nice. There is “just” a short disconnection during the switch.

I tried an other way by taking the iframe.src. But doing that, I didn’t succeed to capture events from the external window. And the conference is disconnected too. It is like the DOM is reloaded.

I don’t know if there is a way to avoid reloading the DOM and so to transfer the instance directly. Seems to be more a JS problem than a Jitsi problem.