Skip to content

๐Ÿ“บ Video streaming platform built in React using OBS software

Notifications You must be signed in to change notification settings

Helga-sov/Next-stream-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

21 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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