WebRTC Stream Manager

What is webrtc-stream-manager?

This package simplifies playing back videos via WebRTC from Nx Meta VMS mediaservers versions 5.1 or later.

What can it do?

The exported WebRTCStreamManager class handles establishing a WebRTC connection with the mediaserver. When initializing the connection, a video element could optionally be passed as an argument which would bind that element to the stream. The stream it itself is also exposed on the return Observable to allow flexibility.

The WebRTCStreamManager defaults to showing live but also allows for updating the playback position to play streams from archive. The playback position could also be updated; when the position is updated all WebRTCStreamManager instances playback positions are synced to the new time stamp.

Usage

The WebRTCStreamManager class exposes a connect static method which is used to initialize a connection. Optionally it accepts a reference to a video element to automatically close the connection one the player is no longer on the DOM.

Example webRtcUrlFactory function:

The WebRTCStreamManager.connect method takes as a first argument a function that returns the webrtc-tracker endpoint with auth.

The camera_id and auth query parameters are required, pos is optional.

// Could be a direct connection '{serverIp}:{port}` or a cloud relayed connection '{serverId}.{cloudSystemId}.{relayUrl}'
const serverUrl = 'Server url';
const cameraId = 'Camera id';
const auth = 'Auth key';
const position = 0; // Initial position

const webRtcUrlFactory = () =>
  `wss://${serverUrl}/webrtc-tracker?camera_id=${cameraId}&pos=${position}&auth=${auth}`;

Example usage

The connect static method returns an observable emits streams and errors.

To update a video element to use that stream we set the srcObject to the stream if it exist.

To start autoplaying you can also set muted and autoplay to true.

Target element

<video id="someTargetId" autoplay muted></video>

const videoElement = document.querySelector('video#someTargetId')

Initializing connection and setting video source

WebRTCStreamManager.connect(webRtcUrlFactory, videoElement).subscribe(([stream, error]) => {
  if (stream) {
    targetVideoElement.srcObject = stream;
    targetVideoElement.muted = true;
    targetVideoElement.autoplay = true;
  }

  if (error) {
    handleError(error)
  }
});