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.

http://malcolmswaine.com/wp-content/uploads/2017/11/external_api.js

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;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
   domain:string = "meet.jit.si";
    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>
</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

https://github.com/malcolmswainecom/Angular4JitsiClient

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



Create a basic Node JS Web Site in minutes

In this post I’m going to show you how to get a basic Node JS site up and running in quickly.

I’m assuming for this example you’re running on windows. If you haven’t already, head over to the NodeJS site and download and install the latest stable version

Download Node
Download Node

With Node installed let’s create a basic site to serve our web pages. First create the directory structure as below and create a file called index.html inside the public_html folder

Node structure
Node structure
Edit the index.html file and copy and paste the HTML  below

<!DOCTYPE html>
<html>
<head>
  <title>Hello Node</title>
</head>
<body>
  <h1>Page served from Node http-server</h1>
</body>
</html>
basic html
basic html

 

Go to the parent of our public_html folder (in this example C:\demos\jitsi) in a command prompt and run

npm init

Just accept all defaults for now by pressing enter at each prompt until the comment has completed

npm-install
npm-install

This will create the package.json file in the respective directory

Next let’s install an http server to handle our request as serve up the index.html we created

In the command window we previously opened, make sure we are still in the same directory where we ran our npm init and created out package.json file (in this example C:\demos\jitsi)

Run the command

npm install http-server
Install node http server
Install node http server

Back in the command prompt drop into the public_html directory we created for our index.html

We want Node to run the web server module that we just downloaded, so we need to locate it and copy the directory path onto the clipbaord so that we can use it in the command window. The path will in your node_modules folder under http-server

copy-node-http-server-path
copy node http-server path

when we have this path on the clipboard go back to the command window and run the command

node C:\demos\jitsi\node_modules\http-server\bin\http-server

I am assuming you have the same directory structure as me here

This will start the http server by default on port 8080.

Node start http-server
Node start http-server

You can now browse the index.html file we created on your browser at using

localhost node server on port 8080
localhost node server on port 8080

Getting Jitsi Meet up and running on NodeJS

If you don’t know about Jitsi, it’s an open source video conferencing suite of tools, both client and server side that facilitates real-time communitication.

In this post I’m going to show how to get the very basics of using the client side Jitsi library working so that we can embed it in our own application. Note that we don’t need any server implementation for this, as Jitsi.org provides a service we can connect to and use as a meeting hub

In this example I am going to be using Node JS to serve up my basic web application. I am then going to insert a JavaScript reference to the Jitsi Meet library hosted in the Jitsi CDN.

When the Jisti JavaScript is loaded I am then going to execute some command to get the bare essentials for an online meeting between two parties A and B.

Node JS
Node JS

 

If you don’t already have a basic Node site up and running to server document then follow my blog at

Create a basic Node JS Web Site in minutes

When you have the basic structure set up open the index.html file in the public_html directory

Edit Index html
Edit Index html

I’m using Sublime Text to edit the file, but you can use whatever editor you choose.

Next add the JavaScript references to Jquery and Jitsi

Add-Jquery-And-Jisti
Add JQuery and Jisti




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://meet.jit.si/external_api.js"></script>

And add the code to execute the Jitsi client using the JQuery OnLoad event

Set JQuery Onload to run Jisti Client
Set JQuery Onload to run Jisti Client

<script>
$(document).ready(function(){
       var domain = "meet.jit.si";
  var options = {
    roomName: "JitsiMeetAPIExample",
    width: 700,
    height: 700,
    parentNode: document.querySelector('#meet')
  }
var api = new JitsiMeetExternalAPI(domain, options);
});
</script>

We just need to add a placeholder into the markup to display our video component

meeting

 

Jisti meet basic javascipt and html
Jisti meet basic javascipt and html

 

You can find the code for this article at

https://github.com/malcolmswainecom/jitsi-meet-basic-web-client/wiki/Getting-Jitsi-Meet-up-and-running-on-Node-JS