Forem: Metered Video

What is a TURN server? (Traversal Using Relays around NAT)

alakkadshaw — Tue, 08 Jul 2025 18:22:50 +0000

This article was originally published on the Metered Blog: What is a TURN server?

What is a TURN server? A TURN server relays WebRTC traffic around NATs and firewalls, keeping voice, video and data flowing without drops.

The NAT & Firewall problem

Network address translation (NAT) lets many devices which are behind it and have private IP addresses share a single public IP address, but

NAT also changes source ports and blocks the unsolicited inbound traffic.

When two devices are each behind their own firewall and NAT, they have knowledge of only their own private IP address and any inbound packets from any other outside peer are dropped.

Analogy: imagine there are two offices each at the end of a busy hallway. Alice can walk out to send mail and access the hallway (internet) and Bob can do the same. But each of them cannot open other's office door from the outside. A relay receptionist (TURN servers) in the hallway is the only way to pass envelopes back and forth

How WebRTC and ICE try to connect

Interactive Connectivity establishment or ICE is WebRTC's 3 step way to piercing those locked doors:

Host Candidates- each peer first tests its own local (that is private) IPs. This way if both the devices are on a local network using LAN or VPN they can easily connect
STUN Candidate- the peer asks a STUN server for its (device's own) public IP/port number and uses that to connect to another device by sharing this information with the other client. This fails on Symmetric NATs or firewall rules that block inbound UDP traffic
TURN candidate- Lastly each peer allocates a relay address on a TURN server and all the media is sent through the TURN server, thus guaranteeing connectivity.

Example of iceServers array (Metered.ca STUN + TURN)

const pc = new RTCPeerConnection({
  iceServers: [
    {
      urls: [
        "stun:relay.metered.ca:80",
        "stun:relay.metered.ca:443"
      ]
    },
    {
      urls: [
        "turn:relay.metered.ca:80",
        "turn:relay.metered.ca:443",
        "turn:relay.metered.ca:443?transport=tcp"
      ],
      username: "YOUR_TURN_USERNAME",
      credential: "YOUR_TURN_PASSWORD"
    }
  ]
});

TURN vs STUN at a Glance

The success figures here are used from the Chrome UMA metrics and other production grade studies that show roughly one in five WebRTC calls must fall back on TURN

let us consider the differences between STUN and TURN using a table

Criterion	STUN Server	TURN Server
Connectivity	Works when NAT is less restrictive and allows UDP traversal	Works 100% of the time through any firewall or NAT type.
Bandwidth cost	none just requires a one of handshake around 1KB (this is because no traffic travels through STUN servers all the traffic travels peer-to-peer)	High because every data packet travelles through the turn servers. the data is encrypted end-to-end
Success rate	fails 20-25% of the time. ICE first tries STUN and then as a fallback uses TURN	Always works

How TURN server works (Step by Step)

Here is how the TURN server works step by step

Allocation request: Here each peer sends a ALLOCATE request to the TURN server over UDP/TCP/TLS
Relay address issued: The TURN server replies with relay transport address (public IP + port) that other peers can send data to.
Packets flow A -> TURN -> B and back: Both the peers send the data to the relay and the TURN server forwards the data in each other's way
Connection is kept alive: Peers periodically send the REFRESH or ChannelBind messages so that the allocation does not expire.

When do you actually need TURN?

Even through ICE first tries direct or STUN assisted paths, roughly 20 percent traffic goes through TURN servers

Two large scale studies from reputed sources indicate that one in five webrtc calls require a TURN server to connect.

Why these failures happen

Scenario	What breaks the direct/STUN path	Real-world examples
Enterprise Wi-Fi / corporate firewalls	Strict firewall policies block UDP and port ranges only allows 443/80	Office or corporate networks
Carrier Grade NAT (CG-NAT)	The mobile ISP terminates thousands of devices behind a single public IP address and uses the Symmetric NAT rules that reject unsolicited inbound traffic.	cellular 4G/5G networks some small fiber providers
Public hotspots and hotels	additional captive-portal proxies and other rate-limiters rewrite or throttle UDP and does not allow connections	Airports or hotels even coffee shop wifi
Gov networks	With Deep packet inspections blocks unknown UDP flows	regions with strict internet controls

Free & Hosted Options for TURN server

In this section we are looking at some of the free as well as paid options for getting a TURN server for you application.

Open Relay Project

OpenRelayProject is a free turn server for use. OpenRelay provides 20 GB of free monthly turn server usage. It is distributed all over the world, so you get low latency and high throughput

And it is a good option if you need a free turn server

Metered.ca TURN servers

Metered is a Canadian corporation that offers TURN server service, that is distributed all over the world and offers high throughput, low latency turn servers

Metered has features like 99.999% Uptime and 100 plus edge pops etc

Metered also has excellent support features like 24X7 emergency support number, tech support by engineers etc.

CoTURN

CoTURN is a free and open source turn server, that you have can install in your VM in any cloud and get the TURN server for free.

But remember there are costs associated with running you own turn server like VM costs and bandwidth costs.

Also, costs associated with running and maintaining the turn server code including updating and security etc.

Service	What makes it a good choice	Notable specs and perks
Open Relay Project	Truly free turn server service	20 GB monthly Cap
Metered TURN	10X higher throughput, automatic geo-routing along with geo-fencing capabilities, powerful APIs	UDP/TCP/TLS/DTLS support, usage stats, AI-friendly low latency network with awesome support
CoTURN	Open Source TURN server software that you can run on any cloud provider AWS, AZURE or Google	free but you need to pay for cloud compute and bandwidth

Self Hosting the TURN server with CoTURN

In this section we are going to learn how to set up a functional TURN server using CoTURN in any VM running Ubuntu/Debian

Here is an easy 7 step formula you can use to set it up

Step 1 Spin a cloud VM

Create a small VPS (1 vCPU/1GB RAM is good enough) with a public Ipv4 address, generally you get the IP address free with the VM
In the provider that could be AWS, GCP or Azure go to the firewall or security-group and all
3478/udp – the standard STUN/TURN port.
3478/tcp – TURN over TCP fallback.
5349/tcp – TURN over TLS (recommended for networks that allow only TLS-443-style traffic).
49152-65535/udp – optional high-range UDP relay ports for maximum throughput.

Step 2 Install the CoTURN package

The CoTURN is free and open source so you can easily install it using apt like this

sudo apt-get update
sudo apt-get install coturn -y

This package also installs the systemd service unit and helper tools such as turnutiles_uclient

Step 3 Create a minimal configuration

open the configuration file like this

sudo nano /etc/turnserver.conf

paste this essential configuration then save and exit

# Ports
listening-port=3478
tls-listening-port=5349

# Your DNS domain (or anything you want to set here)
realm=myapp.example.com

# If your VM has both a private and public IP (EC2, GCP, Azure etc.)
external-ip=232.34.234.45

# Simple long-term credential for a quick test
user=lamicall:VeryStrongPassword
lt-cred-mech

# Helpful extras
fingerprint              # adds fingerprints your STUN messages
#cert=/etc/ssl/certs/fullchain.pem
#pkey=/etc/ssl/private/privkey.pem

Optional:For greater security you can also replace the static user= line with static-auth-secret=<RANDOM_SECRET> so that you can generate short lived credentials instead of hardcoding your passwords

Step 4: Enable and start the service

Set the Ubuntu or Debian to start the service at boot and then start it right now

echo "TURNSERVER_ENABLED=1" | sudo tee -a /etc/default/coturn
sudo systemctl enable --now coturn
sudo systemctl status coturn

after this you will get something like

Listening on:(UDP) 3478
Listening on:(TCP) 5349

you can also check manually if the turn server is running by

# ctrl-c to stop the logs
sudo journalctl -u coturn -f

look for lines

Listening on:(TLS) 5349
Total General servers: 1
SQLite DB connection success: /var/lib/turn/turndb

if you see fatal1 orCannot bind` then usually firewall or something else is blocking the ports 3478/5349

Step 5 Smoke-test using the TURN server testing page

go to https://www.metered.ca/turn-server-testing in your chrome or safari
Enter
TURN url: turn::3478 (or turns::5349 if you enabled TLS)
Username: lamicall
Password: VeryStrongPassword
Click on the Add server then Launch server test

TURN Server FAQs

Here we look at some of the commonly asked questions with regards to the TURN server.

Do all WebRTC calls use TURN?

No. Chrome UMA telemetry data and other production grade studies show that only about 20-25% WebRTC data sessions go through a TURN server

For 75-80% of the WebRTC sessions a direct connection is successful using STUN so no media is sent through the TURN servers.

Why is there a gap like this? This is because by default TURN server is only used when all other ways to connecting to the peer are unsuccessful, this is to save costs and is done by the ICE protocol automatically.

Is TURN the same as a signalling server?

No, turn servers are different from signalling servers. here is a table that illustrates the differences

	TURN Server	Signalling Server
Role	Relays data when peer-to-peer connections fail	Relays SDP/ICE messages so that the peer devices can negotiate
Standardized?	yes (IETF RFC 8656)	NO- WebRTC deliberately leaves signalling server non-standardized. This means you can use anything like Websocket REST others for signalling
In the media path?	yes the media is relayed through the TURN server	NO Once ICE have negotiated, there is no need for signalling server. unless you want to re-negotiate
Resource Load	High CPU and Bandwidth requirements	low mostly small JSON or text messages

Conclusion

NAT and Firewall (The Need for TURN Servers)

Most Consumer and enterprise networks are behind NAT and firewall that blocks inbound traffic
These barriers does not allow peer-to-peer media flows unless TURN servers are used

ICE's Three layered Playbook

Host candidates try a private LAN connection first
Then ICE uses STUN to find out the private IP/port number of the devices in order to establish a direct connection with the peer. This works 80% of the time
Lastly the ICE fallbacks to TURN which relays the data through its servers.

STUN vs TURN in one sentence

STUN is a lightweight option that just tells the devices which are behind NAT what their public IP and port number is
TURN relays the traffic through its servers to the devices across the internet

Deployment choices

Hosted TURN services such as Open Relay and Metered let you paste credentials and go
You can also self host with CoTURN that gives you full control but you need to bear costs regarding VM and bandwidth plus do maintenance security and updates.

Jitsi TURN STUN Server Setup

alakkadshaw — Mon, 19 Dec 2022 15:10:51 +0000

This article was original published at Metered Video Blog: Jitsi TURN STUN Server Setup

In this guide we will go through the process of setting up optimal TURN Server configuration in Jitsi meet.

We will learn which config file to update, to add the TURN Server configuration and I will also show you from where you can obtain the TURN Server credentials.

What is Jitsi Meet?

If you are reading this Guide then you must be familiar with Jitsi meet. Jitsi Meet is an open-source video conferencing solution, that allows the participants to have a video call with each other.

Jitsi meet uses WebRTC protocol for communication between the participants, and Jitsi Meet first tries to establish first a peer to peer connect between the participants.

Peer to Peer connection means, all the participants in the meeting will send the audio+video feed directly to each other.

Typically web services work in a Client-Server manner, where the client sends all the traffic to the server, and the server forwards the traffic to other clients.

But in a peer-to-peer connection the clients directly send the data to other clients without requiring a server in the middle.

What is a TURN Server?

So we have understood what is Jitsi Meet, why it first tries to establish a peer-to-peer connection.

But often times the clients are not able to connect directly with each other to transmit the data, because the clients are behind a restrictive firewall.

In such scenarios, a TURN Server is required. The TURN server is a large server that has a Public IP address.

The Public IP address allows the TURN server to be reached from anywhere in the internet.

The clients who fails to establish a direct connection with each other, establishes the connection with the TURN server.

TURN Server then relays the traffic from one client to another.

All the traffic that passes through the TURN server is end-to-end encrypted by the clients using DTLS Encryption and the TURN server has no way to view the data that is passing through it.

TURN Server just relays the data from the client who are not able to establish a direct connection with each other.

It is estimated that 40% of traffic is relayed through the TURN server, hence TURN server is necessary for any successful Jitsi Meet Deployment.

Relaying all the traffic consumes a lot of CPU and Bandwidth and hence the TURN servers are large servers and are expensive to run.

What is a STUN Server?

As we have learned that Jitsi first tries to establish a peer-to-peer connection.

But most of the devices connected to the internet are behind a NAT.

NAT allows muliple devices to share a single Public IP address.

If you have a home internet connection, your internet service provider, gives you a router/modem, that device has one public IP address and all the devices that connect to the router/modem to connect to the internet shares the same public IP.

To establish a peer-to-peer connection, with a device behind the NAT, STUN server uses variety of techniques and punches a hole through the NAT to directly connect to the device behind the NAT.

If the device is unsuccessful in bypassing the NAT then it uses the TURN Server to relay the traffic.

The STUN server do not relay the traffic, they are just used by the devices behind the NAT to determine their Public IP and Port.

If the devices are able to punch the hole through the NAT they share this info with other peers in the meeting and establish a direct connection with each other.

The STUN Server are not expensive to run and provided for free by Jitis, Google as well as other providers.

TURN & STUN Server Configuration in Jitsi Meet

We have learned about the TURN and STUN servers and why it is important, now lets go through the steps of updating the Jisti Meet with TURN Server credentials.

We will learn how you can add the credentials of a TURN Server you are selfhosting, and if don't have a TURN server, I will show from where you can obtain the TURN Server credentials.

Step 1: SSH into your Jitsi Meet Server

SSH into the server where you have installed Jitsi Meet, the SSH instructions depends upon your hosting provider. If you have installed Jitsi Meet then you must be familiar with how to SSH into the Server :)

Step 2: Edit the Jitsi Meet Config

Now we will edit the jisti meet configuration file, the configuration file is located at /etc/jitsi/meet/your-domain-name.com-config.js

<your-domain-name.com> is the domain name that you had provided during the jitsi meeting installation.

sudo nano /etc/jitsi/meet/your-domain-name.com-config.js

Step 3: Update the TURN Server configuration

Now scroll down to until you find the line stunServers

Now here we can add our TURN Server configuration. Here by default Jitsi STUN server is provided. STUN Server is used to establish a peer-to-peer connection, but as we have learned, in many situations peer-to-peer connection cannot be established, hence we need a TURN Server.

You can add the TURN server in the following manner

stunServer: [
    { urls: "turn:your-turn-server.com:443", username: "your-username", credential: "your-password" }
],

your-turn-server.com is NOT an actual TURN Server URL, and "your-username" and "your-password" are just placeholders.

In the image below we have used the credentials for actual TURN Server.

Step 4: Obtaining TURN Server Credentials

TURN Server consume a lot of CPU and bandwidth hence they are expensive to run.

We at Metered Video offer free TURN Server Plan which is enough for most users, you can visit here to signup for our free plan.

You can also selfhost your TURN server, for instructions regarding selfhosting your turn server, you can refer to our coturn guide.

We will use the OpenRelay TURN Server from Metered Video, if you have not already signup for a free account from here.

The TURN Server from Metered Video has 99.999% uptime with enterprise grade reliability and is a cost effective solution.

Once you have signup for a free account go to dashboard->turn server page click on "Add New Credential" button

Then click on the "instructions" button

From the instructions popup copy everything in between the square brackets [ ]

Then delete everything under the stunServers array and paste it inside the stunServers array []

Now save exit the editor by pressing Cltr+x and y

Step 5 (optional): Force all the traffic through the TURN Server

If you want force the clients to relay all the traffic through the TURN server then you can remove the line

{
    url: "stun:relay.metered.ca:80"
},

Now, why you would want to relay all the traffic through the TURN server?

TLDR: To Speed up the time it takes to connect the call.

If you relay all the traffic through the TURN server, then the clients will not try to establish a peer-to-peer connection with each other.

To establish a peer-to-peer connection with each other the clients uses a STUN Server, and uses hole punching technique to gather ICE candidates and determines the open port and public IP address, to learn more about this in detail read STUN Server and NAT Traversal.

Gathering candidates and determining the open port and public IP takes time.

Then it determines whether it is a able to establish a peer-to-peer connection, if establishing a peer-to-peer connection fails, it fallbacks to the TURN server.

All this process increases the time it takes for the user to connect to the meeting.

To speed up the time it takes for the user to connect to the meeting, we can eliminate this process altogether.

If we remove the STUN Server URL and only provide the TURN Server URLs then all the connections will be relayed through the TURN server by default.

The user will be connected to each other through the TURN server.

The drawback of this is that as all the connection will be relayed through the TURN server, your TURN Server bandwidth consumption will increase.

If you are selfhosting your TURN server then it might add some latency to the call if the TURN server is far away from the users in the meeting.

For e.g If there are 2 users in a call and both of them are in London, and the TURN Server is in US then it would add some latency to the call as all the connection would have to be routed through US.

If one user is in London and another is in US, and the TURN Server is in U.S, then it doesn't make much difference as the video stream would have to reach U.S to connect to the user in U.S.

If you are using Metered TURN Server, then we automatically route the traffic through the TURN Server nearest to the user.

Now lets get back to our configuration, now if we reopen the Jitsi meet configuration file, and scroll down the the stunServers array and remove.

{
    url: "stun:relay.metered.ca:80"
},

Our final configuration will look like the image below:

In the image as you can see there are only TURN URLs and there is no URL that begins with stun:

Step 6: That's it!

We have learned how to setup TURN Server in Jitsi Meet and also gone through the process of obtaining the TURN Server credentials and an optional step to force all the traffic through the TURN server decrease the time it takes for the user to connect the call.

Why Choose Metered TURN Server?

Metered TURN Server offers 99.999% uptime and it is ultra-low latency, provides routing to the nearest server to the user.

It also offers a generous free plan which would be sufficient for most users and saves cost running your own TURN Server.

If you are a large organization that would use the TURN Server heavily then in that case as well, using Metered Video TURN Server would prove to be a cost effective solution, because you will pay more in bandwidth + EC2 instance cost in AWS.

Also it is hard to achieve 99.999% uptime selfhosting the TURN server and adds more operational overhead.

Signup for Free TURN Server Account

Conclusion

In this guide we have learned what is a TURN Server, why it is essential in Jitsi Meet and we went through the process of setting up the TURN server configuration in Jitsi Meet and discussed selfhosting vs using Metered TURN Server.

If you have any questions or comments you can contact us support[at]metered.ca or book a meeting with our specialist.

WebRTC with Python and React: Building a Video Chat Application

alakkadshaw — Tue, 05 Jul 2022 17:11:37 +0000

In this guide we will build a video chat application using python+flask in the back-end and React + WebRTC and Metered Video SDK in front-end to build a video calling application.

Our video chat application would allow users to have group video chat, with the ability to share their screen.

The application would run on all modern browsers as well iOS Safari and in Android web browser.

Prerequisite

To build the application we would use Metered Video API and SDK, if you don't have an account, you can signup for account.

Go to https://www.metered.ca/ and click "Signup and Start Building" button.

After you have create the account, come back here for the next steps.

Application Structure - Backend

Our application would have Python+Flask backend and React Front-End, the backend would provide API to our front-end React Application.

The Application structure of our backend code is very simple, as shown in the screenshot below.

We are creating a simple flask application, the project directory contains

flaskr/ - This folder will contain the python code of our flask application

__init__.py - This file contains our Python+Flask Application Code.

venv - Virtual environment folder created using the venv command

.env - This file contains our METERED_SECRET_KEY AND METERED_DOMAIN (I will share more info on how to obtain those below)

requirements.txt - Contains a list of python dependencies required for our project

Building the Backend

We will first build out our Python+Flask backend and then move on to building our front-end using React.

In the backend we will build the our API's that will be required by our front-end application. We will call the Metered REST API from the backend.

We do not want to call the Metered REST API directly from our front-end application because we do not want to expose our METERED_SECRET_KEY in the front-end.

Installing Dependencies

We will use virtual environment to manage dependencies, we will create our project directory and initialize the virtual environment in the project directory.

mkdir myapp
cd myapp
mkdir backend
cd backend
python3 -m venv venv

Create file requirements.txt and add the following

flask
requests
python-dotenv
flask-cors

Run the command to install the dependencies

pip install -r requirements.txt

Creating .env file

Create a .env in the root of your project directory and add the following

export FLASK_APP=./flaskr
export METERED_DOMAIN=yourappname.metered.live
export METERED_SECRET_KEY=hoHqpIkn8MqVIZvwHReHt8tm_6K0SRMgg6vHwPrBoKz

To obtain your METERED_DOMAIN and METERED_SECRET_KEY go to Metered Dashboard -> Developers

Building the Backend REST API

We will create a file named __init__.py inside the flaskr/ folder.

This file will contain our flask code with our REST API that would be needed by our front-end React Application.

We need our backend service to provide primarily 2 services:

Able to create a new meeting room
Validate existing meeting room

So we will be creating the following routes:

/api/create/room - This Endpoint will allow us to create a new meeting room and get the ID of the meeting room
/api/validate-meeting - This Endpoint will accept the roomId and will check if the room exists or not
/api/metered-domain - We will use this endpoint to fetch our Metered Domain from the backed. This is as optional endpoint, you can directly add the Metered Domain in your front-end application, but we are creating an endpoint for flexibility.

Here is the boilerplate code for our backend server, we will go through each route and build it as we go along.

import os
import requests

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# Metered Secret Key
METERED_SECRET_KEY = os.environ.get("METERED_SECRET_KEY")
# Metered Domain
METERED_DOMAIN = os.environ.get("METERED_DOMAIN")


# API Route to create a meeting room
@app.route("/api/create/room", methods=['POST'])
def create_room():
    return "Create Meeting Room"


# API Route to validate meeting
@app.route("/api/validate-meeting")
def validate_meeting():
    return "Validate Meeting"


# API Route to fetch the Metered Domain
@app.route("/api/metered-domain")
def get_metered_domain():
    return {"METERED_DOMAIN": METERED_DOMAIN}


@app.route("/")
def index():
    return "Backend"

__init__.py

Creating API to Create a Meeting Room

We will use the Metered Create Room API to create a meeting room. Which is /api/v1/room

# API Route to create a meeting room
@app.route("/api/create/room", methods=['POST'])
def create_room():
    r = requests.post("https://"+METERED_DOMAIN + "/api/v1/room" +
                      "?secretKey="+METERED_SECRET_KEY)
    return r.json()

This endpoint returns the following response

{
    "__v": 0,
    "_id": "62a1218be0a28612ff36a9f5",
    "app": "61002fccfa1937440e5d1134",
    "archived": false,
    "audioOnlyRoom": false,
    "autoJoin": false,
    "compositionLayout": "grid",
    "compositionOrientation": "wide",
    "created": "2022-06-08T22:24:11.259Z",
    "deleteOnExp": false,
    "ejectAtRoomExp": false,
    "enableChat": true,
    "enableComposition": false,
    "enableLiveStreaming": false,
    "enableRTMPOut": false,
    "enableRecording": false,
    "enableRequestToJoin": true,
    "enableScreenSharing": true,
    "enableWatermark": false,
    "joinAudioOn": true,
    "joinVideoOn": true,
    "lang": "en",
    "newChatForMeetingSession": true,
    "ownerOnlyBroadcast": false,
    "privacy": "public",
    "recordComposition": false,
    "recordRoom": false,
    "roomName": "jfbkg78pca",
    "showInviteBox": true,
    "watermarkPosition": "bottom_right"
}

For us roomName is the property of interest, each time we will call this API, and if we do not provide a roomName it will create a new room with a unique room name.

If we specify the roomName then it will create a new room of the specified roomName.

But for our use case, the unqiue auto-generated roomName is sufficient.

Creating an API to Validate a Meeting Room

After we have created a meeting room, we need an API to validate the Meeting Room.

This endpoint will be used validate the room name entered by the user when they are trying to join a room.

Using the API we will check if the room is valid, and if it is valid then we will allow the user to join the room.

# API Route to validate meeting
@app.route("/api/validate-meeting")
def validate_meeting():
    roomName = request.args.get("roomName")
    if roomName:
        r = requests.get("https://" + METERED_DOMAIN + "/api/v1/room/" +
                         roomName + "?secretKey=" + METERED_SECRET_KEY)
        data = r.json()
        if (data.get("roomName")):
            return {"roomFound": True}
        else:
            return {"roomFound": False}
    else:
        return {
            "success": False,
            "message": "Please specify roomName"
        }

API to Fetch Metered Domain

The API to fetch Metered Domain is very straightforward, we will just send the METERED_DOMAIN variable as response.

# API Route to fetch the Metered Domain
@app.route("/api/metered-domain")
def get_metered_domain():
    return {"METERED_DOMAIN": METERED_DOMAIN}

Putting it all together

Here is our final backend service __init__.py


import os
import requests

from flask import Flask, request

app = Flask(__name__)

# Metered Secret Key
METERED_SECRET_KEY = os.environ.get("METERED_SECRET_KEY")
# Metered Domain
METERED_DOMAIN = os.environ.get("METERED_DOMAIN")


# API Route to create a meeting room
@app.route("/api/create/room", methods=['POST'])
def create_room():
    r = requests.post("https://"+METERED_DOMAIN + "/api/v1/room" +
                      "?secretKey="+METERED_SECRET_KEY)
    return r.json()


# API Route to validate meeting
@app.route("/api/validate-meeting")
def validate_meeting():
    roomName = request.args.get("roomName")
    if roomName:
        r = requests.get("https://" + METERED_DOMAIN + "/api/v1/room/" +
                         roomName + "?secretKey=" + METERED_SECRET_KEY)
        data = r.json()
        if (data.get("roomName")):
            return {"roomFound": True}
        else:
            return {"roomFound": False}
    else:
        return {
            "success": False,
            "message": "Please specify roomName"
        }


# API Route to fetch the Metered Domain
@app.route("/api/metered-domain")
def get_metered_domain():
    return {"METERED_DOMAIN": METERED_DOMAIN}


@app.route("/")
def index():
    return "Backend"

Using Metered Pre-Built UI

Instead of building the custom front-end in React we can use the Metered Pre-built UI to Embed Video Chat into your web application.

Your roomURL is simply <your_metered_domain>.metered.live/<your_room_name

Each Room you create in Metered Video can be used with the pre-built UI. Just open the roomURL in your browser and you will be presented with the pre-built UI.

The Metered Pre-Built UI has built-in Chat, Video Calling, and Screen Sharing capabilities and the options can be enabled/disabled using dashboard or using the API.

To Embed the Pre-Built UI into an existing application you can use the following Embed Code.

Just replace the roomURL with your own roomURL.

Build the Custom Front-End in React

If you choose to build you custom front-end in React then follow along.

Our front-end application would allow 3 main area:

Join/Create Meeting: Here we will allow the user to join an existing meeting or create a new meeting
Meeting Area: The main meeting interface
Meeting Ended Screen: We will take the user to this area after the meeting has ended.

Installing the dependencies

We will use Create React App to scaffold our single page React application.

cd myapp
npx create-react-app react-frontend

Scaffolding the Application UI

We will create 3 components one for each of the areas:

App.js - Will be the main container of the application

Join.js - UI to Join and Existing Meeting or Create a new Meeting

Meeting.js - Will contain the main Meeting Screen

MeetingEnded.js - Interface to show when the meeting ends

Including the Metered JavaScript SDK

We will include the latest Metered JavaScript in our application.

To add the Metered SDK open public/index.html and paste the SDK before closing the of the head tag.

<script src="//cdn.metered.ca/sdk/video/1.4.3/sdk.min.js"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>

      <!-- METERED VIDEO SDK -->
     <script src="//cdn.metered.ca/sdk/video/1.4.3/sdk.min.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

index.html

Initializing the SDK

We will initialize the Metered SDK in App.js and handle all the meeting events in App.js.

import { useEffect, useState } from "react";
import Join from "./Join";
import Meeting from "./Meeting";

// Initializing the SDK
const meteredMeeting = new window.Metered.Meeting();

function App() {
  // Will set it to true when the user joins the meeting
  // and update the UI.
  const [meetingJoined, setMeetingJoined] = useState(false);
  // Storing onlineUsers, updating this when a user joins
  // or leaves the meeting
  const [onlineUsers, setOnlineUsers] = useState([]);

  // This useEffect hooks will contain all
  // event handler, like participantJoined, participantLeft etc.
  useEffect(() => {}, []);

  // Will call the API to create a new
  // room and join the user.
  function handleCreateMeeting(username) {}

  // Will call th API to validate the room
  // and join the user
  function handleJoinMeeting(roomName, username) {}

  return (
    <div className="App">
      {meetingJoined ? (
        <Meeting onlineUsers={onlineUsers} />
      ) : (
        <Join
          handleCreateMeeting={handleCreateMeeting}
          handleJoinMeeting={handleJoinMeeting}
        />
      )}
    </div>
  );
}

export default App;

Join Meeting Component

Lets build the Join Meeting Component, the Join Meeting component is very simple, it will allow the user to join an existing meeting by entering the roomName or creating a new meeting.

import { useState } from "react";

function Join({ handleCreateMeeting, handleJoinMeeting }) {
  const [username, setUsername] = useState("");
  const [roomName, setRoomName] = useState("");

  return (
    <div id="joinView" className="w-full items-center justify-center flex">
      <div className="bg-base-300 w-11/12 max-w-screen-md  rounded mt-48 p-10">
        <div>
          <label className="label">
            <span className="label-text">Name:</span>
          </label>
          <input
            value={username}
            onChange={(e) => {
              setUsername(e.target.value);
            }}
            type="text"
            className="w-full input input-primary input-bordered"
            placeholder="Enter your name"
          />
        </div>

        <div className="divider">AND</div>

        <div className="form-control">
          <label className="label">
            <span className="label-text">Meeting ID</span>
          </label>
          <div className="relative">
            <input
              value={roomName}
              onChange={(e) => {
                setRoomName(e.target.value);
              }}
              id="meetingId"
              type="text"
              placeholder="Meeting ID"
              className="w-full pr-16 input input-primary input-bordered"
            />
            <button
              id="joinExistingMeeting"
              className="absolute top-0 right-0 rounded-l-none btn btn-primary text-xs"
            >
              <span
                onClick={() => {
                  handleJoinMeeting(roomName, username);
                }}
                className="hidden sm:block"
              >
                Join Existing Meeting
              </span>
              <span className="sm:hidden">Join</span>
            </button>
          </div>
        </div>
        <div className="divider">OR</div>
        <div className="flex justify-center">
          <button
            onClick={() => {
              handleCreateMeeting(username);
            }}
            id="createANewMeeting"
            className="btn btn-primary"
          >
            Create a new meeting
          </button>
        </div>
      </div>
    </div>
  );
}

export default Join;

Join.js

In the Join Meeting Component we are just handling the events and calls the props which has methods from the App Component, and the logic to handle "Join Existing Meeting" and "Create a new Meeting" will be handled in the App Component

Implementing Logic to Create and Join the Meeting

In the App.js we will add the logic to handle the events triggered by pressing the "Join Existing Meeting" and "Create a New Meeting" buttons in the Join Component.

The logic to handleCreateMeeting is very simple, we call our backend API /api/create/room to create a room.

Then we call /api/metered-domain to fetch our Metered Domain.

And finally we call the join method of the Metered Javascript SDK.

  // Will call the API to create a new
  // room and join the user.
  async function handleCreateMeeting(username) {
    // Calling API to create room
    const { data } = await axios.post(API_LOCATION + "/api/create/room");
    // Calling API to fetch Metered Domain
    const response = await axios.get(API_LOCATION + "/api/metered-domain");
    // Extracting Metered Domain and Room Name
    // From responses.
    const METERED_DOMAIN = response.data.METERED_DOMAIN;
    const roomName = data.roomName;

    // Calling the join() of Metered SDK
    const joinResponse = await meteredMeeting.join({
      name: username,
      roomURL: METERED_DOMAIN + "/" + roomName,
    });

    // Updating the state meetingJoined to true
    setMeetingJoined(true);
  }

The logic for handleJoinMeeting is also very straightforward, here we already have the roomName which will be provided by the user, we need to validate the roomName and if the roomName is valid then we will call the join method of the Metered JavaScript SDK.

  // Will call th API to validate the room
  // and join the user
  async function handleJoinMeeting(roomName, username) {
    // Calling API to validate the roomName
    const response = await axios.get(
      API_LOCATION + "/api/validate-meeting?roomName=" + roomName
    );

    if (response.data.roomFound) {
      // Calling API to fetch Metered Domain
      const { data } = await axios.get(API_LOCATION + "/api/metered-domain");

      // Extracting Metered Domain and Room Name
      // From responses.
      const METERED_DOMAIN = data.METERED_DOMAIN;

      // Calling the join() of Metered SDK
      const joinResponse = await meteredMeeting.join({
        name: username,
        roomURL: METERED_DOMAIN + "/" + roomName,
      });
      setMeetingJoined(true);
    } else {
      alert("Invalid roomName");
    }
  }

To validate the roomName we will call our backend API /api/validate-meeting?roomName=

The we will be checking if the roomFound is True, if it is True then we will fetch our Metered Domain and call the join() method and update the meetingJoined state variable.

Handling Events

We need to handle the following events in our application:

participantJoined: When a paritcipant joins the meeting this event is triggered, we will add the user to the onlineUsers array.
participantLeft: When a participant leaves the meeting this event is triggered, we will remove the user from the onlineUsers array.
remoteTrackStarted: When a remote participant shares their camera/microphone/screen this event is emitted.
remoteTrackStopped: When a remote participant stops sharing their camera/microphone/screen this event is emitted.
onlineParticipants: This event is emitted multiple times during the lifecycle of the meeting. It contains that array of users currently in the meeting users currently in the meeting.

We will create a useEffect hook and in the hook to handle the events and return a function that will do the cleanup of the event listener.

  useEffect(() => {
    meteredMeeting.on("remoteTrackStarted", (trackItem) => {});

    meteredMeeting.on("remoteTrackStopped", (trackItem) => {});

    meteredMeeting.on("participantJoined", (localTrackItem) => {});

    meteredMeeting.on("participantLeft", (localTrackItem) => {});

    meteredMeeting.on("onlineParticipants", (onlineParticipants) => {});

    return () => {
      meteredMeeting.removeListener("remoteTrackStarted");
      meteredMeeting.removeListener("remoteTrackStopped");
      meteredMeeting.removeListener("participantJoined");
      meteredMeeting.removeListener("participantLeft");
      meteredMeeting.removeListener("onlineParticipants");
    };
  });

We will create two array as state variables, one array will store the list of onlineParticipants and another array will store the list of remote video and audio tracks.

 const [remoteTracks, setRemoteTracks] = useState([]);

  // This useEffect hooks will contain all
  // event handler, like participantJoined, participantLeft etc.
  useEffect(() => {
    meteredMeeting.on("remoteTrackStarted", (trackItem) => {
      remoteTracks.push(trackItem);
      setRemoteTracks([...remoteTracks]);
    });

    meteredMeeting.on("remoteTrackStopped", (trackItem) => {
      for (let i = 0; i < remoteTracks.length; i++) {
        if (trackItem.streamId === remoteTracks[i].streamId) {
          remoteTracks.splice(i, 1);
        }
      }
      setRemoteTracks([...remoteTracks]);
    });

    meteredMeeting.on("participantJoined", (localTrackItem) => {});

    meteredMeeting.on("participantLeft", (localTrackItem) => {});

    meteredMeeting.on("onlineParticipants", (onlineParticipants) => {
      setOnlineUsers([...onlineParticipants]);
    });

    return () => {
      meteredMeeting.removeListener("remoteTrackStarted");
      meteredMeeting.removeListener("remoteTrackStopped");
      meteredMeeting.removeListener("participantJoined");
      meteredMeeting.removeListener("participantLeft");
      meteredMeeting.removeListener("onlineParticipants");
    };
  });

We can show a notification and play a sound when a participant enters or leaves the meeting in the participantJoined and participantLeft event handlers.

The onlineParticipants event handler is triggered each time a participant enters or leaves and meeting and returns the array of participants, so we can use just that event handler to load the list of online participants.

The remoteTrackStarted event handler we are just pushing the remoteTrack item to the remoteVideoTracks array and setting the state.

In the remoteTrackStopped event handler, we are looping through the array to find the remoteTrackItem that was stoppped and and removing it from the array and setting the state.

Displaying the Remote Streams

We have handled the remoteTrackStarted event and we are storing the remote tracks in the remoteTracks state variable. The remote tracks can be played in a videoTag.

The videoTag has an srcObject attribute and we can pass the MediaStream to the srcObject attribute the play the remote streams.

We will create a custom VideoTag component that will accept our mediaStream as prop and create a html <video> tag with srcObject attribute and will play the video when the stream is ready.

Creating Component to Display MediaStream

The video and audio stream, can be added to a video tag, but they have to added to the srcObject property, to handle this we will create our own <VideoTag /> component where we can provide srcObject as prop and it handles the reset.

import classNames from "classnames";
import { useEffect, useRef } from "react";

function VideoTag(props) {
  const video = useRef();
  const srcObject = props.srcObject;
  const src = props.src;
  const style = props.style;

  const className = classNames(
    "static shadow-lg bg-slate-900 max-w-full max-h-full",
    props.className
  );
  function handleCanPlay() {
    video.current.play();
  }

  useEffect(() => {
    if (srcObject && video.current) {
      video.current.srcObject = srcObject;
    }
  });

  return (
    <>
      <video
        style={style}
        ref={video}
        onCanPlay={handleCanPlay}
        playsInline
        className={className}
        autoPlay={true}
        src={src}
      />
    </>
  );
}

export default VideoTag;

VideoTag.js

This component is very simple, here we have created a useEffect hook and in the hook we can see if srcObject prop has a value, if it has then we are assigning it to the video tag, and we are handling the onCanPlay event emiited by the video tag, and when that event is emitted we are calling play() method of the video tag.

Implementing the Meeting Area

Now we have added the logic to handle the onlineParticipants and their remote tracks, now let's build the Meeting

The Meeting Area is saved in the Meeting.js file.

In the Meeting Area we will show the video/audio of the remote participants, add the ability to allow the user to share his/her microphone, camera and screen, and show the user their own video if they are sharing camera/screen.

In our App.js component we will check if the user has joined the Meeting, if yes then we will show the Meeting component. If the user has not joined the meeting then we will show the Join Component.

We will also pass the onlineUsers and remoteTracks as props to the Meeting.js component, and also methods to handle the camera, screen, microphone button click events.

  return (
    <div className="App">
      {meetingJoined ? (
        <Meeting
          handleMicBtn={handleMicBtn}
          handleCameraBtn={handleCameraBtn}
          handelScreenBtn={handelScreenBtn}
          handleLeaveBtn={handleLeaveBtn}
          localVideoStream={localVideoStream}
          onlineUsers={onlineUsers}
          remoteTracks={remoteTracks}
          username={username}
          roomName={roomName}
          meetingInfo={meetingInfo}
        />
      ) : (
        <Join
          handleCreateMeeting={handleCreateMeeting}
          handleJoinMeeting={handleJoinMeeting}
        />
      )}
    </div>
  );

App.js render

We have scaffold out the Meeting.js Component:

import VideoTag from "./VideoTag";

function Meeting({
  handleMicBtn,
  handleCameraBtn,
  handelScreenBtn,
  handleLeaveBtn,
  localVideoStream,
  onlineUsers,
  remoteTracks,
  username,
  roomName,
  meetingInfo,
}) {
  let userStreamMap = {};
  for (let trackItem of remoteTracks) {
    if (!userStreamMap[trackItem.participantSessionId]) {
      userStreamMap[trackItem.participantSessionId] = [];
    }
    userStreamMap[trackItem.participantSessionId].push(trackItem);
  }

  let remoteParticipantTags = [];
  for (let user of onlineUsers) {
    // Skip if self
    if (user._id === meetingInfo.participantSessionId) {
      continue;
    }
    let videoTags = [];
    if (userStreamMap[user._id] && userStreamMap[user._id].length > 0) {
      // User has remote tracks
      for (let trackItem of userStreamMap[user._id]) {
        let stream = new MediaStream();
        stream.addTrack(trackItem.track);

        if (trackItem.type === "video") {
          videoTags.push(<VideoTag srcObject={stream} />);
        }

        if (trackItem.type === "audio") {
          videoTags.push(
            <VideoTag
              key={trackItem.streamId}
              srcObject={stream}
              style={{ display: "none" }}
            />
          );
        }
      }
    }

    remoteParticipantTags.push(
      <div key={user._id}>
        <div id="remoteVideos">{videoTags}</div>
        <div id="username">{user.name}</div>
      </div>
    );
  }

  return (
    <div id="meetingView" className="flex flex-col">
      <div className="h-8 text-center bg-black">MeetingID: {roomName}</div>
      <div
        className="flex-1 grid grid-cols-2 grid-rows-2"
        id="remoteParticipantContainer"
        style={{ display: "flex" }}
      >
        {remoteParticipantTags}
      </div>

      <div className="flex flex-col bg-base-300" style={{ width: "150px" }}>
        {localVideoStream ? (
          <VideoTag
            id="meetingAreaLocalVideo"
            muted={true}
            srcObject={localVideoStream}
            style={{
              padding: 0,
              margin: 0,
              width: "150px",
              height: "100px",
            }}
          />
        ) : (
          ""
        )}

        <div
          id="meetingAreaUsername"
          className="bg-base-300 bg-black"
          style={{
            textAlign: "center",
          }}
        >
          {username}
        </div>
      </div>

      <div
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: "20px",
        }}
        className="space-x-4"
      >
        <button
          id="meetingViewMicrophone"
          className="btn"
          onClick={handleMicBtn}
        >
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
            />
          </svg>
        </button>

        <button
          id="meetingViewCamera"
          className="btn"
          onClick={handleCameraBtn}
        >
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
            />
          </svg>
        </button>

        <button
          id="meetingViewScreen"
          className="btn"
          onClick={handelScreenBtn}
        >
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
            />
          </svg>
        </button>

        <button id="meetingViewLeave" className="btn" onClick={handleLeaveBtn}>
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
            />
          </svg>
        </button>
      </div>
    </div>
  );
}

export default Meeting;

Handling the sharing of camera, microphone and screen

In App.js we create the methods to handle the click events on Microphone, Camera, Screen and Leave Meeting Buttons.

We will call the methods from the Metered Video SDK to handle the click events:

 async function handleMicBtn() {
    if (micShared) {
      await meteredMeeting.stopAudio();
      setMicShared(false);
    } else {
      await meteredMeeting.startAudio();
      setMicShared(true);
    }
  }

  async function handleCameraBtn() {
    if (cameraShared) {
      await meteredMeeting.stopVideo();
      setLocalVideoStream(null);
      setCameraShared(false);
    } else {
      await meteredMeeting.startVideo();
      var stream = await meteredMeeting.getLocalVideoStream();
      setLocalVideoStream(stream);
      setCameraShared(true);
    }
  }

  async function handelScreenBtn() {
    if (!screenShared) {
      await meteredMeeting.startScreenShare();
      setScreenShared(false);
    } else {
      await meteredMeeting.stopVideo();
      setCameraShared(false);
      setScreenShared(true);
    }
  }

  async function handleLeaveBtn() { }

Building Meeting Ended/Leave Meeting Screen

To build the Meeting Ended screen, we will create a state variable called meetingEnded and in the handleLeaveBtn() method we will set it to true, and call the leaveMeeting() method of Metered Video SDK.

  async function handleLeaveBtn() {
    await meteredMeeting.leaveMeeting();
    setMeetingEnded(true);
  }

Then we will check if meetingEnded is true and if it is true then we will hide the Meeting component and show the MeetingEnded.js component instead.

That's it!

This is how our final App.js file looks like:

import axios from "axios";
import { useEffect, useState } from "react";
import Join from "./Join";
import Meeting from "./Meeting";
import MeetingEnded from "./MeetingEnded";

// Initializing the SDK
const meteredMeeting = new window.Metered.Meeting();

const API_LOCATION = "http://localhost:5000";

function App() {
  // Will set it to true when the user joins the meeting
  // and update the UI.
  const [meetingJoined, setMeetingJoined] = useState(false);
  // Storing onlineUsers, updating this when a user joins
  // or leaves the meeting
  const [onlineUsers, setOnlineUsers] = useState([]);

  const [remoteTracks, setRemoteTracks] = useState([]);

  const [username, setUsername] = useState("");

  const [localVideoStream, setLocalVideoStream] = useState(null);

  const [micShared, setMicShared] = useState(false);
  const [cameraShared, setCameraShared] = useState(false);
  const [screenShared, setScreenShared] = useState(false);
  const [meetingEnded, setMeetingEnded] = useState(false);
  const [roomName, setRoomName] = useState(null);
  const [meetingInfo, setMeetingInfo] = useState({});
  // This useEffect hooks will contain all
  // event handler, like participantJoined, participantLeft etc.
  useEffect(() => {
    meteredMeeting.on("remoteTrackStarted", (trackItem) => {
      remoteTracks.push(trackItem);
      setRemoteTracks([...remoteTracks]);
    });

    meteredMeeting.on("remoteTrackStopped", (trackItem) => {
      for (let i = 0; i < remoteTracks.length; i++) {
        if (trackItem.streamId === remoteTracks[i].streamId) {
          remoteTracks.splice(i, 1);
        }
      }
      setRemoteTracks([...remoteTracks]);
    });

    meteredMeeting.on("participantJoined", (localTrackItem) => {});

    meteredMeeting.on("participantLeft", (localTrackItem) => {});

    meteredMeeting.on("onlineParticipants", (onlineParticipants) => {
      setOnlineUsers([...onlineParticipants]);
    });

    meteredMeeting.on("localTrackUpdated", (item) => {
      const stream = new MediaStream(item.track);
      setLocalVideoStream(stream);
    });

    return () => {
      meteredMeeting.removeListener("remoteTrackStarted");
      meteredMeeting.removeListener("remoteTrackStopped");
      meteredMeeting.removeListener("participantJoined");
      meteredMeeting.removeListener("participantLeft");
      meteredMeeting.removeListener("onlineParticipants");
      meteredMeeting.removeListener("localTrackUpdated");
    };
  });

  // Will call the API to create a new
  // room and join the user.
  async function handleCreateMeeting(username) {
    // Calling API to create room
    const { data } = await axios.post(API_LOCATION + "/api/create/room");
    // Calling API to fetch Metered Domain
    const response = await axios.get(API_LOCATION + "/api/metered-domain");
    // Extracting Metered Domain and Room Name
    // From responses.
    const METERED_DOMAIN = response.data.METERED_DOMAIN;
    const roomName = data.roomName;

    // Calling the join() of Metered SDK
    const joinResponse = await meteredMeeting.join({
      name: username,
      roomURL: METERED_DOMAIN + "/" + roomName,
    });

    setUsername(username);
    setRoomName(roomName);
    setMeetingInfo(joinResponse);
    setMeetingJoined(true);
  }

  // Will call th API to validate the room
  // and join the user
  async function handleJoinMeeting(roomName, username) {
    // Calling API to validate the roomName
    const response = await axios.get(
      API_LOCATION + "/api/validate-meeting?roomName=" + roomName
    );

    if (response.data.roomFound) {
      // Calling API to fetch Metered Domain
      const { data } = await axios.get(API_LOCATION + "/api/metered-domain");

      // Extracting Metered Domain and Room Name
      // From responses.
      const METERED_DOMAIN = data.METERED_DOMAIN;

      // Calling the join() of Metered SDK
      const joinResponse = await meteredMeeting.join({
        name: username,
        roomURL: METERED_DOMAIN + "/" + roomName,
      });

      setUsername(username);
      setRoomName(roomName);
      setMeetingInfo(joinResponse);

      setMeetingJoined(true);
    } else {
      alert("Invalid roomName");
    }
  }

  async function handleMicBtn() {
    if (micShared) {
      await meteredMeeting.stopAudio();
      setMicShared(false);
    } else {
      await meteredMeeting.startAudio();
      setMicShared(true);
    }
  }

  async function handleCameraBtn() {
    if (cameraShared) {
      await meteredMeeting.stopVideo();
      setLocalVideoStream(null);
      setCameraShared(false);
    } else {
      await meteredMeeting.startVideo();
      var stream = await meteredMeeting.getLocalVideoStream();
      setLocalVideoStream(stream);
      setCameraShared(true);
    }
  }

  async function handelScreenBtn() {
    if (!screenShared) {
      await meteredMeeting.startScreenShare();
      setScreenShared(false);
    } else {
      await meteredMeeting.stopVideo();
      setCameraShared(false);
      setScreenShared(true);
    }
  }

  async function handleLeaveBtn() {
    await meteredMeeting.leaveMeeting();
    setMeetingEnded(true);
  }

  return (
    <div className="App">
      {meetingJoined ? (
        meetingEnded ? (
          <MeetingEnded />
        ) : (
          <Meeting
            handleMicBtn={handleMicBtn}
            handleCameraBtn={handleCameraBtn}
            handelScreenBtn={handelScreenBtn}
            handleLeaveBtn={handleLeaveBtn}
            localVideoStream={localVideoStream}
            onlineUsers={onlineUsers}
            remoteTracks={remoteTracks}
            username={username}
            roomName={roomName}
            meetingInfo={meetingInfo}
          />
        )
      ) : (
        <Join
          handleCreateMeeting={handleCreateMeeting}
          handleJoinMeeting={handleJoinMeeting}
        />
      )}
    </div>
  );
}

export default App;

Conclusion

We have successfully built the group video calling application with Python Backend and React front-end.

You can grab the complete source code from Github: https://github.com/metered-ca/python-react-video-chat-app

The application is also avaliable as Docker Containers:

Backend: https://hub.docker.com/r/metered/python-video-demo

Frontend: https://hub.docker.com/r/metered/react-video-demo

How to embed video chat in WordPress in 7 easy steps

alakkadshaw — Tue, 05 Jul 2022 13:22:16 +0000

Introduction

In this article I am going to explain how to add video chat in your WordPress website.

WordPress is an awesome CMS and the most famous one in the world. According to WordPress.com 43% of the web runs on WordPress.

With a whole host of plugins and customizations available for WordPress you cannot go wrong with it.

Video chat is an awesome tool to have on your website. Whether to increase conversion or engagement, building relationships with your customers and audiences. There is simply no better tool than video.

Prerequisites:

WordPress Admin Access
A Video Chat Provider

Adding Video Chat to WordPress

You can add Video Chat to WordPress by following these steps:

Step 1: Login to your WordPress account.

Step 2: Add a Custom HTML Block

Once you are on the page go to the place where you want to add the Video Chat.

click on the add block button and search for a Custom HTML Block

In the Custom HTML block we will paste the code to add video chat to the WordPress website, more on this later

First, we need a video chat provider. We recommend going with Metered Video Chat.

Step 3: Create a Metered Video Account

To create a Metered Video Account go to the Metered Video page here.

Click on the Get Started button to create a free account.

Step 4: Create a room

Once you have created an account on the Dashboard click on the create room to button to create a room.

There are various settings that you can do here to customize the room to your liking

some of them are

Create a personalized URL
Up to 10,000 participants video chat
Live Chat with file and Image Sharing
Cloud Recordings
Moderation Features
Customizations
Privacy Settings
Create Public Rooms
Create Private Rooms
Record Streams

Moderation Video Chat Features

Camera on Join
Microphone on Join
Screen Sharing
Text Chat
New Chat for Meeting Session
Request to Join
Show Invite Instructions
Auto Join
Admin Only Broadcast
Add Watermark to your Video

and many more you can explore on the create room / edit room dashboard.

Step 5: Copy the Code

After you have created the video room you can see the embed code on the next page.

Copy the code, we will need to paste this code in our WordPress site to add video chat to your website

Step 6: Paste the code in the custom HTML block in WordPress

On the WordPress website we created a custom HTML block where we needed the video chat to appear.

In the custom HTML code block paste the embed code and save. Now you have created a Video Chat on your WordPress website.

Step 7: You have added the Video Chat to your WordPress site.

Now you have added the Video Chat in your WordPress site. You can customize the video experience including colors and font, functionality, recording as much as you like

for more on this keep reading

Group Video Chat to WordPress

You can adjust the settings to allow for group video calls. With Metered Video you can create group video calls with up to 10,0o0 participants

When creating a video chat room simple leave blank the Maximum participants settings or set it to the max number of participants that you expect in your meeting.

The video chat that you have added to your WordPress now becomes a group video chat.

1-1 Video Chat on WordPress

You can adjust the settings to make the Video Chat on your WordPress 1-1 only.

When creating a room in Metered Video set the Maximum participant setting to 2.

Now, there can be only 1-1 video meeting in that room. If in the future you want to set the 1-1 setting to a group video, you can easily leave blank the maximum participant setting or set a number for the participants of the group video

Customizing the Video Chat in WordPress

You can easily customize the video chat including the size of the video and how it looks in your website.

Size of the video Chat
Setting Custom Room Name
Setting the Video Chat Public or Private
Set Camera join
Microphone on join
Screen Sharing
Text Chat
New chat for Meeting Session
Request to join
Show invite instructions
Auto Join
Admin only broadcast
Watermark on Video
Maximum Participants
Meeting Join Webhook
Meeting left Webhook
Meeting ended Webhook
end Meeting after no activity in seconds
eject after
not before unix sec (NOT before)
expire Unix Sec (Expires)
eject on expire unix sec

1. Size of the chat

To adjust the size of the video iframe simply adjust the size of the div tag with the id metered-frame

The size and shape of the div that determines the size of the video chat.

2. Setting the custom room name.

Go to Dashboard -> Rooms -> edit room / create room

There you can see the Room name. If the room name is left blank then it automatically generates the room name or you can specify a custom room name here

When creating a custom room name remember to not place any spaces in the room name.

3. Setting the Video Chat Public or Private

You can set the Video chat as Public: Anyone can join the room. When setting the room as public a good idea would be to set Request to join to be true so that people must request to join your video call.

4. Set Camera join

You can set the setting such that the meeting participants join with their camera as on.

5.Microphone on join

You can set the setting such that the meeting participants join with their microphone as on.

6. Screen Sharing

You can set to allow the participants to be able to share screen. You can also switch this setting to off so that the participants cannot share their screens

7. Text Chat

You can also add Text chat along with the video calls. Text chat also comes with the ability to send files and images in the chat.

8. New Chat for Meeting Session

You can set so that you have a new chat session for a new meeting. or you can have it so the chat history is carried over to the next meeting.

9. Request to join

You can enable the request to join. When a new participants wants to join the meeting they will have to request to join and the admin must allow them to join the meeting

Admin can deny any the participant as well.

10. Show invite instructions

You can show the invite instructions in the room and participants can invite other people in the video room if the video is public.

Or you can choose to hide the invite instructions.

11. Auto join / Show Lobby

You can choose to show the lobby or hide the lobby and directly add the participant in the meeting

12. Admin Only Broadcast

When enabled only admin will be able to share camera, screen and microphone. All the other participants will not

13. Watermark

You can upload a watermark on your video call. If you are recording the video you can also see the watermark on your recorded file.

You can set the height and width of the watermark as well as the position of the watermark on the video

The position can be set as on the X axis and Y axis for a custom position

default positions include TOP LEFT, TOP RIGHT, BOTTOM LEFT, BOTTOM RIGHT

14. Maximum participants

You can set the maximum participants allowed in the meeting.

15. Webhooks

You can set webhooks for when some one joins the meeting, leaves the meeting, when the meeting starts, when the meeting ends.

You can even set different end point for each of these webhooks.

16. end Meeting after no activity.

You can set to end meeting after no activity. You can set the time in seconds after which the meeting will end automatically

For example you can set the meeting to end after no activity for 7200 seconds. If there is no activity for 7200 seconds than the meeting will end automatically.

17. Eject After:

Automatically eject all the participants after a certain amount of time. You can specify the amount of time after which the participants would be ejected.

18. Not before Unix Sec (Not before):

You can set the time and date before which the participants cannot join the meeting.

19. Expire Unix Sec (expires)

You can set the time and date after which the participants cannot join the meeting.

Recording Video Chat in WordPress (Optional)

You can record the meeting in the cloud as well and download them when needed. To set the recording go to Dashboard -> Create Room / Edit Room

and then enable Record Room (individual streams for audio and video will be recorded separately)

You can also record a composite stream where you get a single stream with audio and video combined.

If you are recording a composite video you can choose from a set of options like

Grid
Active Speaker and
Broadcaster

You can also stream the meeting using Metered Live Stream or by using RTMP out to stream using third party providers like YouTube and Facebook Live.

Downloading the recorded videos

You can easily download the recorded video using

Dashboard
Through API

1. Dashboard
Go to Dashboard-> Cloud Recordings

here you can see a list of recordings and you can download the recordings also delete the recording if you want to

2. Using API

You can use the API to download the recording. Here is the API documentation.

Conclusion

In this article I explained how we can add video chat and video meeting to your WordPress site.

Adding video chat with Metered Video is a as easy as adding an YouTube Video. Just add the iframe code to your WordPress site to add video chat to your WordPress site.

WebRTC with NodeJS: Building a Video Chat APP.

alakkadshaw — Mon, 21 Mar 2022 15:19:08 +0000

Using WebRTC with NodeJS we will be creating a Video Chat App.

In the guide we will go through building a Group Video Chat application, the application would allow the users to have a video conference and it would have features like active speaker detecting, waiting room and the ability to do screen sharing.

We will build the application using HTML+JavaScript with Node.JS + Express in the backend, the backend logic would be very simple, it will call the Metered REST API to create meeting rooms and to validate the meeting ids.

Our final application would run on all modern browsers on Windows/Mac/Linux as well as on mobile devices, like iOS and Android and would look like this:

Metered video Calling Application

You can download the complete source code from Github:
https://github.com/metered-ca/video-javascript-quickstart

Prerequisite

To build the video calling application to follow this guide you need to have basic knowledge of HTML and JavaScript and some familiarity with Node.JS.

We will use the Metered API and JavaScript SDK, for that you will need to have a Metered account, if you don't have it then you can easily create a free account by visiting https://dashboard.metered.ca/signup

After you have created an account, come back here for the next steps.

Application Structure

Our application would have a Node.JS + Express backend and HTML+JavaScript font-end, the backend would provide APIs to the front-end to create a meeting room and generate a meeting id and also to validate an existing meeting id.

Our folder structure would look something like this:

Metered Group Video Calling Application Folder Structure

.env
The .env file contains the environment variables here we will specify the METERED_DOMAIN and METERED_SECRET_KEY more on this later in the document.

src
The src folder contains all the source code for the project.

src/server.js
The server.js file contains the backend code and API routes and also contains the code to serve the front-end files.

src/config.js
The config.js contains the config variables for the project and also loads the values from the .env file or from the environment variables.

src/public/index.html
The index.html file contains all the front-end user interface built with HTML

src/public/script.js
The script.js file contains all the front-end login related to our video calling application, it will use the Metered JavaScript SDK and is the brains of our application.

Building the Backend

Let's start with building the backend of our application first.

1. Initializing our project

We will initialize our project and create a package.json, run the command below in your project root directory.

npm init -y

Next, we will install a few dependencies that would be needed in build our backend service, we would require the following dependencies:

dotenv: To load the environment variables from the .env file.
axios: To call the Metered REST APIs to create and validate Meeting IDs.
express: To create REST routes for our server.

npm install dotenv --save

npm install axios --save

npm install express --save

2. Creating config.js and .env file

We will create a config.js file and here we will add the variables that we would need in our application, like the port the application will run on and the Metered Domain and Metered Secret Key

javascript config.js

require('dotenv').config();
module.exports = {
    METERED_DOMAIN: process.env.METERED_DOMAIN || "",
    METERED_SECRET_KEY: process.env.METERED_SECRET_KEY || "",
    port: process.env.PORT || 4000
}

To obtain the Metered Domain and Secret Key, open your Metered Dashboard by going to https://dashboard.metered.ca

The name of your app + metered.live is your Metered Domain, for e.g name of your app is simpleapp then your Metered domain would be simpleapp.metered.live

Then go to Developers tab there you will find the secret key:

Metered Secret Key

Now create a .env file in the project's root with the following contents, and replace <METERED_DOMAIN> and <METERED_SECRET> key with the actual domain and secret key that we have obtained from the previous step.
(Be sure to paste the key without the < > angle brackets)

javascript .env

METERED_DOMAIN = "<METERED_DOMAIN>"
METERED_SECRET_KEY="<METERED_SECRET_KEY>"

3. Writing the code for backend service in server.js

Our server.js file would contain the APIs that would be used by our front-end application, and in the server.js file, we will call the Metered REST APIs.

There are 3 tasks we need to accomplish:

Serving the front-end application
API to create a meeting room and obtain a meeting id
API to validate an existing meeting Id

To accomplish that we will create 3 endpoints:

/ - Going to this route will serve our index.html
/validate-meeting - This route will validate the meeting ID, we will call the Metered REST API to validate the Meeting ID here.
/create-meeting-room - This route will create a new meeting room, thus generating a new meeting ID, we will call the Metered REST API to create a room here and send the Room ID as the response.
/metered-domain - This is a very simple route we have created, it will send the metered domain that we have specified in our .env / config.js to the front-end

Create server.js boilerplate code

We will require the dependencies and create the route handlers.

javascript server.js


//Requiring dependencies
const path = require("path");
const express = require('express');
var axios = require("axios").default;

// Creating express app
const app = express()
// Requiring the config
const config = require("./config");
const port = config.port;
// Printing the config for debugging
console.log(config);

// Checking if METERED_DOMAIN is specified, otherwise throwing an error.
if (!config.METERED_DOMAIN) {
    throw new Error("Please specify the METERED_DOMAIN.\nAdd as an environment variable or in the .env file or directly specify in the src/config.js\nIf you are unsure where to get METERED_DOMAIN please read the Advanced SDK Guide here: https://metered.ca/docs/Video%20Calls/JavaScript/Building%20a%20Group%20Video%20Calling%20Application");
}

// Check if METERED_SECRET_KEY is specified, otherwise throwing an error.
if (!config.METERED_SECRET_KEY) {
    throw new Error("Please specify the METERED_SECRET_KEY.\nAdd as an environment variable or in the .env file or directly specify in the src/config.js\nIf you are unsure where to get METERED_SECRET_KEY please read the Advanced SDK Guide here: https://metered.ca/docs/Video%20Calls/JavaScript/Building%20a%20Group%20Video%20Calling%20Application");
}

// Serving static files in the public folder
app.use("/", express.static(path.join(__dirname, '/public')))

app.get("/validate-meeting", function (req, res) {

});

app.post("/create-meeting-room", function(req, res) {

});

app.get("/metered-domain", function(req, res) {

});


app.listen(port, () => {
    console.log(`app listening at http://localhost:${port}`)
});

