Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic lib-jitsi-meet Angular Implementation
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'jitsi';
private jitsi: any;
private connection: any;
private room: any;
private options = {
hosts: {
domain: 'jitsi-meet.example.com',
muc: 'conference.jitsi-meet.example.com' // FIXME: use XEP-0030
},
bosh: '//jitsi-meet.example.com/http-bind', // FIXME: use xep-0156 for that
// The name of client node advertised in XEP-0115 'c' stanza
clientNode: 'http://jitsi.org/jitsimeet'
};
private confOptions = {
openBridgeChannel: true
};
private initOptions = {
disableAudioLevels: true,
// The ID of the jidesha extension for Chrome.
desktopSharingChromeExtId: 'mbocklcggfhnbahlnepmldehdhpjfcjp',
// Whether desktop sharing should be disabled on Chrome.
desktopSharingChromeDisabled: false,
// The media sources to use when using screen sharing with the Chrome
// extension.
desktopSharingChromeSources: ['screen', 'window'],
// Required version of Chrome extension
desktopSharingChromeMinExtVersion: '0.1',
// Whether desktop sharing should be disabled on Firefox.
desktopSharingFirefoxDisabled: true
};
constructor() {
this.jitsi = (window as any).JitsiMeetJS;
}
ngOnInit() {
this.jitsi.init(this.initOptions);
this.connection = this.createConnection(this.options);
this.setConnectionListeners(this.connection);
this.room = this.createRoom(this.connection, this.confOptions);
this.setRoomListeners(this.room);
this.room.join();
}
private createConnection(options: { bosh?: any; hosts: object; useStunTurn?: boolean; enableLipSync?: boolean }): any {
return new this.jitsi.JitsiConnection(null, null, options);
}
private setConnectionListeners(connection: any): void {
connection.addEventListener(this.jitsi.events.connection.CONNECTION_ESTABLISHED, this.onConnectionSuccess);
connection.addEventListener(this.jitsi.events.connection.CONNECTION_FAILED, this.onConnectionFailed);
connection.addEventListener(this.jitsi.events.connection.CONNECTION_DISCONNECTED, this.disconnect);
}
private createRoom(connection: any, options: object): void {
const room = connection.initJitsiConference('conference', options);
return room;
}
private setRoomListeners(room: any): void {
room.on(this.jitsi.events.conference.TRACK_ADDED, this.onRemoteTrack);
room.on(this.jitsi.events.conference.CONFERENCE_JOINED, this.onConferenceJoined);
}
private onConnectionSuccess(data: any): void {
console.log(data);
}
private onConnectionFailed(data: any): void {
console.log(data);
}
private disconnect(): void {
console.log('disconnecting?');
}
private onRemoteTrack(data: any): void {
console.log(data);
}
private onConferenceJoined(data: any): void {
console.log(data);
}
}
@SayPoj

This comment has been minimized.

Copy link

@SayPoj SayPoj commented Apr 13, 2020

Hi, I now want to start a project to create custom ui for jitsi-meet on angular. Unfortunately, I can’t figure out how to make the lib-jitsi-meet library work in an angular project.
The information from this file alone is not enough to figure out how to integrate this library into the project.
Tell me, please, could you share the finished project?
My native language is not English, forgive me if I do not understand it clearly.

@EmreKayaoglu

This comment has been minimized.

Copy link

@EmreKayaoglu EmreKayaoglu commented May 18, 2020

Hi Guys.
Did you get any example for it?
If so, please give me the sample link.

@timwaldron

This comment has been minimized.

Copy link

@timwaldron timwaldron commented May 30, 2020

@EmreKayaoglu What I did:

npm i lib-jitsi-meet

then in angular.json I added the Jitsi JS file into scripts:

"scripts": [
    "node_modules/lib-jitsi-meet/dist/lib-jitsi-meet.min.js"
]

Then follow this this typescript component as reference

@RodolfoDella

This comment has been minimized.

Copy link

@RodolfoDella RodolfoDella commented Jun 2, 2020

@EmreKayaoglu What I did:

npm i lib-jitsi-meet

then in angular.json I added the Jitsi JS file into scripts:

"scripts": [
    "node_modules/lib-jitsi-meet/dist/lib-jitsi-meet.min.js"
]

Then follow this this typescript component as reference

It doesn't worked for me! I did try many ways but I didn't have success.
When I load the script like your sample, I receive the console errors below:

error_1
error_2

Can anybody help me, please?

@hrueger

This comment has been minimized.

Copy link

@hrueger hrueger commented Jun 8, 2020

I was able to make it work by copying the lib-jitsi-meet.min.js file from here to a local file in my project and then loading it like so:

import * as JitsiMeetJS from "../../_libs/lib-jitsi-meet.min.js";
@timwaldron

This comment has been minimized.

Copy link

@timwaldron timwaldron commented Jun 10, 2020

@EmreKayaoglu What I did:
npm i lib-jitsi-meet
then in angular.json I added the Jitsi JS file into scripts:

"scripts": [
    "node_modules/lib-jitsi-meet/dist/lib-jitsi-meet.min.js"
]

Then follow this this typescript component as reference

It doesn't worked for me! I did try many ways but I didn't have success.
When I load the script like your sample, I receive the console errors below:

error_1
error_2

Can anybody help me, please?

I had issues with Angular 9's Ivy/semantics, so this is how I ended up doing it.

Adding their external script in the HTML head:

<head>
  <meta charset="utf-8">
  <title>...</title>
  ...
  <script src='https://meet.jit.si/external_api.js'></script>
</head>

Inside the *.component.html file:

<div class="jitsi-styling" id="meet"></div>

Then in my *.component.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-video-audio',
  templateUrl: './test-video-audio.component.html',
  styleUrls: ['./test-video-audio.component.scss'],
})
export class TestVideoAudioComponent implements OnInit {
  private jitsi: any;

  options = { roomName: 'JitsiTestRoom' };

  constructor() { }

  ngOnInit() {
    this.options['parentNode'] = document.querySelector('#meet'); // Setting parentNode option on init after the DOM has rendered

    this.jitsi = new (window as any).JitsiMeetExternalAPI('localhost:8443', this.options); // Jitsi running in local docker container
  }
}
@dmastag

This comment has been minimized.

Copy link

@dmastag dmastag commented Jun 23, 2020

@timwaldron

This comment has been minimized.

Copy link

@timwaldron timwaldron commented Jun 24, 2020

@dmastag big RIP, feel free to follow my implementation if you had this issue, that’s the method I did to get it to work

@dmastag

This comment has been minimized.

Copy link

@dmastag dmastag commented Jun 24, 2020

Hi @timwaldron
Yes, I reviewed the lib-jitsi-meet solution from the JS example from
https://github.com/jitsi/lib-jitsi-meet/blob/master/doc/example/example.js

I got that JS example working but considering the Time I don't have am following your iFrame API example instead.
Just can't imagine creating a whole Angular Implementation just right now.

Big Thanks @timwaldron for the iFrame API Implementation which headed me to the right direction.
And when that works anyone can basically just follow the official dev guide
https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment