WebRTC Live Streaming Meeting Room

Introduction

Live streaming website with real-time chatting function.

You can give it a try with this link!

The SSL certificate is free, so it has only three months of life.

How it works ?

In the home page, users can choose a chatting room they want to join.

For example, user A sets the name like Tony, and room name as ABC. If room ABC doesn't exist, the server will create it automatically. Here comes user B named Tina, she sets the room name as ABC, which is created by Tony previously, then Tina will join and see Tony in the room.

By using socket.io and peerjs, they can chat through real-time messages or streaming video.

Environment

Windows 10 64-bit 20H2, nodejs v12.18.4 Ubuntu 18.04, nodejs v12.19.1 Ubuntu 18.04, Docker 19.03.6

Structure

Directories

I used tree /f command to print out directory paths and files and made it more concise. I filtered material kit out of the tree structure below because that's not the point for this repo. The basic structure is setup by running express --view=ejs --css=sass , if you're interested in it, the instruction is here.

WebRTC-Live-Streaming:.
│  .gitignore
│  app.js
│  package-lock.json  
│  package.json       
│  Procfile
│  README.md
│
├─bin
│      www
│
├─public
│  ├─demo
│  ├─images
│  ├─javascripts
│  │   main.js
│  │
│  └─stylesheets
│      style.css
|      style_chat.css
|
├─routes
│      index.js
│      users.js
│
├─utils
│      messages.js
│      users.js
│
└─views
        chat.ejs
        index.ejs

Files

1. Back-end

   • ./bin/www:

     The entry of the application generated by the Express Application Generator. The first thing it does is to require('../app') which is app.js in the root, the “real” entry point. Besides, it runs all the backend server funcions, including socket.io realtime chat messages and basic Express function.

   • app.js:

     Generated by the Express Application Generator.

     I didn't modify it.

   • utils\messages.js:

     Format the chat message with user name, text and time. Called by ./bin/www.

   • utils\users.js:

     Handles members info in the room, such as user who joining and leaving the room, current user and room members. Called by ./bin/www.

   • routes\index.js:

     The route file that loads the express module and the uses it to get an express.Router object. Then it specifies a route on that object and lastly exports the router from the module. I add some code to render the chatting room(the chat.ejs) and route the user to it.

     router.get('/chat', function(req, res, next) {
       res.render('chat', {
         title: 'WebRTC-Live-Steaming',
         AddressBar: AddressBar,
         navbar: navbar,
         url: url,
       });
     });

2. Front-end

   • views\index.ejs:

     The entry page. Users can choose a chatting room they want to join in the index page.

   • views\chat.ejs

     Calls the socket.io.js, peerjs and main.js, users can chat and also see each other in the chat page.

   • public\stylesheets\style_chat.css and style.css:

     The temporary css file which renders the page. I will render the page with material kit in the next version.

   • public\javascripts\main.js:

     The most important part of the frontend page, it deals chatting messages, media settings, and peer to peer communication.

Dependencies

1. Clone the repository and open it.

2. Install all the packages that you need.

   $ npm install
   

3. Install nodemon.

   $ npm install --save-dev nodemon
   

SSL Certificate

If you want to use this application via IP address or domain name instead of localhost, this step is necessary. Since most of browsers block media(such as webcam) accessing from unsecure connections, we have to deploy this application with HTTPS. Here are commands using openssl to generate a key and certificate.

# generate a key
$ openssl genrsa -out server-key.pem

# this step will probably ask you to input the information of the signature,
# such as country, company name, etc
$ openssl req -new -key server-key.pem -out csr.pem

# generate a certificate
$ openssl x509 -req -days 9999 -in csr.pem -signkey server-key.pem -out server-cert.pem

# optional: we dont need this, but I think it's okay 
$ rm csr.pem

Usage

1. Run the server

   $ npm run serverstart
   

2. Access the website

   https://Your_IP_Address
   

Docker

1. Install docker if you don't have it.

   sudo apt update
   sudo apt install docker.io
   
   # Start docker service
   systemctl enable docker
   systemctl start docker
   
   # Verify: you should see no error messages
   systemctl status docker
   sudo docker run hello-word

2. Build docker image

   sudo docker build -t webrtc:latest . --no-cache --rm
   
   # Verify: you should see a image named "webrtc"
   sudo docker images

3. Run the image as a container

   # -it: Create an interactive bash
   # -p: Publish a container’s port(s) to the host
   # -d: Run container in background
   sudo docker run -it -p 443:443 -p 3001:3001 -p 80:80 -d --restart=always --name=webrtc_app webrtc:latest
   
   # Verify: you should see container statu "Up seconds"
   sudo docker ps

4. Play around
   • Container

     # Show all the containers
     sudo docker ps
     
     # Action to the container
     sudo docker stop/start/restart webrtc_app
     
     # Remove the container
     sudo docker rm webrtc_app
     
     # Display stdout of the container
     sudo docker logs webrtc_app
     
     # Login to bash of the container
     sudo docker exec -it webrtc_app /bin/bash

   • Image

     # Show all the images
     sudo docker images
     
     # Delete the image
     sudo docker rmi webrtc
     
     # Clean unused images
     sudo docker images prune

References

1. Realtime Chat With Users & Rooms - Socket.io, Node & Express
2. How To Create A Video Chat App With WebRTC
3. Material Kit