Serving Static Files

To serve the static files in the public folder, that contains our front-end code, like index.html and script.js we are using the express static middleware.

app.use("/", express.static(path.join(__dirname, '/public')))

Creating /validate-meeting route

In the /validate-meeting route we are going to call the Metered REST API, we will call the Get Room API and pass it is Meeting ID sent to us by the client to validate if a such a room exists, if it does then we will send a success response and if it doesn't then we will return an error.

We will use axios to make the HTTP request to the Metered Server.

javascript


app.get("/validate-meeting", function (req, res) {
    /**
     * Using the Metered Get Room API to check if the 
     * Specified Meeting ID is valid.
     * https://metered.ca/api#tag/room-api/paths/~1room~1{roomName}/get
     */
    var options = {
        method: 'GET',
        url: "https://" + config.METERED_DOMAIN + '/api/v1/room/' + req.query.meetingId,
        params: {
            secretKey: config.METERED_SECRET_KEY
        },
        headers: {
            Accept: 'application/json'
        }
    };

    axios.request(options).then(function (response) {
        console.log(response.data);
        res.send({
            success: true
        })
    }).catch(function (error) {
        console.error(error);
        res.send({
            success: false
        })
    });
});

Creating /create-meeting-room route

In the Create Meeting Room route we will again call the Metered REST API, and this time we will call the Create Room API.

