WebRTC Player

• React based library for the WebRTC player
• Implements Nanocosmos and Millicast Players

Tech

The WebRTC uses the following projects work properly:

• [React] - A JavaScript library for building user interfaces! https://reactjs.org/
• [Rollup] - module bundler for JavaScript https://rollupjs.org/guide/en/
• [Nanocosmos] - H5 Live player https://docs.nanocosmos.de/docs/nanoplayer/nanoplayer_api#onready
• [Millicast] - Millicast WebRTC player https://www.millicast.com/

Installation

Install the dependencies and devDependencies and run the start command to compile in watch mode or the build command.

cd webrtc-player
npm i
npm start //  This will run rollup in watch mode
npm run build // This will just build the files

This will compile the library, the files can be found in the dist folder

Integration instructions (WIP)

To use this library you need to make sure to first include it's dependencies

  <!-- React / React Dom > -->
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <!-- Nanocosmos player > -->
  <script src="https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js"></script>

And then include this library's js file:

   <script src="webrtc_player.min.js"></script>

Once the files are imported, a new instance can be created:

let player_class = new PlayerClass();

Setup the component

The method to setup the component is setup and it accepts one argument: options.

As for now, the following options are supported:

player_class.setup({
  el: document.getElementById("root"),
  failOverSequence: "MCPush,NCPush,NCPull",
  eventId: "7310933",
  keyVal: "F67D11A973B62A54C330D3F0EF773A02",
  config: {
    mcpush: {
      esConfigName: "MCpush",
      streamName: {
        streamA: {
          prefix: "",
          fhvideoConst: "_1_fhvideo1_",
          postFix: "_A",
        },
        streamB: {
          prefix: "",
          fhvideoConst: "_1_fhvideo1_",
          postFix: "_B",
        },
      },
      streamAccountId: "A4RR6T",
    },
    ncpull: {
      esConfigName: "NCpull",
      server: {
        websocket: "wss://h5live.nanocosmos.de:443/h5live/stream",
        hls: "https://h5live.nanocosmos.de:443/h5live/http/playlist",
      },
      rtmpURL: {
        urlA: "rtmp://qa-fmslivea.on24.com/livestreama",
        urlB: "rtmp://qa-fmsliveb.on24.com/livestreamb",
      },
      streamName: {
        streamA: {
          prefix: "",
          fhvideoConst: "_1_fhvideo1_",
          postFix: "_A",
        },
        streamB: {
          prefix: "",
          fhvideoConst: "_1_fhvideo1_",
          postFix: "_B",
        },
      },
    },
    ncpush: {
      esConfigName: "NCpush",
      server: {
        websocket: "wss://h5live.nanocosmos.de:443/h5live/stream",
        hls: "https://h5live.nanocosmos.de:443/h5live/http/playlist",
      },
      rtmpURL: {
        urlA: "rtmp://bintu-play.nanocosmos.de:1935/play",
        urlB: "rtmp://bintu-play.nanocosmos.de:1935/play",
      },
      streamName: {
        streamA: {
          prefix: "Ss5Wi-",
          fhvideoConst: "_1_fhvideo1_",
          postFix: "_A",
        },
        streamB: {
          prefix: "Ss5Wi-",
          fhvideoConst: "_1_fhvideo1_",
          postFix: "_B",
        },
      },
    },
  },
});

el: this is the DOM element you want the component to use. The element MUST exist before initing the component.

failOverSequence: String to specify the order of Playback / Fail Over logic

eventId: Id for the event

keyVal: Key for the event

config: Object that contains settings for each of the playback settings (mcpush, ncpull,ncpush) See: https://p-git01.on24.com/elitestudio/elite-studio/-/blob/dev/public/config/qa-env-properties.json

Events

The following events are available in the PlayerClass

player_error(error): this event is fired when an error occurs during playback, can be triggered by the Millicastplayer or Nanocosmos player