Intro

Nabto WebRTC provides an easy to use Web based demo application is is located at Nabto WebRTC Web Demo. This demo can be used both in Client and Device/Camera mode. The demo can be used with other examples and demos in Nabto WebRTC and is a natural start place for trying out the Nabto WebRTC platform.

The demo is used together with the Nabto Cloud Console. In the console you can create a free trial Nabto WebRTC Product which can be used with the demo.

See the Console Guide for information about how to configure a Nabto WebRTC Product Id, Device Id and Private Key in the Nabto Cloud Console.

The demo is written in React using the Nabto WebRTC JavaScript SDK the code for the demo can be found on github

Client Mode

In Client mode the Demo can connect to another instance of the Nabto WebRTC Web Demo running in Device mode or it can connect to one of the other device/camera demos.

Open Nabto WebRTC Web Demo in a browser(chrome is recommended).

In the settings panel, make sure that Client mode is selected and fill in

  • Product ID: This is the Product ID which is used by the device we want to connect to.
  • Device ID: This is the Device ID which is used by the device we want to connect to.
  • Shared Secret: This should be the same shared secret as the device we want to connect to is using.

Once configured, click connect and the client should connect to the device.

Device/Camera mode

Open the Nabto WebRTC Web Demo in a browser(Chrome is recommended) with a connected webcam/camera.

In this case, it will be used as a device. Scroll down to the settings panel and click on the device button. Then fill in the four fields:

  • Product ID: The product ID which was configured in the Console setup guide.
  • Device ID: The device ID which was configured in the Console setup guide.
  • Shared secret: Any “shared secret” of your choice; here MySecret will be used but a much longer secret should be used in production.
  • Private key: The PEM-formatted private key from the console setup guide.

The other settings can be left unchanged. Click on the connect button above the settings. This will cause the web app to use the product ID, device ID, and private key to authenticate as a device to the Nabto WebRTC platform.

After clicking connect, the browser may request permission to use the webcam. Allow this so that the webcam feed can pass through the WebRTC connection. If successful, a mirrored webcam feed will be displayed in the web app.

Click the generate QR code button below the connect button. This will display a QR code needed in the next section, so keep the page open.