Skip to content

Instantly share code, notes, and snippets.

@drew-thompson

drew-thompson/app.component.ts

Created June 3, 2019 22:22
Show Gist options
  • Save drew-thompson/4d93be95a82d054924dad311ed1e26fe to your computer and use it in GitHub Desktop.
Save drew-thompson/4d93be95a82d054924dad311ed1e26fe to your computer and use it in GitHub Desktop.
Download ZIP
Basic lib-jitsi-meet Angular Implementation
Raw
app.component.ts
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);
}
}
@timwaldron
Copy link

timwaldron commented Jun 10, 2020 •
edited
Loading

@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
Copy link

dmastag commented Jun 23, 2020

I just realized that this code is based on a stackoverflow question
https://stackoverflow.com/questions/56435263/how-to-fix-cannot-read-property-substr-of-null-on-call-to-initjitsiconferenc/57241637

@timwaldron
Copy link

timwaldron commented Jun 24, 2020 •
edited
Loading

@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
Copy link

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