javascript


app.post("/create-meeting-room", function(req, res) {
    /**
     * Using the Metered Create Room API to create a new
     * Meeting Room.
     * https://metered.ca/api#tag/room-api/paths/~1room/post
     */
    var options = {
        method: 'POST',
        url: "https://" + config.METERED_DOMAIN + '/api/v1/room/',
        params: {
            secretKey: config.METERED_SECRET_KEY
        },
        headers: {
            Accept: 'application/json'
        }
    };

    axios.request(options).then(function (response) {
        console.log(response.data);
        res.send({
            success: true,
            ...response.data
        })
    }).catch(function (error) {
        console.error(error);
        res.send({
            success: false
        })
    });
});

Create /metered-domain route

The Metered Domain route is very simple, here we will just return the Metered Domain value that we have specified in the .env / config.js file.

We are creating this route so that we can fetch the metered domain in our front-end application to initialize the Metered SDK and to keep the config centralized.

javascript


app.get("/metered-domain", function(req, res) {
    res.send({
        domain: config.METERED_DOMAIN
    });
});

Putting it all together

Here is our final server.js code with all the code put together:

javascript


//Requiring dependencies
const path = require("path");
const express = require('express');
var axios = require("axios").default;

// Creating express app
const app = express()
// Requiring the config
const config = require("./config");
const port = config.port;
// Priting the config for debugging
console.log(config);

