-
-
Save drew-thompson/4d93be95a82d054924dad311ed1e26fe to your computer and use it in GitHub Desktop.
| 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); | |
| } | |
| } |
@EmreKayaoglu What I did:
npm i lib-jitsi-meet
then inangular.jsonI 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:
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
}
}
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
@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
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
I was able to make it work by copying the
lib-jitsi-meet.min.jsfile from here to a local file in my project and then loading it like so: