Basic lib-jitsi-meet Angular Implementation

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);
  }
}

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.

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

@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

@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:

Can anybody help me, please?

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";

@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:

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