// Checking if METERED_DOMAIN is specified, otherwise throwing an error.
if (!config.METERED_DOMAIN) {
    throw new Error("Please specify the METERED_DOMAIN.\nAdd as an environment variable or in the .env file or directly specify in the src/config.js\nIf you are unsure where to get METERED_DOMAIN please read the Advanced SDK Guide here: https://metered.ca/docs/Video%20Calls/JavaScript/Building%20a%20Group%20Video%20Calling%20Application");
}

// Check if METERED_SECRET_KEY is specified, otherwise throwing an error.
if (!config.METERED_SECRET_KEY) {
    throw new Error("Please specify the METERED_SECRET_KEY.\nAdd as an environment variable or in the .env file or directly specify in the src/config.js\nIf you are unsure where to get METERED_SECRET_KEY please read the Advanced SDK Guide here: https://metered.ca/docs/Video%20Calls/JavaScript/Building%20a%20Group%20Video%20Calling%20Application");
}

// Serving static files in the public folder
app.use("/", express.static(path.join(__dirname, '/public')))

app.get("/validate-meeting", function (req, res) {
    /**
     * Using the Metered Get Room API to check if the 
     * Specified Meeting ID is valid.
     * https://metered.ca/api#tag/room-api/paths/~1room~1{roomName}/get
     */
    var options = {
        method: 'GET',
        url: "https://" + config.METERED_DOMAIN + '/api/v1/room/' + req.query.meetingId,
        params: {
            secretKey: config.METERED_SECRET_KEY
        },
        headers: {
            Accept: 'application/json'
        }
    };

    axios.request(options).then(function (response) {
        console.log(response.data);
        res.send({
            success: true
        })
    }).catch(function (error) {
        console.error(error);
        res.send({
            success: false
        })
    });
});

