npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

red5pro-webrtc-sdk

v13.0.0

Published

Red5 Pro HTML SDK

Downloads

2,562

Readme


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 - Standalone Server Deployment

<!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>
      ((red5prosdk) => {
        'use strict'

        const rtcPublisher = new red5prosdk.WHIPClient()
        const rtcSubscriber = new red5prosdk.WHEPClient()
        const 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
        };

        const subscribe = async () => {
          try {
            await rtcSubscriber.init(config)
            await rtcSubscriber.subscribe()
          } catch (err) {
              console.error('Could not play: ' + err)
          }
        }

        const publish = async () => {
          try {
            // Once publishing, call subscribe!
            rtcPublisher.on(red5prosdk.PublisherEventTypes.PUBLISH_START, subscribe)
            await rtcPublisher.init(config)
            await rtcPublisher.publish()
          } catch(err) {
            console.error('Could not publish: ' + err)
          }
        }

        // Start Publisher first ->
        publish()

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

Quick Start - StreamManager 2.0 Deployment

With the Stream Manager 2.0 Release, the endpoint init configuration property was introduced in the SDK to allow developers to specify the specific endpoint to proxy through on the Stream Manager.

Note: You will need to know which Node Group you intend to target for publishing and subscribing.

<!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>
      <script>
      ((red5prosdk) => {
        'use strict'

        const host = 'my-server-deployment'
        const nodeGroup = 'my-node-group'
        const streamName = 'my-stream-name'

        const rtcPublisher = new red5prosdk.WHIPClient()
        const rtcSubscriber = new red5prosdk.WHEPClient()
        const config = {
          streamName,
          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
        };

        const subscribe = async () => {
          try {
            await rtcSubscriber.init({
              ...config,
              endpoint: `https://${host}/as/v1/proxy/whep/live/${streamName}`,
              connectionParams: {
                nodeGroup
              }
            })
            await rtcSubscriber.subscribe()
          } catch (err) {
              console.error('Could not play: ' + err)
          }
        }

        const publish = async () => {
          try {
            // Once publishing, call subscribe!
            rtcPublisher.on(red5prosdk.PublisherEventTypes.PUBLISH_START, subscribe)
            await rtcPublisher.init({
              ...config,
              endpoint: `https://${host}/as/v1/proxy/whip/live/${streamName}`,
              connectionParams: {
                nodeGroup
              }
            })
            await rtcPublisher.publish()
          } catch(err) {
            console.error('Could not publish: ' + err)
          }

          // Start Publisher first ->
          publish()

      }(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.

Contributing

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