Articles in this section

How to: Embed Video from Nx Witness / Nx Meta on a website

Avatar
Tony Luce
  • Updated
Follow

Overview

Embedding a video from an Nx Witness / Nx Meta system into a browser has many use cases - sharing a live stream of a part of a facility publicly, building an external interface for integrated products, and more. Below is a step-by-step guide outlining a method of how to pull a video from any Nx Witness / Nx Meta system and embed it in an external website.

Before you Begin...

For this example, we will use our public demo system:

JavaScript

var username = 'demo@networkoptix.com';
var password = 'NxDemoUser';
var cameraId = 'a02d3776-a7eb-faea-97d5-6251c1694151';
var serverAddress = "https://demo.networkoptix.com:7001";

Install the following libraries:

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>


Security

  1. When you embed the video on a website - always create a dedicated user with limited permissions (ideally - only live viewing for specific public cameras)
  2. It is better to generate the link on server-side (backend) to avoid sending password with source code to the browser


Step 1: Authentication

To embed the video you need to use URL-based authentication. It works like this:

  1. request special session key from the server
  2. using that key and password generate an authentication key
  3. use this key in the URL

You can find detailed documentation here:

JavaScript

$.ajax({
          url: serverAddress +"/api/getNonce",
          type: "GET",
          success: function (response) {

              var realm = response.reply.realm;
              var nonce = response.reply.nonce;
              var digest = md5(username + ":" + realm + ":" + password);
              var partial_ha2 = md5("GET" + ":");
              var simplified_ha2 = md5(digest + ":" + nonce + ":" + partial_ha2);
              var authKey = btoa(username + ":" + nonce + ":" + simplified_ha2);

              callback(authKey); // This key can be used in URL now
          }
});

In this example, we use the jQuery library to make API request and open source Javascript implementation of MD5.

Important note: The authentication key expires from time to time, so you cannot create a permanent video link. Make sure you generate it every time page opens.


Step 2: Generate a video link (cloud/local)

The recommended video format for embedding video is HLS. It does not require transcoding on the server-side but works for h.264 cameras only (most cameras support this codec).

You can find detailed documentation here: http://demo.networkoptix.com:7001/static/index.html#/developers/api/hls/%3CcameraId%3E.m3u

JavaScript

var cameraURL = serverAddress + '/hls/' + cameraId + '.m3u8?lo&auth=' + authKey;


Step 3: Use player

HLS videos can be embedded to any modern browser using hls.js library: https://github.com/video-dev/hls.js/

JavaScript

var video = document.getElementById('video');

if (Hls.isSupported()) {

    var hls = new Hls();
    hls.loadSource(cameraURL);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {

        video.play();
    });
}


Technical limitations & overcoming them using Nx Cloud

It is important to understand two limitations:

  • The video will work only if the browser can reach the system. If you are using your server’s IP address - the video will not be accessible outside of the local network.
  • If you embed the video on the secure website (using https) - requests might not work, because the browser doesn’t trust server’s self-signed certificate

Note: To overcome both limitations you can use Nx Cloud (Routing API calls via Nx Cloud).

HTML

<video  id="video" controls></video>

Javascript

var systemId = '3770508e-569a-423b-a61a-a85abb0ffff2';
var serverAddress = "https://" + systemId + ".relay.vmsproxy.com";


Putting it all together

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video  id="video" controls></video>

Javascript

var username = 'demo@networkoptix.com';\
var password = 'NxDemoUser';
var cameraId = 'a02d3776-a7eb-faea-97d5-6251c1694151';
var systemId = '3770508e-569a-423b-a61a-a85abb0ffff2';
var serverCloudAddress = "https://" + systemId + ".relay.vmsproxy.com";
var serverLocalAddress = "https://demo.networkoptix.com:7001";
var serverAddress = serverCloudAddress; // serverLocalAddress;

function step1GenerateKey() {

    $.ajax({

        url: serverAddress + "/api/getNonce",
        type: "GET",
        success: function(response) {
            var realm = response.reply.realm;
            var nonce = response.reply.nonce;
            var digest = md5(username + ":" + realm + ":" + password);
            var partial_ha2 = md5("GET" + ":");
            var simplified_ha2 = md5(digest + ":" + nonce + ":" + partial_ha2);
            var authKey = btoa(username + ":" + nonce + ":" + simplified_ha2);
            step2GenerateVideoUrl(authKey); // This key can be used in URL now
        }
    });
}

function step2GenerateVideoUrl(authKey) {
    var cameraURL = serverAddress + '/hls/' + cameraId + '.m3u8?lo&auth=' + authKey;
    console.log(cameraURL); // this URL can be tested with VLC player for verification. VLC should not ask for additional credentials
    step3InitPlayer(cameraURL);
}

function step3InitPlayer(cameraURL) {

    var video = document.getElementById('video');

    if (Hls.isSupported()) {

        var hls = new Hls();
        hls.loadSource(cameraURL);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function() {

            video.play();

        });
    }
}

step1GenerateKey();

 

Related articles

Comments

0 comments

Please sign in to leave a comment.