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