How can I use lib-jitsi-meet in an angular project?


#1

Hi,

I have installed a complete jitsi distrib on ubuntu. Everthing works on this platform.

Now, I want to use this platform from an custom-UI angular app using lib-jitsi-meet.

I added jitsi/lib-jitsi-meet, strophe.js:1.2.16, strophe-plugins-disco: 0.0.2 to my package.json and the corresponding scripts to my angular.json.

When I test my app, I got the following error: Error: Missing strophe-plugins (disco plugin is required)!

The thing is I cannot inject these three scripts in my html header. Angular places them at the end of my componnent view’s html file.

Thus, I cannot include the “?v=1” query string at the end of the call to the strophe.js disco plugin javascript file.

I have tried the trick from Boris Grozev : http://lists.jitsi.org/pipermail/commits/2018-February/033281.html, fail.

Can you help me ?


#2

I don’t think that is needed, you can ignore it.


#3

Ok, thanks.

I investagte a bit further in Caps.js:

export default class Caps extends Listenable {
/**
* Constructs new Caps instance.
* @param {Strophe.Connection} connection the strophe connection object
* @param {String} node the value of the node attribute of the “c” xml node
* that will be sent to the other participants
*/
constructor(connection = {}, node = ‘http://jitsi.org/jitsimeet’) {
super();
this.node = node;
this.disco = connection.disco;
if (!this.disco) {
throw new Error(
'Missing strophe-plugins ’
+ ‘(disco plugin is required)!’);
}

    this.versionToCapabilities = Object.create(null);

the thing is: at runtime, connection.disco is not defined. ( not just null, but even not defined !)

I tried to comment the check instruction ( in the minified jitsi meet lib), then I got: this.versionToCapabilities : cannot get versionToCapabilities of undefined.

For now I just included the strophe.js, strophe.disco.js strophe.caps.js and lib-jitsi-meet.min.js file in my web page.

In my app component, i have a copy /paste of the lib-jitsi-meet example.

What am I missing ?


#4

By tre way, considering this line:

this.disco = connection.disco;

the field connection.disco dos not exist and is never set by strophe.js or strophe.disco.js.
How can it work ?


#5

It does, the name is disco:


and then:


#6

Thank you very much for showing me the second code snippet !

I do not see the disco field. in chrome. I will continue me debug.


#7

I have no idea how angular works but you can always check jitsi-meet, the source code and use of lib-jitsi-meet is there or you can check it live on meet.jit.si.


#8

I have set up a jisti-meet on my laptop, and it works perfectly.

How is the strophe core code called ? I have found _initStrophePlugins() in xmpp.js that calls initStropheUtil(); but in stropheutil.js , no code for calling the strophe core code that create the Connection and init the plugns.

Do I have to call the strophe core core by myself elsewhere to crate the connection and init the plugins ?


#9

This initialises the plugin:
import 'strophejs-plugin-disco';
I think you should have imported before it Strophe, so basically this two lines do everything: