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