JS Client SDK

The Nabto WebRTC SDK is available for JavaScript on npm.

The package @nabto/webrtc-signaling-client is used when creating a client application in a Web application, react application or another javascript or typescript based environment.

npm install --save @nabto/webrtc-signaling-client

The package @nabto/webrtc-signaling-util provides utilities which can be used in both client and device applications.

npm install --save @nabto/webrtc-signaling-util

Quick Start

We start by creating a simple html page with a video view:

...
  <video id="videoview" autoplay muted controls width="480" height="360"></video>
...

Then we have a simple piece of javascript which connects to a camera, once connected and it gets a track callback it assigns the track to the videoview in the html page. This code is purposely made really simple and does not handle errors.

import {createSignalingClient } from '@nabto/webrtc-signaling-client'
import { createClientMessageTransport, ClientMessageTransportSecurityMode, PerfectNegotiation, SignalingEventHandler } from '@nabto/webrtc-signaling-util'

const productId = "...";
const deviceId = "...";
const sharedSecret = "...";

function connect()  {
    const signalingClient = createSignalingClient({productId: productId, deviceId: deviceId});
    const messageTransport = createClientMessageTransport(signalingClient, {securityMode: ClientMessageTransportSecurityMode.SHARED_SECRET, sharedSecret: sharedSecret})
    messageTransport.on("setupdone", async (iceServers) => {
        const pc = new RTCPeerConnection({iceServers: iceServers});
        new PerfectNegotiation(pc, messageTransport);
        new SignalingEventHandler(pc, signalingClient);
        pc.addEventListener("track", (event) => {
            const videoElement = document.getElementById("videoview");
            videoElement.srcObject = event.streams[0];
        })
    })
    signalingClient.start();
}

connect();

This really simple example can be found here: very-simple-client-example