# 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.

```sh
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
```html
  <!-- 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:
```html
   <script src="webrtc_player.min.js"></script>
```

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

```js
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:
```js
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](https://millicast.github.io/millicast-sdk/View.html#connect)  or [Nanocosmos](https://docs.nanocosmos.de/docs/nanoplayer/nanoplayer_api#NanoPlayer..errorcode) player