app.post("/create-meeting-room", function(req, res) {
    /**
     * Using the Metered Create Room API to create a new
     * Meeting Room.
     * https://metered.ca/api#tag/room-api/paths/~1room/post
     */
    var options = {
        method: 'POST',
        url: "https://" + config.METERED_DOMAIN + '/api/v1/room/',
        params: {
            secretKey: config.METERED_SECRET_KEY
        },
        headers: {
            Accept: 'application/json'
        }
    };

    axios.request(options).then(function (response) {
        console.log(response.data);
        res.send({
            success: true,
            ...response.data
        })
    }).catch(function (error) {
        console.error(error);
        res.send({
            success: false
        })
    });
});

app.get("/metered-domain", function(req, res) {
    res.send({
        domain: config.METERED_DOMAIN
    });
});


app.listen(port, () => {
    console.log(`app listening at http://localhost:${port}`)
});

Front End

Let's start building the front-end of our application, we will first create our index.html file and script.js files and add some boilerplate code.

In the front-end we have to build 4 main areas:

Join Meeting Area - Allow the user to enter an existing meeting id or create a new meeting
Waiting Area - Allow user to set a username, and select camera and microphone, see the preview of the camera and join the meeting
Meeting Area - Main meeting interface
Meeting Ended Area - A screen to show when the meeting end or the user decides to leave the meeting.

1. Boilerplate code

We will create index.html file and include the front-end dependencies like:

Metered Javascript SDK
Daily UI a CSS Component library and Tailwind CSS for Styling
jQuery

We will also create 4 main containers to hold our 4 views, the Join Meeting Area, Waiting Area, Meeting Area, and Meeting Ended Area and we will show/hide them as the user moves from one view to another.

Initially the Join Meeting Area would be visible and rest of the views will be hidden:

javascript

<!DOCTYPE html>
<html lang="en" class="bg-white">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Demo App</title>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"
        integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Import the webpage's stylesheet -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/daisyui@1.11.1/dist/full.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.metered.ca/sdk/video/1.1.6/sdk.min.js"></script>

</head>

<body>

   <!-- Header Nav Bar -->
    <div class="navbar mb-2 shadow-lg bg-neutral text-neutral-content">
        <div class="flex-none px-2 mx-2">
            <span class="text-lg font-bold">
                Metered
            </span>
        </div>
        <div class="flex-1 px-2 mx-2">
            <div class="items-stretch hidden lg:flex">
                <a href="https://metered.ca/docs/Video%20Calls/JavaScript/Building%20a%20Group%20Video%20Calling%20Application" target="_blank"
                    class="btn btn-ghost btn-sm rounded-btn">
                    Advanced SDK Guide
                </a>
                <a href="https://metered.ca/docs/Video%20Calls/JavaScript/Tips%20and%20Best%20Practices" target="_blank"
                    class="btn btn-ghost btn-sm rounded-btn">
                    Tips and Best practices
                </a>
                <a href="https://metered.ca/docs/SDK-Reference/JavaScript/Methods/Methods%20Introduction" target="_blank" class="btn btn-ghost btn-sm rounded-btn">
                    SDK Reference
                </a>
            </div>
        </div>
    </div>
  <!-- Header Nav Bar End -->



    <div id="meetingIdContainer" class="w-full bg-base-300 hidden font-bold text-center py-2">
        Meeting ID: <span id="displayMeetingId"></span>
    </div>

    <!-- Join view -->
    <div id="joinView" class="w-full items-center justify-center flex">

    </div>

    <!-- Waiting area -->
    <div id="waitingArea" class="w-full items-center justify-center flex hidden">

    </div>

    <!-- Meeting view -->
    <div id="meetingView" class="hidden ">

    </div>

  <!-- Leave View -->
    <div id="leaveView" class="flex items-center justify-center hidden">

    </div>
    <!-- Import the webpage's javascript file -->
    <script src="/script.js" defer></script>
</body>

</html>

2. Building the Join Meeting Area

Metered Group Video Calling Application Join Area.

In the #joinView div we will create the Join Meeting Area, the Join Meeting Area would contain an input to enter the Meeting ID and buttons to join the existing meeting or create a new meeting.

html

<div id="joinView" class="w-full items-center justify-center flex">
        <div class="bg-base-300 w-11/12 max-w-screen-md  rounded mt-48 p-10">
            <div class="form-control">
                <label class="label">
                    <span class="label-text">Meeting ID</span>
                </label>
                <div class="relative">
                    <input id="meetingId" type="text" placeholder="Meeting ID"
                        class="w-full pr-16 input input-primary input-bordered" />
                    <button id="joinExistingMeeting" class="absolute top-0 right-0 rounded-l-none btn btn-primary text-xs">
                        <span class="hidden sm:block">Join Existing Meeting</span>
                        <span class="sm:hidden">Join</span>
                    </button>
                </div>
            </div>
            <div class="divider">OR</div>
            <div class="flex justify-center">
                <button id="createANewMeeting" class="btn btn-primary">Create a new meeting</button>
            </div>
        </div>
    </div>

#meetingId - Input will hold the value for the an existing meeting id that the user wish to join.

#joinExistingMeeting - Button will call our /validate-meeting endpoint which will in turn call our Metered REST API to validate the meeting id, if the meeting id is valid then we will call the Metered SDK method to join the meeting.

#createANewMeeting - Button will call our /create-meeting-room endpoint to create a new room, and then will cal the Metered SDK method to join the newly created room.

Here is our script.js code to handle the click events on the buttons #joinExistingMeeting and #createANewMeeting

javascript


// Creating instance of Metered Javascript SDK
const meeting = new Metered.Meeting();
// Creating a Global variable to store the Meeting ID
let meetingId = "";

$("#joinExistingMeeting").on("click", async function (e) {
    if (e) e.preventDefault();


    meetingId = $("#meetingId").val();
    if (!meetingId) {
        return alert("Please enter meeting id");
    }

    // Sending request to validate meeting id
    try {
        const response = await axios.get("/validate-meeting?meetingId=" + meetingId);
        if (response.data.success) {
            // Meeting id is valid, taking the user to the waiting area.
            $("#joinView").addClass("hidden")
            $("#waitingArea").removeClass("hidden");
            $("#displayMeetingId").text(meetingId);
            $("#meetingIdContainer").removeClass("hidden");
            initializeWaitingArea();
        } else {
            alert("meeting id is invalid");
        }
    } catch (ex) {
        alert("meeting Id is invalid");
    }

});

$("#createANewMeeting").on("click", async function (e) {
    if (e) e.preventDefault();

    // Sending request to create a new meeting room
    try {
        const response = await axios.post("/create-meeting-room");
        if (response.data.success) {
            $("#joinView").addClass("hidden")
            $("#waitingArea").removeClass("hidden");
            $("#displayMeetingId").text(response.data.roomName);
            $("#meetingIdContainer").removeClass("hidden");
            meetingId = response.data.roomName;
            initializeWaitingArea();
        }
    } catch (ex) {
        alert("Error occurred when creating a new meeting");
    }
});

Here if the existing meeting id is valid or after creating a new meeting id, we are calling the initializeWaitingArea() method which we will discuss in the next step.

3. Building the Waiting Area

Metered Group Video Calling Application Waiting Area.

In the #waitingArea div we will build the waiting area of the application, in the waiting area, we would want to perform the following operations:

