Skip to content

Instantly share code, notes, and snippets.

@drew-thompson
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.
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);
}
}
@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