Giter Club home page Giter Club logo

red5pro-webrtc-sdk's Introduction

Red5 Pro Logo

publishersubscribershared object


Red5 Pro WebRTC SDK

The Red5 Pro WebRTC SDK allows you to integrate live streaming video into your desktop and mobile browser.

Quickstart

Important Node About 11.0.0 Release

Red5 Pro SDK now supports WHIP/WHEP

Read more from out documentation on WHIP/WHEP integration!

Important Note About 8.0.0 Release

Red5 Pro SDK has been published on NPM!

While currently not open source, the SDK build has been published to NPM to allow you to integrate into your projects with greater ease and dependency management.

Installation

As script in HTML page

<script src="https://unpkg.com/red5pro-webrtc-sdk@latest/red5pro-sdk.min.js"></script>

... or if you know the version:

<script src="https://unpkg.com/[email protected]/red5pro-sdk.min.js"></script>

Using npm or yarn for you browser-based projects

npm install --save-dev red5pro-webrtc-sdk
yarn install --dev red5pro-webrtc-sdk

Usage

All members exposed on the otherwise global window.red5prosdk if loading as a script on an HTML page are importable from the red5pro-webrtc-sdk module:

index.js

import { WHIPClient, WHEPClient } from 'red5pro-webrtc-sdk'

To begin working with the Red5 Pro HTML5 SDK in your project:

Quick Start (browser)

<!doctype html>
<html>
  <head>
    <!-- *Recommended WebRTC Shim -->
    <script src="https://webrtchacks.github.io/adapter/adapter-latest.js"></script>
  </head>
  <body>
    <!-- video containers -->
    <!-- publisher -->
    <div>
      <video id="red5pro-publisher" width="640" height="480" muted autoplay></video>
    </div>
    <!-- subscriber -->
    <div>
      <video id="red5pro-subscriber" width="640" height="480" controls autoplay></video>
    </div>
    <!-- Red5 Pro SDK -->
    <script src="https://unpkg.com/red5pro-webrtc-sdk@latest/red5pro-sdk.min.js"></script>
    <!-- Create Pub/Sub -->
    <script>
      (function(red5prosdk) {
        'use strict';

        var rtcPublisher = new red5prosdk.WHIPClient();
        var rtcSubscriber = new red5prosdk.WHEPClient();
        var config = {
          protocol: 'ws',
          host: 'localhost',
          port: 5080,
          app: 'live',
          streamName: 'mystream',
          rtcConfiguration: {
            iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
            iceCandidatePoolSize: 2,
            bundlePolicy: 'max-bundle'
          } // See https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection#RTCConfiguration_dictionary
        };

        function subscribe () {
          rtcSubscriber.init(config)
            .then(function () {
              return rtcSubscriber.subscribe();
            })
            .then(function () {
              console.log('Playing!');
            })
            .catch(function (err) {
              console.log('Could not play: ' + err);
            });
        }

        rtcPublisher.init(config)
          .then(function () {
            // On broadcast started, subscribe.
            rtcPublisher.on(red5prosdk.PublisherEventTypes.PUBLISH_START, subscribe);
            return rtcPublisher.publish();
          })
          .then(function () {
            console.log('Publishing!');
          })
          .catch(function (err) {
            console.error('Could not publish: ' + err);
          });

      }(window.red5prosdk));
    </script>
  </body>
</html>

Requirements

The Red5 Pro WebRTC SDK is intended to communicate with a Red5 Pro Server, which allows for broadcasting and consuming live streams utilizing WebRTC and other protocols, including RTMP and HLS.

As such, you will need a distribution of the Red5 Pro Server running locally or accessible from the web, such as Amazon Web Services.

Click here to start using the Red5 Pro Server today!

Usage

This section describes using the Red5 Pro WebRTC SDK browser install to create sessions for a Publisher and a Subscriber.

WHIP/WHEP

Please refer to the WHIP/WHEP Readme for information about utilizing WHIP/WHEP clients for publishing and subscribing, respectively.

Publisher

Please refer to the Publisher Readme for information about setting up a broadcast session.

Subscriber

Please refer to the Subscriber Readme for information about setting up a subscriber session.

Shared Object

Please refer to the SharedObject Documentation for information about using SharedObjects in both Publishers and Subscribers.

Contributing

Please refer to the Contributing Documentation to learn more about contributing to the development of the Red5 Pro WebRTC SDK.

red5pro-webrtc-sdk's People

Contributors

bustardcelly avatar pacepace avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

red5pro-webrtc-sdk's Issues

Uncaught typeError: Cannot read properties of undefined (reading 'reject')

Screenshot 2021-11-03 at 09 45 49

q("[onpeerconnectionfail]"), this.trigger(new D.PublisherEvent(D.PublisherEventTypes.PUBLISH_FAIL, this)), this._subscriptionResolver.reject("Peer Connection Failed.");

this._subscriptionResolver can be undefined in scenarios where the offer is send but never receive an answer (this can be reproduced using a firewall to block outgoings)

Inconsisteny in README

Renamed red5pro-html-sdk to red5pro-webrtc-sdk going from 7.2.2 to 8.0.0 but README still references red5pro-html-sdk.

Uncaught TypeError: e[n] is not a function

Screenshot 2021-11-03 at 09 49 33

return (0, s.default)(e, [{
  key: "_notify",
  value: function value(e, t) {
    var n = void 0,
        r = e.length;

    for (n = 0; n < r; n++) {
      e[n](t);
    }
  }
}...

e[n] can be undefined sometimes

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.