Allow the user to select the camera by listing the available cameras on the device
Allow the user to select the microphone by listing the available microphones on the device.
Allow the user to select the speaker by listing the available audio output devices.
Allow the user to join the meeting with microphone muted/unmuted
Allow the user to join the meeting with camera muted/unmuted
Show the preview of the selected camera

Metered SDK provides us with various helper methods that would allow to easily accomplish these tasks.

html


<div id="waitingArea" class="w-full items-center justify-center flex hidden">
        <div class="bg-base-300 w-11/12 rounded mt-48 p-10">
            <video id="waitingAreaVideoTag" class="w-full" muted autoplay playsinline></video>


            <div class="flex items-center justify-center mt-4 space-x-4">
                <button id="waitingAreaMicrophoneButton" class="btn">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z"
                            clip-rule="evenodd"></path>
                    </svg>
                </button>
                <button id="waitingAreaCameraButton" class="btn">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z">
                        </path>
                    </svg>
                </button>
            </div>

            <div class="divider"></div>
            <div class="grid grid-cols-3 space-x-4">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Camera</span>
                    </label>
                    <select id="cameras" class="select select-bordered w-full"> </select>
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Microphone</span>
                    </label>
                    <select id="microphones" class="select select-bordered w-full"> </select>
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Speaker</span>
                    </label>
                    <select id="speakers" class="select select-bordered w-full"> </select>
                </div>
            </div>

            <div class="form-control">
                <label class="label">
                    <span class="label-text">Enter a username</span>
                </label>
                <div class="relative">
                    <input id="username" type="text" placeholder="username" class="w-full pr-16 input input-primary input-bordered" />
                    <button id="joinMeetingButton" class="absolute top-0 right-0 rounded-l-none btn btn-primary">
                        <span class="hidden sm:block">Join Existing Meeting</span>
                        <span class="sm:hidden">Join</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

#waitingAreaVideoTag - Video Tag: Used to show the preview of the camera.

#waitingAreaMicrophoneButton - Button: Used to mute/unmute the microphone when the user joins the meeting.

#waitingAreaCameraButton - Button: Used to enable/disable the camera when the user joins the meeting.

#cameras - Select Input: Show the list of available cameras on the system.

#microphones - Select Input: Show the list of available microphones on the system.

#speakers - Select Input: Show the list of available audio outputs on the device.

#username - Text Input: Allow the user to enter a username to join the meeting.

#joinMeetingButton - Button: When pressed the user will join the meeting, we will hide the waiting area and show the meeting area.

javascript


/**
 * Method to initialize the waiting area:
 * This methods calls the SDK methods to request the 
 * user for microphone and camera permissions.
 */
var videoUnavailable = true;
var audioUnavailable = true;
async function initializeWaitingArea() {
    let audioOutputDevices = [];
    try {
        audioOutputDevices = await meeting.listAudioOutputDevices()
    } catch (ex) {
        console.log("option not available - it is unsupported in firefox", ex);
    }

    let audioInputDevices = [];
    try {
        audioInputDevices = await meeting.listAudioInputDevices();
    } catch (ex) {
        console.log("camera not available or have disabled camera access", ex);
        audioUnavailable = true;
        // Disabling the camera button
        $("#waitingAreaMicrophoneButton").attr("disabled", true)
    }

    let videoInputDevices = [];
    try {
        videoInputDevices = await meeting.listVideoInputDevices()
    } catch (ex) {
        console.log("camera not available or have disabled camera access", ex);
        videoUnavailable = true;
        // Disabling the camera button
        $("#waitingAreaCameraButton").attr("disabled", true)
    }



    let cameraOptions = [];
    for (let device of videoInputDevices) {
        cameraOptions.push(
            `<option value="${device.deviceId}">${device.label}</option>`
        )
    }
    let microphoneOptions = [];
    for (let device of audioInputDevices) {
        microphoneOptions.push(
            `<option value="${device.deviceId}">${device.label}</option>`
        )
    }
    let speakerOptions = [];
    for (let device of audioOutputDevices) {
        speakerOptions.push(
            `<option value="${device.deviceId}">${device.label}</option>`
        )
    }

    $("#cameras").html(cameraOptions.join(""));
    $("#microphones").html(microphoneOptions.join(""));
    $("#speakers").html(speakerOptions.join(""));

    // Selecting different camera
    $("#cameras").on("change", async function (value) {
        const deviceId = $("#cameras").val();
        console.log(deviceId);
        await meeting.chooseVideoInputDevice(deviceId);
    });

    // Setting different microphone
    $("#microphones").on("change", async function (value) {
        const deviceId = $("#microphones").val();
        await meeting.chooseAudioInputDevice(deviceId);
    });

    // Setting different speaker
    $("#speakers").on("change", async function (value) {
        const deviceId = $("#speakers").val();
        await meeting.chooseAudioOutputDevice(deviceId);
    });
}

/**
 * Adding click events to buttons in waiting area
 */
let microphoneOn = false;
$("#waitingAreaMicrophoneButton").on("click", function () {
    if (microphoneOn) {
        $("#waitingAreaMicrophoneButton").removeClass("bg-accent");
        microphoneOn = false;
    } else {
        microphoneOn = true;
        $("#waitingAreaMicrophoneButton").addClass("bg-accent");
    }
});

let cameraOn = false;
let localVideoStream = null;
$("#waitingAreaCameraButton").on("click", async function () {
    if (cameraOn) {
        cameraOn = false;
        $("#waitingAreaCameraButton").removeClass("bg-accent");
        const tracks = localVideoStream.getTracks();
        tracks.forEach(function (track) {
            track.stop();
        });
        localVideoStream = null;
        $("#waitingAreaVideoTag")[0].srcObject = null;
    } else {
        try {
            $("#waitingAreaCameraButton").addClass("bg-accent");
            localVideoStream = await meeting.getLocalVideoStream();
            $("#waitingAreaVideoTag")[0].srcObject = localVideoStream;
            cameraOn = true;

        } catch (ex) {
            $("#waitingAreaCameraButton").removeClass("bg-accent");
            console.log("Error occurred when trying to acquire video stream", ex);
            $("#waitingAreaCameraButton").attr("disabled", true)
        }
    }
});

let meetingInfo = {};
$("#joinMeetingButton").on("click", async function () {
    var username = $("#username").val();
    if (!username) {
        return alert("Please enter a username");
    }

    try {
        console.log(meetingId)

        const {
            data
        } = await axios.get("/metered-domain");
        console.log(data.domain)

        meetingInfo = await meeting.join({
            roomURL: `${data.domain}/${meetingId}`,
            name: username
        });
        console.log("Meeting joined", meetingInfo);
        $("#waitingArea").addClass("hidden");
        $("#meetingView").removeClass("hidden");
        $("#meetingAreaUsername").text(username);
        if (cameraOn) {
            $("#meetingViewCamera").addClass("bg-accent");
            if (localVideoStream) {
                const tracks = localVideoStream.getTracks();
                tracks.forEach(function (track) {
                    track.stop();
                });
                localVideoStream = null;
            }
            await meeting.startVideo();
        }

        if (microphoneOn) {
            $("#meetingViewMicrophone").addClass("bg-accent");
            await meeting.startAudio();
        }
    } catch (ex) {
        console.log("Error occurred when joining the meeting", ex);
    }
});

Let's see how we have accomplished 6 of our above tasks with Metered SDK:

Loading the available cameras in the Select Box

Metered SDK Provides a method called listVideoInputDevices that returns a list of cameras connected to the device, in case of a mobile device it will list the front and back cameras and for a computer is multiple cameras are connected it would list all of them, allowing the user to select which camera they wish to share.

You can read more about the method here listVideoInputDevices().

javascript


let videoInputDevices = [];
    try {
        videoInputDevices = await meeting.listVideoInputDevices()
    } catch (ex) {
        console.log("camera not available or have disabled camera access", ex);
        videoUnavailable = true;
        // Disabling the camera button
        $("#waitingAreaCameraButton").attr("disabled", true)
    }

    let cameraOptions = [];
    for (let device of videoInputDevices) {
        cameraOptions.push(
            `<option value="${device.deviceId}">${device.label}</option>`
        )
    }
 $("#cameras").html(cameraOptions.join(""));

In the above code snippet we are loading the list of cameras, and then populating the select box.

Handling Camera Selection

Metered SDK provides a method called chooseVideoInputDevice() which accepts the a deviceId which is returned by the listVideoInputDevices() method.

You can read more about the chooseVideoInputDevice() method here.

javascript


// Selecting different camera
$("#cameras").on("change", async function (value) {
    const deviceId = $("#cameras").val();
    console.log(deviceId);
    await meeting.chooseVideoInputDevice(deviceId);
});

In the above code we had attached an onchange listener on the select box and then calling the chooseVideoInputDevice() method of the Metered SDK and passing the deviceId of the selected camera.

Loading List of Available Microphones in the Select Box

Metered SDK Provides a method called listAudioInputDevices() that returns a list of microphones connected to the device.

You can read more about the method here listAudioInputDevices().

javascript


let audioInputDevices = [];
try {
    audioInputDevices = await meeting.listAudioInputDevices();
} catch (ex) {
    console.log("camera not available or have disabled camera access", ex);
    audioUnavailable = true;
    // Disabling the camera button
    $("#waitingAreaMicrophoneButton").attr("disabled", true)
}

let microphoneOptions = [];
for (let device of audioInputDevices) {
    microphoneOptions.push(
        `<option value="${device.deviceId}">${device.label}</option>`
    )
}
$("#microphones").html(microphoneOptions.join(""));

In the above code snippet we are fetching the list of microphones and then adding them to a select box.

Handling Microphone Selection

Metered SDK provides a method called chooseAudioInputDevice() which accepts the a deviceId which is returned by the listAudioInputDevices() method.

You can read more about the chooseAudioInputDevice() method here.

javascript


// Setting different microphone
$("#microphones").on("change", async function (value) {
    const deviceId = $("#microphones").val();
    await meeting.chooseAudioInputDevice(deviceId);
});

In the above code we had attached an onchange listener on the select box and then calling the chooseAudioInputDevice() method of the Metered SDK and passing the deviceId of the selected camera.

Loading List of Available Audio Outputs (Speakers) in the Select Box

Metered SDK Provides a method called listAudioOutputDevices() that returns a list of audio output devices, like speakers or headphones connected to the device.

You can read more about the method here listAudioOutputDevices().

It works in Google Chrome, but not all browsers currently support this method.

javascript


let audioOutputDevices = [];
try {
    audioOutputDevices = await meeting.listAudioOutputDevices()
} catch (ex) {
    console.log("option not available - it is unsupported in firefox", ex);
}
let speakerOptions = [];
for (let device of audioOutputDevices) {
    speakerOptions.push(
        `<option value="${device.deviceId}">${device.label}</option>`
    )
}
$("#speakers").html(speakerOptions.join(""));

In the above code snippet we are calling listAudioOutputDevices method of the Metered SDK and then populating a select box with the returned values.

Handling Speaker Selection

To select the speaker, there is method called a chooseAudioOutputDevice() which accepts the deviceId of the audio output device returned by the listAudioOutputDevices() method.

You can read more about chooseAudioOutputDevice() method here.

javascript


// Setting different speaker
$("#speakers").on("change", async function (value) {
    const deviceId = $("#speakers").val();
    await meeting.chooseAudioOutputDevice(deviceId);
});

In the above code snippet, we are attaching an onchange listener to the select box where we have populated the audio output devices, and then when an option is selected we are passing the selected deviceId to the chooseAudioOutputDevice method.

Allow the user to join the meeting with microphone muted/unmuted

We will create a variable called microphoneOn and add a click listener to the microphone button in the waiting area microphone button and then toggle the value of this variable.

javascript

let microphoneOn = false;
$("#waitingAreaMicrophoneButton").on("click", function () {
    if (microphoneOn) {
        $("#waitingAreaMicrophoneButton").removeClass("bg-accent");
        microphoneOn = false;
    } else {
        microphoneOn = true;
        $("#waitingAreaMicrophoneButton").addClass("bg-accent");
    }
});

And when the user presses the join meeting button, and after joining the meeting we will check the value of the microphoneOn variable, if it is set to true then we will call the startAudio() method of the Metered SDK, we will describe in the implementation of this later in the article.

Allow the user to join the meeting with camera muted/unmuted and showing the preview of the camera in the waiting area

Similar to microphoneOn we will create a variable called cameraOn and attach a click listener to the camera button in the waiting area, and toggle the value of the cameraOn variable, and when the user presses the join meeting button we will call the startVideo() method of the Metered SDK.

javascript

let cameraOn = false;
let localVideoStream = null;
$("#waitingAreaCameraButton").on("click", async function () {
    if (cameraOn) {
        cameraOn = false;
        $("#waitingAreaCameraButton").removeClass("bg-accent");
        const tracks = localVideoStream.getTracks();
        tracks.forEach(function (track) {
            track.stop();
        });
        localVideoStream = null;
        $("#waitingAreaVideoTag")[0].srcObject = null;
    } else {
        try {
            $("#waitingAreaCameraButton").addClass("bg-accent");
            localVideoStream = await meeting.getLocalVideoStream();
            $("#waitingAreaVideoTag")[0].srcObject = localVideoStream;
            cameraOn = true;

        } catch (ex) {
            $("#waitingAreaCameraButton").removeClass("bg-accent");
            console.log("Error occurred when trying to acquire video stream", ex);
            $("#waitingAreaCameraButton").attr("disabled", true)
        }
    }
});

In the above code snippet, there is an if condition, which is checking whether the cameraOn variable is set to true or not.

If the cameraOn is set to true then we are turning off the camera, and if it is false then we are turning on the camera, let start with the "else" part first.

In the else block we are calling a Metered SDK method getLocalVideoStream() this method returns the video steam of the device video device or of the device selected using the chooseVideoInputDevice() method, you read more about the getLocalVideoStream() method here.

javascript

localVideoStream = await meeting.getLocalVideoStream();
$("#waitingAreaVideoTag")[0].srcObject = localVideoStream;
cameraOn = true;

And we have created a video tag in our HTML file to show the local video, so we will be setting the srcObject attribute of the video tag to our localVideoStream, this will show the local video stream in the video tag and we will set the cameraOn variable to true.

Now if the user presses the camera button again, our method will be executed, and this time the cameraOn variable will be set to true.

javascript

const tracks = localVideoStream.getTracks();
tracks.forEach(function (track) {
    track.stop();
});
localVideoStream = null;
$("#waitingAreaVideoTag")[0].srcObject = null;

So we will stop the localVideoStream, so that the camera light turns off, to do that we would need to fetch the tracks of the localVideoStream and stop all the tracks, this will turn off the camera light, and we will set the cameraOn variable to false.

Joining the Meeting

We will attach an onclick listener to the #joinMeetingButton and in the event handler, we will call the join() method of the Metered SDK.

After the user successfully joins the meeting, we will check if the value of cameraOn is set to true, if yes then we will stop the localVideoStream which was used to show the preview of the camera in the waiting area and call the startVideo() method to share the camera with the meeting participants.

We will check if microphoneOn variable is set to true, if yes then we will call the startAudio() method to share the microphone with the meeting participants.

