streaming-app-reactjs
This project is a simple react app for streaming using some software like OBS. It uses React and Semantic UI for front-end and Node.js (json-server and node-media-server) for backend. Check the links to learn more about them.
This project uses the following packages:
- axios
- flv.js
- lodash
- react, react-dom, react-redux, react-router-dom, react-scripts
- redux, redux-thunk
- json-server
- node-media-server
The project is contained in the streams folder and is divided into 3 parts:
- client - The React app to handle all the frontend.
- server - JSON Server to store the streams database.
- rtmpserver - To implement node-media-server to allow users to stream video to the website through some software like OBS.
Instructions for use:
- Clone the repository and install all the dependencies for all three folders.
- Run all three applications individually with npm start.
- In the React app in https://localhost:3000, create a new stream or view an existing stream(if any).
- Check the id number of that particular stream in the url.
- Open OBS and initialize the scene. Then go to Settings -> Stream.
- Set Service to custom and Server to rtmp://localhost/live. Set Stream Key to the id of the stream.
- Start streaming.
This project was done as a part Modern React with Redux course on Udemy.