Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ghnmqdtg/webrtc-live-streaming

Live streaming website with real-time chatting function
https://github.com/ghnmqdtg/webrtc-live-streaming

docker material-kit openssl peerjs realtime-messaging socket-io webrtc

Last synced: about 2 months ago
JSON representation

Live streaming website with real-time chatting function

Awesome Lists containing this project

README 

        
# WebRTC Live Streaming Meeting Room

## Introduction

Live streaming website with real-time chatting function.



You can give it a try with this [link](https://capstoneisfun.tk/)!



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



![](https://i.imgur.com/VxGOb7p.jpg)



![](https://i.imgur.com/R8G7Xek.png)



## 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](https://hackmd.io/@tweizh0331/H1OEpCBDP).



```

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.



        ```Javascript

        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.



```bash

# 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.

    ```bash

    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

    ```bash

    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

    ```bash

    # -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

        ```bash

        # 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

        ```bash

        # 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](https://www.youtube.com/watch?v=jD7FnbI76Hg)

2. [How To Create A Video Chat App With WebRTC](https://www.youtube.com/watch?v=DvlyzDZDEq4)

3. [Material Kit](https://demos.creative-tim.com/material-kit/index.html)