- This is a simple React Redux application to practice CRUD operations in React and using Redux as the state management library.
- The Modern React with Redux course by Stephen Grider was followed to develop this application.
- You can make live streams in this application by using OBS Studio software.
- The installation steps are mentioned below.
Screenshots of the application
Here're some of the project's best features:
- Login using Google Identity API
- Handling CRUD Operations
- Create a stream
- Show a stream
- Edit stream's details
- Delete a stream
- Watching live streams which are streaming from the OBS Studio software
- Run the following command inside the /client, /api, and /rtmp-server directories
npm install
- Then run the following command inside all the given 3 directories to start the API server, client, and rtmp-server.
npm start
-
Install the OBS Studio software https://obsproject.com/download
-
Go to the localhost:3000 URL where the React app is running and login to the application by using a google account. Then create a stream by entering relavent details.
-
After creating a stream, the page will be redirected to the streaming list. In there, click on the stream that you just created.
-
Then you will be redirected to a URL like this,
http://localhost:3000/streams/2
where2
is the stream ID that you just created. -
In OBS, go to Settings -> Stream,
Stream Type: Custom Streaming Server
URL: rtmp://localhost/live
Streaming key: Stream ID
The stream ID would be the ID of the stream that you just created. In my case, it's 2
.
8.After changing the settings, Click on Start Streaming
in OBS and you will see the live stream of yours in the web application as well.
Technologies used in the project:
- React JS
- React Router
- Redux
- Semantic UI
- React OAuth2 | Google
- Redux form
- RTMP Node Media server
- flv.js