stream-site

A Streaming Service made using Vue.JS, vuetify, nginx, socket.io

---

---

Table Of Contents

• Run Locally
• Develop Locally
• Development Process

Run Locally

Intall Docker

https://www.docker.com/

Clone the project

  git clone https://github.com/ish-u/stream-site.git
  cd stream-site

Add the .env file in server folder as -

DB_CONNECTION="mongodb://admin:password@mongodb:27017"
ACCESS_TOKEN_SECRET="*YOUR SECRET*"

Build Images and Run to start the Express Server, RTMP Server, MongoDB and MongoExpress

docker-compose build
docker-compose up

The Services will be live at the following Links

• MongoDB : http://localhost:27017/
• MongoExpress: http://localhost:8080
• RTMP Server : rtmp://localhost:1935/live - (live is the name of the application)
• HLS Feed: http://localhost:8000
• Express Server - http://localhost:5000
• Socket.IO Server - http://localhost:3000

Start the Client and Start Streaming

• Install Dependencies and start the client

  cd client
  npm i
  npm run serve
  

• Sign Up - http://localhost:9000/signup

  

• Sign In - http://localhost:9000/signin

  

• Goto http://localhost:9000/me to obtain the Stream Key after signin in

  

• Open OBS and set the Stream Key as follows

  • Service - Custom
  • Server - rtmp://localhost:1935/live
  • Stream Key - username?key=StreamKey

  

• Start Streaming In OBS and you will be live at http://localhost:9000/username

  

---

Develop Locally

TODO

---

Development Process

I documented how I got around making this project - original google doc - 'stream-site'

STREAM SITE

Goal - To Create a Streaming Service

What needs to be done ?

1. Create a RTMP Server that will take the Stream/s from different Users by OBS and provide different formats to consume the stream

   1. For the RTMP Server that takes in the Stream Data (RTMP Ingest - this is what I found people calling it online) we will use nginx with a RTMP Server Module that is available for it .I guess there are other services available there but this package has various tutorial/guides made for it that we can use for as a starting point.
   2. Some References and Tutorial to create a nginx RTMP server for RTMP ingest and HLS,DASH or RTMP stream to consume -
      1. livestreamninja - Streaming Architecture and Protocols Explanation
      2. nginx rtmp server guide
      3. Peer5 - guide to setup hls server
      4. Create a Dockerized RTMP Server with Authentication
   3. Created live streaming server from this tutorial
   4. We need to figure out how to authenticate using the stream key. Currently we need to specify the stream key as test?key=secret.
      1. The solution according to me is to create a separate express server that will query the data to verify the stream key. The rtmp module of the nginx server has directives that can be used to send a POST request to this server that will send a 2xx response for success or 3xx for failure. According to the response sent the user will be allowed to ingest the stream to the server from OBS.
   5. We also need to do Load Balancing to better distribute the stream - I don’t quite know how to do this but it needs to be done for scalability purpose (also i don;t know about scalability and all) - ref
   6. We also need to set up a reverse proxy to protect our actual server address - maybe we also need to purchase a domain for the server
   7. We will use linode to host our server

2. Create a Database to store the user details and credentials to access the streaming service

   1. We will use mongodb as our database
   2. The Database will store the following user details
      1. Name
      2. Userame
      3. Password
      4. Email
      5. Profile Pic - not sure how to store this but amazon s3 can be used according to the internet
      6. Streamkey
      7. Followers and Following

Maybe more things will be needed

1. Create the Front End of Service that the user will interact with
   1. We will use vue.js with vuetify
   2. We will need following views and functionality in our application
      1. Sign In / Sign Up
      2. Home
         1. Discover Top Streamers
      3. Profile Page
         1. General Information that can be edited
         2. StreamKey to authenticate in OBS to stream
      4. 404
      5. Stream Page
         1. Needs a player to consume the HLS/DASH stream from our server
         2. Details about the Streamer like username, profile pic and current view count
         3. Chat - maybe - we can use websockets to implement it using socket.io I think
   3. I have never created a Design before developing for a project. I guess I can try figma to create a design or maybe just go straight to development.

20 Dec 2021

• RTMP Server Basic Setup Done

24 Dec 2021

• Express Server Setup Done
• Added routes for Registration, Login, Token Verification and Getting User/s Details

Dec 24, 2021

• Made Figma Design for Mobile version - design
• Front End with VueJS + Vuetify Setup Done
• Tried implementing followers/following feature

25 Dec 2021

• Done with the Figma Design (more of a concept) for the website - design
• Follower/Following Implementation in Server

26 Dec 2021- 28 Dec 2021

• Created Sign Up/In Home
• Created Home View (half)
• Created Profile View

29 Dec 2021 - 31 Dec 2021

• Implemented VIdeo.JS Player for the Stream View
• Fixed Vue Store Issue - the user data is fetched from the api first before displaying the router-view / main app
• Implemented Follower/Following Functionality
• Some improvements in the Profile Page
• Some general overall improvements

6 Jan 2022

• Implemented SocketIO Server for Chat Functionality
• Created SocketIO Events and binded them with the Client

11 Jan 2022

• Remade the Stream View
• Implemented Chat Functionality
• Some Fixes in Client

15 Jan 2022- 19 Jan 2022

• Created the Chat Functionality
• Created Live View Count and Online Status Functionality
• Moved the User Data Sync b/w Client and Server from Polling to WebSockets

22 Jan 2022- 24 Jan 2022

• Made Slider for User Discovery for Home View
• Added default video sources for some users and added robohash profile images for them
• Some Design/Bug Fixes