Skip to content
This repository has been archived by the owner on Oct 19, 2024. It is now read-only.

Live streaming website with real-time chatting function

Notifications You must be signed in to change notification settings

ghnmqdtg/WebRTC-Live-Streaming

Repository files navigation

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