Nabto Edge JavaScript Client SDK

This Javascript Nabto Client SDK can be used to implement Nabto Edge WebRTC in a website. While native Nabto Edge Connections are not possible in browsers, browsers can use this SDK to create a WebRTC connection to a Nabto Edge Device and use that to make Nabto Edge CoAP requests. The SDK also supports normal WebRTC media tracks. This is used to implement the example site described in the WebRTC Browser Example as well as the demo site used in the WebRTC demo.

Installation

The SDK can be install as a Node module using NPM:

npm install --save github:nabto/edge-client-js-webrtc#v0.5.0

If your website is using a framework (eg. Next.js) which is already based on Node modules, this is all you need to do and can continue to the Using the SDK section.

To use the SDK in a static website, the Node module must first be translated into a browser supported Javascript. For this you can use Browserify. Browserify can be install globally on your system as per their official documentation, or you can install it locally along side the client SDK using:

npm install --save-dev browserify

To use the SDK in a browser you need a Javascript file requiring the SDK and adding it to the website environment. Such a file can look like this (We will assume this file is named nabto_module.js):

var edgeWebrtc = require('edge-webrtc-client');
globalThis.window.EdgeWebrtc = edgeWebrtc;

To use the locally installed Browserify, add an install script to your package.json invoking the binary on the nabto_module.js file. The complete package.json file should now look like this:

{
  "scripts": {
    "install": "node_modules/browserify/bin/cmd.js nabto_module.js -o nabto_bundle.js"
  },
  "dependencies": {
    "edge-webrtc-client": "github:nabto/edge-client-js-webrtc#v0.5.0"
  },
  "devDependencies": {
    "browserify": "^17.0.0"
  }
}

You can now use NPM to build your bundle:

npm install

This will bundle all required node modules into a single Javascript file called nabto_bundle.js which can be used in your website.

Using the SDK

To start using the Javascript SDK in your website, start by creating an EdgeWebrtcCOnnection. If you are using the Node module directly, simply import and invoke the createEdgeWebrtcCOnnection() function. If you are using bundling in a static website, use the object you defined globally in the nabto_module.js file:

let webrtcConnection = globalThis.window.EdgeWebrtc.createEdgeWebrtcConnection();

Before connecting, you must specify which device to connect to using the setConnectionOptions() method:

webrtcConnection.setConnectionOptions({
  productId: <PRODUCT_ID>,
  deviceId: <DEVICE_ID>,
  sct: <SCT>,
  signalingServerUrl: "wss://signaling.smartcloud.nabto.com",
})

productId, deviceId, and sct are specific to the device you want to connect to. If you do not have a Nabto Edge WebRTC Device running, you can use our Demo Container. For now, the signalingServerUrl must be configured to the signaling server used for our Demo. A more permanent signaling server URL will be coming soon.

When connection options are set, setup event listeners for new tracks and connection events before, finally, connecting to the device. Below is an example connect() function which can be invoked from HTML. This is designed to work with the simple device example, meaning that when a connection is established, it will make a CoAP request asking the device to add a video track to the connection.

Note: This example leaves out all error handling to keep this guide short. For a full example, following best practices see the demo example

async function connect()
{
  let webrtcConnection = globalThis.window.EdgeWebrtc.createEdgeWebrtcConnection();
  let productId = document.getElementById("product").value;
  let deviceId = document.getElementById("device").value;
  let sct = document.getElementById("sct").value;

  webrtcConnection.setConnectionOptions({
    productId: productId,
    deviceId: deviceId,
    sct: sct,
    signalingServerUrl: "wss://signaling.smartcloud.nabto.com"
    });

  webrtcConnection.onTrack((event, trackId) => {
    var video = document.getElementById("received_video");
    video.srcObject = event.streams[0];
  });

  await webrtcConnection.connect();
  webrtcConnection.coapInvoke("GET","/webrtc/get");
}