javascript

let meetingInfo = {};
$("#joinMeetingButton").on("click", async function () {
    var username = $("#username").val();
    if (!username) {
        return alert("Please enter a username");
    }

    try {
        console.log(meetingId)

       // Fetching our Metered Domain e.g: videoapp.metered.live 
       // that we have added in the .env/config.js file in backend

        const {
            data
        } = await axios.get("/metered-domain");
        console.log(data.domain)
                // Calling the Join Method of the Metered SDK
        meetingInfo = await meeting.join({
            roomURL: `${data.domain}/${meetingId}`,
            name: username
        });
        console.log("Meeting joined", meetingInfo);
        $("#waitingArea").addClass("hidden");
        $("#meetingView").removeClass("hidden");
        $("#meetingAreaUsername").text(username);
        if (cameraOn) {
            $("#meetingViewCamera").addClass("bg-accent");
            if (localVideoStream) {
                const tracks = localVideoStream.getTracks();
                tracks.forEach(function (track) {
                    track.stop();
                });
                localVideoStream = null;
            }
            await meeting.startVideo();
        }

        if (microphoneOn) {
            $("#meetingViewMicrophone").addClass("bg-accent");
            await meeting.startAudio();
        }
    } catch (ex) {
        console.log("Error occurred when joining the meeting", ex);
    }
});

4. Building the Meeting Area

In the meeting area the actual meeting takes place, here we have to implement the following functionality:

If the user has shared their camera/screen show the preview of the camera or screen
When a remote user joins the meeting show the user in the online users list
When a remote user leaves the meeting remove the user
When remote user share their camera / screen show the video stream
When remote user share microphone handle the audio stream
Allow the user to share microphone
Allow user to share camera
Allow user to share screen
Enable active speaker detection and show the user who is speaking in the center.

Let start with building the UI for the meeting area:

javascript

<!-- Meeting view -->
<div id="meetingView">
    <!-- remote video containers -->
    <div id="remoteParticipantContainer" style="display: flex;">

    </div>

    <!-- Active Speaker -->
    <div class="mt-4">
        <div style=" border-radius: 5px;" class="bg-base-300">
            <video id="activeSpeakerVideo" muted autoplay playsinline
                style="padding: 0; margin: 0; width: 100%; height: 400px;"></video>
            <div id="activeSpeakerUsername" class="bg-base-300  " style=" text-align: center;">

            </div>
        </div>
    </div>

    <div class="flex flex-col bg-base-300" style="width: 150px">
        <video id="meetingAreaLocalVideo" muted autoplay playsinline
            style="padding: 0; margin: 0; width: 150px; height: 100px;"></video>
        <div id="meetingAreaUsername" class="bg-base-300    " style=" text-align: center;">

        </div>
    </div>
    <!-- Controls -->
    <div style="display: flex; justify-content: center; margin-top: 20px;" class="space-x-4">
        <button id="meetingViewMicrophone" class="btn">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z">
                </path>
            </svg>
        </button>

        <button id="meetingViewCamera" class="btn">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
                </path>
            </svg>
        </button>

        <button id="meetingViewScreen" class="btn">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                </path>
            </svg>
        </button>

        <button id="meetingViewLeave" class="btn">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path></svg>
        </button>
    </div>
</div>

#remoteParticipantContainer div - Here we will add the remote participants as they join the meeting.

#activeSpeakerVideo video tag - In this video tag we will show the video stream of the active speaker. this video tag is at the center of the page.

#activeSpeakerUsername div - Here we will show the username of the active speaker

#meetingAreaLocalVideo video tag - The video preview of the local camera stream of the user if the user has shared his/her camera or screen.

#meetingAreaUsername div - This will contain the show the username of the current user.

#meetingViewMicrophone button - This button when pressed will share the microphone with other participants in the meeting.

#meetingViewCamera button - This button will share the camera with other participants in the meeting

#meetingViewScreen button - This button will share the screen with other participants in the meeting

#meetingViewLeave button - This exits the user from the meeting.

Let's see how we can achieve the goals that we have listed above:

Showing/Hiding the preview of screen or camera shared by the user

We have created a video tag with id #meetingAreaLocalVideo, in this video tag we will show the preview of the local camera or screen shared by our current user

To achieve this, Metered SDK emits some events:

localTrackStarted - Read more about it here
localTrackUpdated
localTrackStopped - Read more about it here

Whenever the local media is shared, wether audio or video this event is emitted, we will not do anything when audio is emitted (because if we add the audio tag and add the stream then user will hear his/her own voice through the speakers), but when a video stream is shared we will add it to our #meetingAreaLocalVideo video tag.

javascript

meeting.on("localTrackStarted", function (trackItem) {
    if (trackItem.type === "video") {
        let track = trackItem.track;
        let mediaStream = new MediaStream([track]);
        $("#meetingAreaLocalVideo")[0].srcObject = mediaStream;
        $("#meetingAreaLocalVideo")[0].play();
    }
});

When the user selects a different camera or switches from camera sharing to screen sharing, the localTrackUpdated event is emitted, when this event is emitted we have to update our video tag so that it shows the currently shared video stream. (If we do not handle this event and the user selects a different camera or select screen sharing, then the video tag will show blank video).

javascript

meeting.on("localTrackUpdated", function (trackItem) {
    if (trackItem.type === "video") {
        let track = trackItem.track;
        let mediaStream = new MediaStream([track]);
        $("#meetingAreaLocalVideo")[0].srcObject = mediaStream;
    }
});

Finally, when the user wants to stop sharing his/her camera or screen, we have to remove the video from the video tag.

javascript


meeting.on("localTrackStopped", function (localTrackItem) {
    if (localTrackItem.type === "video") {
        $("#meetingAreaLocalVideo")[0].srcObject = null;
    }
});

Handling remote participants

We haven't talked about how we are going to show the video or handle the microphone shared by the remote participants in the meeting, so here we will go through how that is handled.

Handling participant left and participant joined

(1) When a remote participant joins the meeting we want to indicate that someone has joined the meeting, and we will show their username somewhere and create the video and audio tags to show the video if they share their camera or screen and listen to their audio if they share their microphone.

(2) Similarly, when the participant leaves the meeting we want to remove the block where the username, audio, and video tag for the participant is present.

(3) Also, when the user joins a meeting where there are already participants present, we need to handle get the list of all the existing users in the meeting and display their username and create audio and video tags to show the audio or video shared by the existing participants.

To handle the above 3 scenarios we have events provided by the Metered JavaScript SDK,

participantJoined - Read more about it here
participantLeft - Read more about it here
onlineParticipants. - Read more about it here

When a new participant joins the meeting the participantJoined event is emitted, when a participants leaves the meeting participantLeft event is emitted and when the user joins a meeting where there are existing participants then onlineParticipants event is emitted with a list of existing participants.

Let write the code to handle the participantJoined event:

javascript

meeting.on("participantJoined", function (participantInfo) {

    // This event is emitted for all the users, even for the current user,
    // so we want ignore if it is the current user.
    if (participantInfo._id === meeting.participantSessionId) return;

    // Creating a div with video, audio and a div tag to show username
    // Giving the div tag id of the participant so that it is easy for us to remove the tag
    // when the participant leaves the meeting.
    var participant =
        `<div id="participant-${participantInfo._id}" class="bg-base-300">
        <video id="participant-${participantInfo._id}-video" muted autoplay playsinline
            style="padding: 0; margin: 0; width: 150px; height: 100px;"></video>
        <audio id="participant-${participantInfo._id}-audio" autoplay playsinline
            style="padding: 0; margin: 0;"></audio>
        <div id="participant-${participantInfo._id}-username" class="bg-base-300    " style=" text-align: center;">
            ${participantInfo.name}
        </div>
    </div>`
    // Adding the HTML to our remoteParticipantContainer
    $("#remoteParticipantContainer").append(participant)
});

Code to handle the participantLeft event:

javascript

meeting.on("participantLeft", function (participantInfo) {
    console.log("participant has left the room", participantInfo);
    $(`#participant-${participantInfo._id}`).remove();
});

In the above code we are removing the div for the participant, that contains the participant's username, video and audio tags.

Code to handle onlineParticipants event:

javascript

meeting.on("onlineParticipants", function (onlineParticipants) {

    $("#remoteParticipantContainer").html("");
    for (let participantInfo of onlineParticipants) {
        if (participantInfo._id !== meeting.participantSessionId) {
            var participant =
                `<div id="participant-${participantInfo._id}" class="bg-base-300">
                <video id="participant-${participantInfo._id}-video" muted autoplay playsinline
                    style="padding: 0; margin: 0; width: 150px; height: 100px;"></video>
                <audio id="participant-${participantInfo._id}-audio" autoplay playsinline
                    style="padding: 0; margin: 0;"></audio>
                <div id="participant-${participantInfo._id}-username" class="bg-base-300    " style=" text-align: center;">
                    ${participantInfo.name}
                </div>
            </div>`
            $("#remoteParticipantContainer").append(participant)
        }
    }
});

The online participant's code is very similar to participantJoined event code, the only difference here is that we get an array of participants instead of one single participant and we loop through the array add them to the UI.

Handling when remote participants share their camera, screen or microphone

In the previous step, we have created the audio and video tag for the remote participants, now we need to add the video stream or audio stream to the audio or video tag and remove the audio and video stream when they share their video (screen or camera) and audio respectively.

For each remote participant we have created an audio tag with id participant-${participantInfo._id}-audio and video tag with id participant-${participantInfo._id}-video where ${participantInfo._id} will replace with the id of the participant, by creating id's like this it becomes easier for us to find the appropriate video/audio tag for the participant to attach the video or audio stream.

When the remote participant share's their video or microphone remoteTrackStarted event is emitted to all the participants in the meeting, and when the remote participant stop's sharing the camera or microphone, remoteTrackStopped event is emitted to all the participants.

remoteTrackStarted - Read more about it here
remoteTrackStopped - Read more about it here

javascript

meeting.on("remoteTrackStarted", function (trackItem) {

    if (trackItem.participantSessionId === meeting.participantSessionId) return;
    var track = trackItem.track;
    var mediaStream = new MediaStream([track]);
    $(`#participant-${trackItem.participantSessionId}-${trackItem.type}`)[0].srcObject = mediaStream;
    $(`#participant-${trackItem.participantSessionId}-${trackItem.type}`)[0].play();
});

meeting.on("remoteTrackStopped", function (trackItem) {
    if (trackItem.participantSessionId === meeting.participantSessionId) return;
    $(`#participant-${trackItem.participantSessionId}-${trackItem.type}`)[0].srcObject = null;
});

Handling active speaker

We have created a large video #activeSpeakerVideo in the center of the page, and here we will show the user who is currently speaking, to implement this Metered SDK provides and event called as activeSpeaker, this event contains the info of the user who is actively speaking.

activeSpeaker - Read more about it here

javascript

var currentActiveSpeaker = "";
meeting.on("activeSpeaker", function (activeSpeaker) {

    if (currentActiveSpeaker === activeSpeaker.participantSessionId) return;

    $("#activeSpeakerUsername").text(activeSpeaker.name);
    currentActiveSpeaker = activeSpeaker.participantSessionId;
    if ($(`#participant-${activeSpeaker.participantSessionId}-video`)[0]) {
        let stream = $(`#participant-${activeSpeaker.participantSessionId}-video`)[0].srcObject;
        $("#activeSpeakerVideo")[0].srcObject = stream.clone();

    }

    if (activeSpeaker.participantSessionId === meeting.participantSessionId) {
        let stream = $(`#meetingAreaLocalVideo`)[0].srcObject;
        if (stream) {
            $("#activeSpeakerVideo")[0].srcObject = stream.clone();
        }

    }
});

Here we will clone the video stream of the active speaking user from its video tag and show it in the #activeSpeakerVideo video tag, and also show the username of user in the #activeSpeakerUsername div tag.

Handling Leave Meeting

When the participant closes the window, the participant automatically leaves the meeting, we can also call the leaveMeeting(), if we want to leave the meeting.

javascript


$("#meetingViewLeave").on("click", async function () {
    await meeting.leaveMeeting();
    $("#meetingView").addClass("hidden");
    $("#leaveView").removeClass("hidden");
});

Complete Front-End Code

Here is our complete front-end code:

script.js

const meeting = new Metered.Meeting();
let meetingId = "";

$("#joinExistingMeeting").on("click", async function (e) {
    if (e) e.preventDefault();


    meetingId = $("#meetingId").val();
    if (!meetingId) {
        return alert("Please enter meeting id");
    }

    // Sending request to validate meeting id
    try {
        const response = await axios.get("/validate-meeting?meetingId=" + meetingId);
        if (response.data.success) {
            // Meeting id is valid, taking the user to the waiting area.
            $("#joinView").addClass("hidden")
            $("#waitingArea").removeClass("hidden");
            $("#displayMeetingId").text(meetingId);
            $("#meetingIdContainer").removeClass("hidden");
            initializeWaitingArea();
        } else {
            alert("meeting id is invalid");
        }
    } catch (ex) {
        alert("meeting Id is invalid");
    }

});

$("#createANewMeeting").on("click", async function (e) {
    if (e) e.preventDefault();

    // Sending request to create a new meeting room
    try {
        const response = await axios.post("/create-meeting-room");
        if (response.data.success) {
            $("#joinView").addClass("hidden")
            $("#waitingArea").removeClass("hidden");
            $("#displayMeetingId").text(response.data.roomName);
            $("#meetingIdContainer").removeClass("hidden");
            meetingId = response.data.roomName;
            initializeWaitingArea();
        }
    } catch (ex) {
        alert("Error occurred when creating a new meeting");
    }
});


/**
 * Method to initialize the waiting area:
 * This methods calls the SDK methods to request the 
 * user for microphone and camera permissions.
 */
var videoUnavailable = true;
var audioUnavailable = true;
async function initializeWaitingArea() {
    let audioOutputDevices = [];
    try {
        audioOutputDevices = await meeting.listAudioOutputDevices()
    } catch (ex) {
        console.log("option not available - it is unsupported in firefox", ex);
    }

    let audioInputDevices = [];
    try {
        audioInputDevices = await meeting.listAudioInputDevices();
    } catch (ex) {
        console.log("camera not available or have disabled camera access", ex);
        audioUnavailable = true;
        // Disabling the camera button
        $("#waitingAreaMicrophoneButton").attr("disabled", true)
    }

    let videoInputDevices = [];
    try {
        videoInputDevices = await meeting.listVideoInputDevices()
    } catch (ex) {
        console.log("camera not available or have disabled camera access", ex);
        videoUnavailable = true;
        // Disabling the camera button
        $("#waitingAreaCameraButton").attr("disabled", true)
    }



    let cameraOptions = [];
    for (let device of videoInputDevices) {
        cameraOptions.push(
            `<option value="${device.deviceId}">${device.label}</option>`
        )
    }
    let microphoneOptions = [];
    for (let device of audioInputDevices) {
        microphoneOptions.push(
            `<option value="${device.deviceId}">${device.label}</option>`
        )
    }
    let speakerOptions = [];
    for (let device of audioOutputDevices) {
        speakerOptions.push(
            `<option value="${device.deviceId}">${device.label}</option>`
        )
    }

    $("#cameras").html(cameraOptions.join(""));
    $("#microphones").html(microphoneOptions.join(""));
    $("#speakers").html(speakerOptions.join(""));

    // Selecting different camera
    $("#cameras").on("change", async function (value) {
        const deviceId = $("#cameras").val();
        console.log(deviceId);
        await meeting.chooseVideoInputDevice(deviceId);
    });

    // Setting different microphone
    $("#microphones").on("change", async function (value) {
        const deviceId = $("#microphones").val();
        await meeting.chooseAudioInputDevice(deviceId);
    });

    // Setting different speaker
    $("#speakers").on("change", async function (value) {
        const deviceId = $("#speakers").val();
        await meeting.chooseAudioOutputDevice(deviceId);
    });

}


