How to get Jitsi Meet Client up and running in an Angular 4 app using an External JavaScript Library

In this article I’m going to be getting a bare-bones Jitsi Meet conference up and running inside an Angular 4 app.

If you’re not familiar with Jitsi Meet, it’s an open-source, community-driven video conferencing platform that securely connects users across browsers and devices.

You can access their web resource directly here

I’m also going to be Angular 4 and following on from the last post I created

How to get an Angular 4 NodeJS site up and running in minutes

So let’s get started!

Assuming you have set up your project as in the previous demo …

Let’s set up some directory structure inside the Angular app that we can consume our third-party JavaScript from.

Inside the src directory, create a folder called vendor, and inside the vendor folder create a child folder called jitsi

Angular4 Jisti Meet Vendor Directory

Download the JavaScript we need to get Jitsi up and running into the folder we just created by right click the below link and choosing Save Link As.

Jisti Meet Rename Text File
Donwload Jitsi Meet JavaScript API


Next open the app.component.ts file in your text editor from src/app directory (C:\demos\basic-angular-4\basicAngular4\src\app in my example)

Edit App Component
Edit App Component

Modify the app.component.ts file so that it looks like the following

import { Component, AfterViewInit } from '@angular/core';
import '../vendor/jitsi/external_api.js';

declare var JitsiMeetExternalAPI: any;

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'app';
   domain:string = "";
    options: any;
    api: any;

 ngAfterViewInit(): void {
    this.options = {
      roomName: "JitsiMeetAPIExample",
      width: 700,
      height: 700,
      parentNode: document.querySelector('#meet')

    this.api = new JitsiMeetExternalAPI(this.domain, this.options);

Now we need to make sure that the JavaScript is included into the dependencies of the project, so in the project root open the .angular-cli.json file in an editor and add an entry to the scripts array

"scripts": ["vendor/jitsi/external_api.js"]
Add an Entry to Angular CLI Scripts
Add an Entry to Angular CLI Scripts

As in the previous example, we need do display our conference meeting down an a DOM element that we selected in the options here #meet
Edit the HTML template app.component.html

Edit App Component HTML
Edit App Component HTML

<div style="text-align: center;">
  <h1>Welcome to {{title}}!</h1>
  <div id="meet"></div>

Save Jitsi Meet HTML
Save Jitsi Meet HTML

Now let’s try running the app

Open a command prompt as Administrator and navigate to the Directory created the the Angular 4 CLI tool (in this case C:\demos\basic-angular-4\basicAngular4)

Open Command Promt Angular Jitsi Root
Open Command Promt Angular Jitsi Root

and run the command

npm start
NPM start Angular Jitsi
NPM start Angular Jitsi

Taking note of the host and port number (here it’s localhost:4200) paste the address into a browser window and you will see your Angular 4 Jitsi Client appear.

Jitsi Angular Up And Running In Minutes
Jitsi Angular Up And Running In Minutes

Sorry about the picture – my girlfriend is sleeping and waking her up by getting some good lighting may be dangerous!!

If Jitsi asks to use your Camera and Mic approve as appropriate.

The source for this demo can be found at

You will need to restore the NPM packages to get the solution up and running as I haven’t checked them in

Leave a Reply

Your email address will not be published. Required fields are marked *