Git Product home page Git Product logo

streams's Introduction

Streams App

An exercise followed from Stephen Grider's React course. It resembles a live streaming service.

ps. Install redux-form by using npm install redux-form --legacy-peer-deps command if you have Node v15+ or npm v7+ releases installed. Otherwise, the usual command npm install --save redux-form will cause a "code ERESOLVE" error that says "unable to resolve dependency tree".

API Server Installation

This repository is only the client application. There is also a basic API to install. Follow these steps:

  1. Put this repository to a /client directory.
  2. Make an /api folder next to the /client directory.
  3. Inside the /api folder, run the npm init command.
  4. Inside the /api folder, run the npm install --save json-server command.
  5. Inside the /api folder, create a db.json file and write { "streams": [] } inside it.
  6. Open the package.json file, change the "test" line completely with "start": "json-server -p 3001 -w db.json"
  7. Run npm start just before you start the client application.

RTMP Server Installation

One final thing to install alongside the client app is the RTMP server. Follow these steps:

  1. Make an /rtmp folder next to the /client directory.
  2. Inside the /rtmp folder, run the npm init command.
  3. Inside the /rtmp folder, run the npm install --save node-media-server command.
  4. Inside the /rtmp folder, create a index.js file and paste the following:
const NodeMediaServer = require('node-media-server');

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 30,
    ping_timeout: 60
  },
  http: {
    port: 8000,
    allow_origin: '*'
  }
};

var nms = new NodeMediaServer(config)
nms.run();
  1. Open the package.json file, change the "test" line completely with "start": "node index.js"
  2. Run npm start just before you start the client application.

OBS Settings

In the OBS (Open Broadcaster Software) (https://obsproject.com) Settings>Stream, select Custom for the Service. Write rtmp://localhost/live for Server and the stream ID for the Stream Key. Press Start Streaming. Visit the stream with the given ID on the client app. The stream will show on the video player.

streams's People

Contributors

aademirci avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.