/**
 * Adding click events to buttons in waiting area
 */
let microphoneOn = false;
$("#waitingAreaMicrophoneButton").on("click", function () {
    if (microphoneOn) {
        $("#waitingAreaMicrophoneButton").removeClass("bg-accent");
        microphoneOn = false;
    } else {
        microphoneOn = true;
        $("#waitingAreaMicrophoneButton").addClass("bg-accent");
    }
});

let cameraOn = false;
let localVideoStream = null;
$("#waitingAreaCameraButton").on("click", async function () {
    if (cameraOn) {
        cameraOn = false;
        $("#waitingAreaCameraButton").removeClass("bg-accent");
        const tracks = localVideoStream.getTracks();
        tracks.forEach(function (track) {
            track.stop();
        });
        localVideoStream = null;
        $("#waitingAreaVideoTag")[0].srcObject = null;
    } else {
        try {
            $("#waitingAreaCameraButton").addClass("bg-accent");
            localVideoStream = await meeting.getLocalVideoStream();
            $("#waitingAreaVideoTag")[0].srcObject = localVideoStream;
            cameraOn = true;

        } catch (ex) {
            $("#waitingAreaCameraButton").removeClass("bg-accent");
            console.log("Error occurred when trying to acquire video stream", ex);
            $("#waitingAreaCameraButton").attr("disabled", true)
        }
    }

});


let meetingInfo = {};
$("#joinMeetingButton").on("click", async function () {
    var username = $("#username").val();
    if (!username) {
        return alert("Please enter a username");
    }

    try {
        console.log(meetingId)

        const {
            data
        } = await axios.get("/metered-domain");
        console.log(data.domain)

        meetingInfo = await meeting.join({
            roomURL: `${data.domain}/${meetingId}`,
            name: username
        });
        console.log("Meeting joined", meetingInfo);
        $("#waitingArea").addClass("hidden");
        $("#meetingView").removeClass("hidden");
        $("#meetingAreaUsername").text(username);
        if (cameraOn) {
            $("#meetingViewCamera").addClass("bg-accent");
            if (localVideoStream) {
                const tracks = localVideoStream.getTracks();
                tracks.forEach(function (track) {
                    track.stop();
                });
                localVideoStream = null;
            }
            await meeting.startVideo();
        }

        if (microphoneOn) {
            $("#meetingViewMicrophone").addClass("bg-accent");
            await meeting.startAudio();
        }
    } catch (ex) {
        console.log("Error occurred when joining the meeting", ex);
    }
});

/**
 * Adding click events to buttons in Meeting Area
 */
$("#meetingViewMicrophone").on("click", async function () {
    if (microphoneOn) {
        microphoneOn = false;
        $("#meetingViewMicrophone").removeClass("bg-accent");
        await meeting.stopAudio();
    } else {
        microphoneOn = true;
        $("#meetingViewMicrophone").addClass("bg-accent");
        await meeting.startAudio();
    }
});

$("#meetingViewCamera").on("click", async function () {
    if (cameraOn) {
        cameraOn = false;
        $("#meetingViewCamera").removeClass("bg-accent");
        await meeting.stopVideo();
    } else {
        cameraOn = true;
        $("#meetingViewCamera").addClass("bg-accent");
        await meeting.startVideo();
    }
});

let screenSharing = false;
$("#meetingViewScreen").on("click", async function () {
    if (screenSharing) {
        $("#meetingViewScreen").removeClass("bg-accent");
        await meeting.stopVideo();
        return;
    } else {
        try {
            await meeting.startScreenShare();
            screenSharing = true;
            cameraOn = false;
            $("#meetingViewCamera").removeClass("bg-accent");
            $("#meetingViewScreen").addClass("bg-accent");
        } catch (ex) {
            console.log("Error occurred when trying to share screen", ex);
        }
    }
});


/**
 * Listening to events
 */

meeting.on("localTrackStarted", function (trackItem) {
    if (trackItem.type === "video") {
        let track = trackItem.track;
        let mediaStream = new MediaStream([track]);
        $("#meetingAreaLocalVideo")[0].srcObject = mediaStream;
        $("#meetingAreaLocalVideo")[0].play();
    }
});
meeting.on("localTrackUpdated", function (trackItem) {
    if (trackItem.type === "video") {
        let track = trackItem.track;
        let mediaStream = new MediaStream([track]);
        $("#meetingAreaLocalVideo")[0].srcObject = mediaStream;
    }
});

meeting.on("localTrackStopped", function (localTrackItem) {
    if (localTrackItem.type === "video") {
        $("#meetingAreaLocalVideo")[0].srcObject = null;
    }
});


meeting.on("remoteTrackStarted", function (trackItem) {

    if (trackItem.participantSessionId === meeting.participantSessionId) return;
    var track = trackItem.track;
    var mediaStream = new MediaStream([track]);
    $(`#participant-${trackItem.participantSessionId}-${trackItem.type}`)[0].srcObject = mediaStream;
    $(`#participant-${trackItem.participantSessionId}-${trackItem.type}`)[0].play();
});

meeting.on("remoteTrackStopped", function (trackItem) {
    if (trackItem.participantSessionId === meeting.participantSessionId) return;
    $(`#participant-${trackItem.participantSessionId}-${trackItem.type}`)[0].srcObject = null;
});

meeting.on("participantJoined", function (participantInfo) {

    if (participantInfo._id === meeting.participantSessionId) return;
    var participant =
        `<div id="participant-${participantInfo._id}" class="bg-base-300">
        <video id="participant-${participantInfo._id}-video" muted autoplay playsinline
            style="padding: 0; margin: 0; width: 150px; height: 100px;"></video>
        <audio id="participant-${participantInfo._id}-audio" autoplay playsinline
            style="padding: 0; margin: 0;"></audio>
        <div id="participant-${participantInfo._id}-username" class="bg-base-300    " style=" text-align: center;">
            ${participantInfo.name}
        </div>
    </div>`
    $("#remoteParticipantContainer").append(participant)
});

meeting.on("participantLeft", function (participantInfo) {
    console.log("participant has left the room", participantInfo);
    $(`#participant-${participantInfo._id}`).remove();
});

meeting.on("onlineParticipants", function (onlineParticipants) {

    $("#remoteParticipantContainer").html("");
    for (let participantInfo of onlineParticipants) {
        if (participantInfo._id !== meeting.participantSessionId) {
            var participant =
                `<div id="participant-${participantInfo._id}" class="bg-base-300">
                <video id="participant-${participantInfo._id}-video" muted autoplay playsinline
                    style="padding: 0; margin: 0; width: 150px; height: 100px;"></video>
                <audio id="participant-${participantInfo._id}-audio" autoplay playsinline
                    style="padding: 0; margin: 0;"></audio>
                <div id="participant-${participantInfo._id}-username" class="bg-base-300    " style=" text-align: center;">
                    ${participantInfo.name}
                </div>
            </div>`
            $("#remoteParticipantContainer").append(participant)
        }
    }
});

var currentActiveSpeaker = "";
meeting.on("activeSpeaker", function (activeSpeaker) {

    if (currentActiveSpeaker === activeSpeaker.participantSessionId) return;

    $("#activeSpeakerUsername").text(activeSpeaker.name);
    currentActiveSpeaker = activeSpeaker.participantSessionId;
    if ($(`#participant-${activeSpeaker.participantSessionId}-video`)[0]) {
        let stream = $(`#participant-${activeSpeaker.participantSessionId}-video`)[0].srcObject;
        $("#activeSpeakerVideo")[0].srcObject = stream.clone();

    }

    if (activeSpeaker.participantSessionId === meeting.participantSessionId) {
        let stream = $(`#meetingAreaLocalVideo`)[0].srcObject;
        if (stream) {
            $("#activeSpeakerVideo")[0].srcObject = stream.clone();
        }

    }
});


$("#meetingViewLeave").on("click", async function () {
    await meeting.leaveMeeting();
    $("#meetingView").addClass("hidden");
    $("#leaveView").removeClass("hidden");
});

HTML code:

index.html


<!DOCTYPE html>
<html lang="en" class="bg-white">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Demo App</title>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Import the webpage's stylesheet -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/daisyui@1.11.1/dist/full.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.metered.ca/sdk/video/1.1.6/sdk.min.js"></script>

</head>

<body>


<div class="navbar mb-2 shadow-lg bg-neutral text-neutral-content">
  <div class="flex-none px-2 mx-2">
    <span class="text-lg font-bold">
        Metered
    </span>
  </div> 
  <div class="flex-1 px-2 mx-2">
    <div class="items-stretch hidden lg:flex">
      <a href="https://metered.ca/docs/Video-Calls/JavaScript/Advanced-SDK-Guide" target="_blank" class="btn btn-ghost btn-sm rounded-btn">
              Advanced SDK Guide
            </a> 
      <a href="https://metered.ca/docs/Video-Calls/JavaScript/Tips-and-Best-Practices" target="_blank" class="btn btn-ghost btn-sm rounded-btn">
        Tips and Best practices
            </a> 
      <a href="https://metered.ca/docs/SDK-Reference/JavaScript/Methods/Methods%20Introduction" target="_blank" class="btn btn-ghost btn-sm rounded-btn">
              SDK Reference
            </a>
    </div>
  </div> 
</div>



    <div id="meetingIdContainer" class="w-full bg-base-300 hidden font-bold text-center py-2">
        Meeting ID: <span id="displayMeetingId"></span>
    </div>
    <!-- Join view -->
    <div id="joinView" class="w-full items-center justify-center flex">
        <div class="bg-base-300 w-11/12 max-w-screen-md  rounded mt-48 p-10">
            <div class="form-control">
                <label class="label">
                    <span class="label-text">Meeting ID</span>
                </label>
                <div class="relative">
                    <input id="meetingId" type="text" placeholder="Meeting ID"
                        class="w-full pr-16 input input-primary input-bordered" />
                    <button id="joinExistingMeeting" class="absolute top-0 right-0 rounded-l-none btn btn-primary text-xs">
                        <span class="hidden sm:block">Join Existing Meeting</span>
                        <span class="sm:hidden">Join</span>
                    </button>
                </div>
            </div>
            <div class="divider">OR</div>
            <div class="flex justify-center">
                <button id="createANewMeeting" class="btn btn-primary">Create a new meeting</button>
            </div>
        </div>
    </div>

    <!-- Waiting area -->
    <div id="waitingArea" class="w-full items-center justify-center flex hidden">
        <div class="bg-base-300 w-11/12 rounded mt-48 p-10">
            <video id="waitingAreaVideoTag" class="w-full" muted autoplay playsinline></video>


            <div class="flex items-center justify-center mt-4 space-x-4">
                <button id="waitingAreaMicrophoneButton" class="btn">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z"
                            clip-rule="evenodd"></path>
                    </svg>
                </button>
                <button id="waitingAreaCameraButton" class="btn">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z">
                        </path>
                    </svg>
                </button>
            </div>

            <div class="divider"></div>
            <div class="grid grid-cols-3 space-x-4">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Camera</span>
                    </label>
                    <select id="cameras" class="select select-bordered w-full"> </select>
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Microphone</span>
                    </label>
                    <select id="microphones" class="select select-bordered w-full"> </select>
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Speaker</span>
                    </label>
                    <select id="speakers" class="select select-bordered w-full"> </select>
                </div>
            </div>

            <div class="form-control">
                <label class="label">
                    <span class="label-text">Enter a username</span>
                </label>
                <div class="relative">
                    <input id="username" type="text" placeholder="username" class="w-full pr-16 input input-primary input-bordered" />
                    <button id="joinMeetingButton" class="absolute top-0 right-0 rounded-l-none btn btn-primary">
                        <span class="hidden sm:block">Join Existing Meeting</span>
                        <span class="sm:hidden">Join</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

        <!-- Meeting view -->
        <div id="meetingView" class="hidden ">
            <!-- remote video containers -->
            <div id="remoteParticipantContainer" style="display: flex;">

            </div>

            <!-- Active Speaker -->
            <div class="mt-4">
                <div style=" border-radius: 5px;" class="bg-base-300">
                    <video id="activeSpeakerVideo" muted autoplay playsinline
                        style="padding: 0; margin: 0; width: 100%; height: 400px;"></video>
                    <div id="activeSpeakerUsername" class="bg-base-300  " style=" text-align: center;">

                    </div>
                </div>
            </div>

            <div class="flex flex-col bg-base-300" style="width: 150px">
                <video id="meetingAreaLocalVideo" muted autoplay playsinline
                    style="padding: 0; margin: 0; width: 150px; height: 100px;"></video>
                <div id="meetingAreaUsername" class="bg-base-300    " style=" text-align: center;">

                </div>
            </div>
            <!-- Controls -->
            <div style="display: flex; justify-content: center; margin-top: 20px;" class="space-x-4">
                <button id="meetingViewMicrophone" class="btn">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z">
                        </path>
                    </svg>
                </button>

                <button id="meetingViewCamera" class="btn">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
                        </path>
                    </svg>
                </button>

                <button id="meetingViewScreen" class="btn">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                        </path>
                    </svg>
                </button>

                <button id="meetingViewLeave" class="btn">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path></svg>
                </button>
            </div>
        </div>

        <div id="leaveView" class="flex items-center justify-center hidden">
            <div class="bg-base-300 w-11/12 rounded-lg mt-20 p-4">
                <h1 class="text-2xl font-bold">You have Left the Meeting</h1>
                <div class="divider"></div>
                <p>
                    <button class="btn btn-primary" onclick="window.location.reload()">Join Another Meeting</button>
                </p>
            </div>
        </div>
    <!-- Import the webpage's javascript file -->
    <script src="/script.js" defer></script>
</body>

</html>

Running the Application

To run the application, will run the command:

node src/server.js

This will start the application on localhost:4000

Testing on multiple devices

To test the application on multiple devices you can use ngrok, you can download and install it from here: https://ngrok.com/download

After installing run the application then run the command:

ngrok http 4000

ngrok will give you a URL that you can open on multiple devices to test out video conferencing.

Github

You can download the complete application from Github: https://github.com/metered-ca/video-javascript-quickstart