[meet] [iframe API] Problem with events initializing external_api from a main window into a new window

Hi I want to initialize a Jitsi call in a new window.
So, to avoid having a secondary app for the second window, just secondary window for call, I tried something like:

const callWindow = window.open( ... );
const myDiv = document.createElement('div');
callWindow.document.body.append(myDiv);
api = new JitsiMeetExternalAPI( .... parentNode:myDiv );

This apparently works well, call is initialized etc.; the problem comes when trying to listen for events.
for example api.addEventListener('videoConferenceJoined', ()=>console.log('joined'))
Listeners don’t work, and seems related with the way I’m invoking Jitsi, in new window.

Do you know if this could be a bug candidate? Or maybe you recommend to just create a second app for the second window instead of trying to have full control from the main window and main app? If so, why?

What I find is that, if second window has the <script> with JitsiMeetExternalApi, it works well invoking from main window/app.

Hi.
Please, How did you solve it?

To workaround, I just initialized Jitsi api in the child window instead of the main window.

1 Like

@pablo.estornut could you please share code sample on how you did this? Even I’m trying to do something similar with custom gui where in landing page I will have a button called host meeting and on clicking this I want to open a new page and initiate conference. Please help.

I have the same Problem as @pablo.estornut, where I have an app (angular) and I want to open an extra Window to display Jitsi. This is what I am doing:

this.externalWindow = window.open(....);

  handleVideocall(): void {
    this.api = new JitsiMeetExternalAPI(
      {
        roomName: 'room123',
        parentNode: this.externalWindow.document.getElementById('jitsi-video-container'),
      };
    );
    this.api.executeCommand('subject', 'My Videochat');
    this.api.addEventListeners({
      videoConferenceLeft: this.onVideoConferenceLeft.bind(this),
    });
  }

  onVideoConferenceLeft(value) {
    console.log('Videochat left');
  }

The first part works, Jitsi api is created and the Videochat is displayed. But this.api.executeCommand(...) and this.api.addEventListeners(...) is not working for me!
When Initializing the Jitsi api in the child window, like Pablo suggeted, I cant pass a Function from my main app to the onVideoConferenceLeft event listener.

Does anyone has an idea how get this working?