Import Jitsi API for use in React web application

#1

There seems to be a disconnect between the concept of use of Jitsi’s API in a Node or React application (using something like create-react-app) and the method by which the documentation suggests to import the library.

To be clear, this is not an acceptable answer to this question (I’ve seen this reply to many other similar posts on here before joining to ask this):

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

There must be some way to import this properly.

I’ve gone through the code at jitsi-meet and lib-jitsi-meet and for the life of me cannot figure out how to get the API method library into my React app so I can programmatically make API calls inside React.

I’m not sure how you can make the claim about lib-jitsi-meet, “… use Jitsi Meet API to create Jitsi Meet video conferences with a custom GUI.” when there doesn’t seem to be a way to import this library anywhere except HTML.

There’s no node module and no documentation on how to import this properly.

I’ve tried git cloning the lib-jitsi-meet repo and generating the lib-jitsi-meet.min.js, then importing this, but the API doesn’t seem to be accessible.

Can someone please explain clearly, with a code example how I might import and call the API?

We are hosting our own Jitsi video bridge to make API calls against, but it’s worthless if I can’t integrate the API library.

#2

This is as close as I’ve gotten:

import JitsiMeetJS from "./external_api.min.js";

const domain = "**my jitsi domain**";
const options = {
  roomName: "JitsiMeetAPIExample",
  width: 700,
  height: 700,
  parentNode: document.querySelector("#meet")
};
const api = new JitsiMeetJS.JitsiMeetExternalAPI(domain, options);

index.js:15 Uncaught TypeError: _external_apiMin.default.JitsiMeetExternalAPI is not a constructor
at Object.parcelRequire.index.js.react (index.js:15)
at newRequire (src.e31bb0bc.js:47)
at src.e31bb0bc.js:81
at src.e31bb0bc.js:120

#3

It will not work with importing. You need a script tag on your page like shown in the example.

#4

You realize this means none of your methods can be called within our React application, right? This makes it basically impossible to use any framework/library to make calls to your API.

I realize you can make calls inside your Jitsi iframe, but this simply isn’t possible if your methods are undefined inside my app.

I’m not sure how it can be called an API if the only way to interact with it is through the browser.

#5

What about trying const api = new JitsiMeetJS(domain, options)?

#6

There needs to be a way for the app to recognize the methods from the api; they are undefined if you can’t import the API, which means you can run a build, in dev or production mode, and your app won’t bundle. In short, you can’t use this API in a modern Webpack/Parcel app, or at least Jitsi hasn’t explained how that might be possible.

Clearly the Jitsi devs either don’t understand this concept or have no interest in supporting modern web development using their API; it’s the same answer in every similar question posed, which also ignores the actual request, “use the script tag”.

This of course makes it nearly impossible to use the API dynamically.

It’s weird to me that there seems to be a fundamental lack of understanding of how React, Vue and Angular development is done when discussing this API with Jitsi.

What I’m requesting is extremely normal usual of a JS API, yet they seem to play dumb like they don’t know what I’m talking about.

#7

So you’re using typescript? Is that it? You’re looking for type definitions?

#8

Nope, not using TS. I’d love to, but it would unnecessarily complicate what is otherwise a fairly simple app.

What I’m trying to do is simply using the external_api.min.js to make calls inside my app. I can’t do that if I can’t import it. And I can’t import it because it appears that it’s only exposed inside the context of the jitsi-meet full application; the API isn’t exported in a way that it can be imported - this is stated above.

Edit - to give the most simple example possible: use create-react-app, webpack or parcel, or however you bundle your app. Import your libraries, like React, etc.

Then figure out how you import this API in that same file. I’ve never had this much difficulty but again, as damecho stated it won’t work with importing, so it’s either by design or lack thereof.

I don’t think there’s a simple solution.

#9

I’d say in short, the web-side of the jitsi-meet repo is not built like a consumable library–a conclusion you have likely already reached emphatically numerous times. It is instead intended to be used together with a jitsi server/media-bridge deployment; it is mostly the UI piece of that application. It does have some other little bits and bobs to it, like the web external api. There are a few ways around this right now that I can think of:

  1. Really, to beat a dead horse, is to use the script tag. If you’re using a react web app, I’m not sure why you cannot use a script tag in your html, or dynamically load the script tag via js using dynamically created html elements, and use the global variable JitsiMeetExternalAPI. This is what I have to do for jitsi-meet-spot and what other consumers have had to do. I will readily admit this is not the most modern way to work nowadays which has the general assumption that things are in packages, but I will also readily say that it’s still doable from a technical side and has some advantages over bundling it into a web app and isn’t an outlandish idea as some libraries are still loaded this way (google api comes to mind right now). Plus, yes, jitsi-meet is old, especially by js standards so there is some work needed to make it a package and that work would include internal process change. Every once in a while there’s conversation of converting parts of jitsi-meet into npm modules, but generally those discussions have some back and forth and things haven’t changed.
  2. Dump the built external api js file into your app and import it. That’s what I thought you were trying to do and it seemed to work for me. I didn’t get IntelliSense but I was still able to initialize the meeting iframe.
  3. Write your own lib and even open source that or do what you want with it. This isn’t a convenient solution as it requires custom work. The external api implementation is a convenience wrapper around creating an iframe, loading the meeting url, and sending/receive messages via the standard post message api. The guts of the meeting logic still occur within the jitsi-meet app displayed in the iframe.
#10

I actually tried this a number of ways but I get errors referring to dependencies from that file, which relies on other files further up the folder tree. I wasn’t able to call the API from within React.

I am actually loading the script tag using an appended script element to control when it loads and define the options dynamically. The issue is doing things like added event listeners for API events that I can use inside React, as an example.

I am now considering packaging this myself, as you suggested and I’ll post here to let you guys know if I do.

For the record, I can use the script tag and make this work. But again, as we’ve discussed, a script tag in HTML doesn’t exist inside a React component file, and due to being unable to import the API, that means I can’t call the API using any React component.

I am going to try pulling in their entire repo and see if I’m able to get it to allow me to make calls, but I tried this before a number of ways and it simply failed.