/Next-stream-app

📺 Video streaming platform built in React using OBS software

Primary LanguageJavaScript

NPM NodeJS React React Router Redux Semantic UI React CSS3 HTML5 JavaScript

📺 NEXT LOGIC Stream App - Video Games Streaming Platform

stream-app-2

App Features:

  • ✅ Log-in with Google authentication
  • 🖌 Each user has admin rights to his own streams and videos like creating, editing and deleting streams
  • 🚀 Run streams using OBS (Open Broadcaster Software)
  • 📱💻🖥 Fully responsive Web App

stream-app-3

ezgif com-gif-maker ezgif com-gif-maker (1)

App Components:

1. Web API Server

json-server

2. RTMP Server

node-media-server

3. React App

  • react-js
  • Google API - Authentication
  • redux, react-router-dom, react-form, react-final-form
  • axios, lodash, redux-thunk
  • flv.js
  • Semantic UI, CSS

Built with:

  • React
  • Redux
  • React Forms
  • React Redux Router
  • Flv.js
  • OBS

Next Stream Installation

  1. Run the following command in your command line:
git clone https://github.com/Helga-sov/Next-stream-app.git
  1. Install packages for each of the folders (api, client and rtmpserver)
npm install
  1. Run this command in all the folders in the following order: api, rtmpserver and client
npm start

Setting up OBS on the computer

This will allow you to stream your desktop and some audio from your PC to the local RTMP server and then view that inside of the browser.

  1. Download and install OBS

  2. Start OBS up

  • create a new scene
  • add a video source by selecting a display capture
  • select audio input capture as an audio source
  • inside of settings select stream -> stream type: custom streaming server
  • set up streaming URL - rtmp://localhost/live
  • set up stream key (the id of the stream) - 1
  • hit ok
  • click start streaming

The live stream is going to appear on the website if you click the first stream