JS Camera Example

This example demonstrates how to setup a JavaScript based WebRTC camera application. For a full demo see the Web Demo. For details on using the SDK, see this guide

Obtaining the source

The example code is found on the SDK git repo.

Clone the repo and go to the example directory:

$ git clone https://github.com/nabto/nabto-webrtc-sdk-js.git
$ cd nabto-webrtc-sdk-js/examples/very-simple-camera-example

Running the example

Before running the example, follow the Console intro to configure a device in the Nabto backend. From this guide you should obtain a Product ID, a Device ID, and a Private Key.

Additionally, this guide will use shared secret authentication, so such a secret should be generated:

$ openssl rand -hex 32
d4ff5ecd8f21ed40c889cd350a524f9945a374b5e962dbf0bc1eeec71ee5dc1b

In demonstration scenarios the shared secret may be impractical to copy from the device to the client if using eg. an Android client app. For demonstration purposes only, a simpler shared secret can be used. However, this can compromise the security of the signaling channel.

From the example directory, open the main.js file. Enter the Product ID, Device ID, Private Key, and Shared Secret in place of the ... strings. The code should look similar to this:

const productId = "wp-zzjhk3jm";
const deviceId = "wd-fab3mbcfvio73g3u";
const sharedSecret = "d4ff5ecd8f21ed40c889cd350a524f9945a374b5e962dbf0bc1eeec71ee5dc1b";
const privateKey = `-----BEGIN PRIVATE KEY-----
MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQg+oH56dcdavHeaJhO
kroaroSWQLA/A+6sCQRb8g+Ip4yhRANCAATc3dMAfNPk6dmWOLoYdOLwsuC6OQ4x
1vOzzk4iv+0GYsurToJkZ7FohDBPiup+FNLWyaiUnXgdWay/vLjH2P1k
-----END PRIVATE KEY-----`

Now, run the example camera application using npm:

$ npm install
$ npm run vite

Using a browser, open http://localhost:5173.

The device is now ready for clients to connect. To connect a client, either follow the Web guide or the mobile guide.

When connecting a client for the first time, the camera webpage will ask for permissions to use the Webcam for the video feed. You must grant these permissions before the client can show the video feed.