Can't Seem to Get iframe API to Work, Would Love Just a Basic Example

Hi there,

I am self hosting Jitsi Meet and followed the Docker guide at Self-Hosting Guide - Docker · Jitsi Meet Handbook

I have the jitsi meet web container video embedded fine in my application but I just can’t get anything from the api documentation to work.

This is my initialisation code:

<script src="https://meet.jit.si/external_api.js"></script>
<script>
    window.conferenceData = {
        domain: 'meet.my-domain.co.uk',
        roomName: '{{ event.channel }}',
        email: '{{ member.email }}',
        displayName: '{{ member.fullname }}',
    };

    const options = {
        roomName: window.conferenceData.roomName,
        width: 500,
        height: 500,
        parentNode: document.querySelector('#conference'),
        userInfo: {
            email: window.conferenceData.email,
            displayName: window.conferenceData.displayName,
        },
        configOverwrite: {
            requireDisplayName: true,
            prejoinPageEnabled: false
        }
    };

    window.conferenceData.api = new JitsiMeetExternalAPI(window.conferenceData.domain, options);

So nothing outside the norm besides assigning the api to window.conferenceData.api.

As an example, when I call window.conferenceData.api.executeCommand('toggleVideo'); I get undefined

The same applies for window.conferenceData.api.executeCommand('toggleTileView'); .

I don’t want to make this post too long, but another example I’ve tried is

window.conferenceData.api.executeCommand('displayName', 'New Nickname'); and that doesn’t work either unfortunately.

The only things that seem to work when using the api object are some attributes sucg the _width, _height and iframe attributes, e.g. window.conferenceData.api._width returns 500, same for _height, which is correct.

window.conferenceData.api.dispose() also seems to work.

Ideally, I am just looking to try and find out why some of the methods aren’t working as intended and how to fix it. I would love to be able to get the participant info so that I could then build some functions to pin participants or toggle the tile view.

If there’s any more information I can provide please let me know.

Cheers,
Martin

I am not a javascript expert,
can you try changing : window.conferenceData.api = new JitsiMeetExternalAPI(window.conferenceData.domain, options);
to something like const api =new JitsiMeetExternalAPI(window.conferenceData.domain, options);
then try api.executeCommand(‘toggleVideo’);

1 Like

Thanks, I luckily managed to get it working.

Think it was a couple of factors.

One was changing the url of the js script to be from my domain, so

<script src="https://mydomain.co.uk/external_api.js"></script>

instead of

<script src="https://meet.jit.si/external_api.js"></script>

and secondly, putting the jitsi initialisation in a set timeout. Using $(document).ready didn’t seem to be enough.

$(document).ready(function () {
    setTimeout(function() {

        window.conferenceData.api = new JitsiMeetExternalAPI(window.conferenceData.domain, options);

    }, 5000);
});

Just curious is there an advantage of using window.conferenceData.api over just const api?
I have seen myself about settimeout helps ( but only in case when using sendTextmessage over websocket, else it throws an error socket not defined or something like that)

I don’t think so, it just helps in my situation due to the javascript all being compiled in to one file so that I can check for window.conferenceData instead of checking if an api variable exists and prevent others on other pages.