Twitcher

React App with Redux/Redux-Thunk, Google OAuth, OBS Streaming

• If you are new or kind of new to React I highly recommend it, at least read the description to see what's in it, I did learn some stuff

The App consists of :

streams\api - It contains JsonPlaceHolder Api REST server which is used as a database to implement CRUD functionality.

streams\client - It contains the React/Redux side of components of the app (Note: Google Authorization gives access to Create, Edit and Delete , without logging in a person can view a stream from the stream list)

streams\rtmpserver - It the stream from OBS Studio

Dependencies apart from Node Modules

OBS Studio - open source for video streaming and recording

Google APIs - only for signin with 'gapi.auth2'

To enable the client with Google login

Create a new project at console.developers.google.com or use an existing one if you have Set your client id at property "clientId" (found at the beginning of the GoogleAuth component ~row 37)

I use Yarn package manager but npm would work also.

Run 'yarn install' to fetch node modules Then 'yarn start' to run the project

Use Chrome and the add on "redux dev tools" to debug the redux state

To enable the api (saving and fetching data)

Start the api server (json-server) in a console : streams\api> yarn start (there are some streams in the "database" already, you can remove them by editing the file api\db.json )

To enable streaming

Start the rtmp server (node-media-server) in a console : streams\rtmpserver> yarn start

If not installed, Install OBS Studio - https://obsproject.com/ Create a streaming scene

• then a Source for display
• and audio if you want

Change settings for stream - File/Settings/Stream

• URL = rtmp://localhost/live
• Stream key = 1 -- note, the stream key must match the id of the stream in the client, example: http://localhost:3000/streams/id would match with stream key id which can be looked upon from the url

Start streaming (note, you must have started the media server)

ScreenShots :

• HomePage - http://localhost:3000/
• Create New Stream - http://localhost:3000/streams/new
• Delete a Stream - http://localhost:3000/streams/delete/:id
• Edit a Stream Details - http://localhost:3000/streams/edit/:id
• Read/Running Streams - http://localhost:3000/streams/show/:id