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

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