WebRTC Browser App Example

In addition to the deployed demo website, the device example comes with a simple static web client. The source can be found beside the device source here. This client is based on the javascript library and on using browserify to make the node js module usable in a browser.

To use the client, navigate to its root folder and install its dependencies using npm. Assuming you are in the repo root:

cd examples/webrtc-demo/web-client/
npm install

You can now open the index.html file from a browser by its absolute path:

file:///PATH/TO/REPO/ROOT/examples/webrtc-demo/web-client/index.html

or just open index.html from a terminal.

This web client is designed as a WebRTC sandbox you can use to test your device. For this reason, it mimics the underlying library features in that CoAP invocations are not hidden away. Instead, you must make each CoAP invocation your self aided by convenience buttons to fill in the CoAP request fields.

If your device has not paired its initial user yet, you can copy its Initial user pairing link into the web client and click parse so you do not have to enter the device information manually. If you already used the device in the demo, you can use the demo site to create a new invite link for this site.

Note: If you reuse a link that was already used on the demo site, the demo will have removed the password from the IAM user in favor of OAuth login. This will cause password authenticate to fail!

Once the device info is parsed and the device is running, click connect to establish a WebRTC connection to the device with a data channel. The created connection has not been authenticated by either side. You can see this if you click Set Video Request followed by CoAP Invoke. This will ask the device to show you its video feed, however, since you are not authenticated, the device will return CoAP status 401 as shown in the Log box. The Signaling Info request will succeed as it is allowed by the device for unpaired users.

To authenticate that you are indeed talking to the right device use the Validate Fingerprint button.

You can now use the Password Authenticate button to authenticate to the device. If successful, you can retry the video request which should now succeed and the video feed should be shown. You can also request both the video and audio feed. To test 2-way video/audio, you can use the Add Downstream Video and Add Downstream Audio buttons.

Note: Downstream video and audio currently only works when adding the feed to an existing upstream feed. If the device has not already added its upstream feed, adding a downstream feed will fail. The downstream feeds are currently hardcoded to use the example track IDs (frontdoor-video and frontdoor-audio).

If you have access to a valid OAuth token, you can authenticate using OAuth instead of password by pasting the token it into the site and make an OAuth CoAP request to the device.