@jdiazon24/webrtc-player v1.0.6
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