Video Stream {React Redux App}

App is similar to Twitch

REPOS:

Client of Video Stream

JSON server for stream-client

Node Media Server package & RTMP Server

DEMOS:

Client of Video Stream

JSON server for stream-client

Node Media Server package & RTMP Server

App Structure:

[ Streamer's comp (Open Broadcaster Software - OBS) ]

⇩   (Video stream + stream key)   ⇩

[ Real time messaging protocol (RTMP) server ]

⇩   (Video feed)   ⇩

[ Viewer's browser #1 ]

[ Viewer's browser #2 ]

[ Viewer's browser #3 ]

[ Streamer's comp (Open Broadcaster Software - OBS) ]

⇩   (Video feed)   ⇩

[ Real time messaging protocol (RTMP) server ]

⇩   (Request of [ Viewer's browser #1 ] to get Video feed)   ⇩

[ Web server that knows which streams are currently broadcasting ]

⇩   (Response with Video feed URL)   ⇩

[ Viewer's browser #1 ]

GAPI Auth 2 with Redux v.1

[ Redux Store (Auth State) ]

⇩   ( isSignedIn: true/false )   ⇩

[ GoogleAuth Component ( onSignInClick() / onSignOutClick() )]

⇩     ⇩

[ GAPI Auth2 ]

⇩     ⇩

[ GoogleAuth Component ( onAuthChange() )]

⇩     ⇩

[ Action Creators ( signIn() / signOut() )]

⇩     ⇩

[ Redux Store (Auth State) ]

GAPI Auth 2 with Redux v.2 (follow Redux convention)

[ Redux Store (Auth State) ]

⇩   ( isSignedIn: true/false )   ⇩

[ GoogleAuth Component ( onSignInClick() / onSignOutClick() )]

⇩     ⇩

[ Action Creators ( trySignIn() / trySignOut() )]

⇩     ⇩

[ GAPI Auth2 ]

⇩     ⇩

[ Action Creators ( changeAuth() )]

⇩     ⇩

[ Redux Store (Auth State) ]

EDIT & DELETE buttons selection concepts:

[ Selection Reducer ]

( when a user clicks on a stream to edit it, use a selectionReducer to record what stream is being edited )

[ URL-based selection]

( put the ID of the stream being edited in the URL )

( when we use React Router DOM with a specific URL paths with variable /:id pass as a prop )

( Router renders Edit & Delete components with new props: match.params.id )

( we can use some params: edit/:id/:userId/:token )

Node Media Server

we will install the Node Media Server package and create our RTMP server

github.com Node-Media-Server

npmjs.com Node-Media-Server

npm version (recommended)

mkdir nms cd nms npm install node-media-server vi app.js

const NodeMediaServer = require('node-media-server');