But first, some background

The concept of an RPI-based camera is not new to our platform. You can read more about RPI cameras here:

Requirements

You will need:

The image below shows the setup that we have tested, which will look the same for a Raspberry Pi 4 and a Raspberry Pi Camera rev. 1.3. For a deeper look at the Raspbery Pi and WebRTC, continue reading below. If you are already familiar with these tools, skip to the “Setting up the Raspberry Pi” section.”

The power of Raspberry Pi

The Raspberry Pi has revolutionized the world of DIY electronics and embedded systems. Widely available in nearly any maker or hobbyist webshop, the RPI is both accessible and affordable, making it an ideal choice for a wide range of projects. This compact, versatile single-board computer has empowered makers, hobbyists, and embedded developers to create innovative hardware for a wide variety of use cases.

With its powerful capabilities vs. its low price, the RPI is the perfect candidate for doing mockups, demos etc. Moreover, the RPI benefits from extensive community support, including a wealth of libraries and resources. This means developers can easily find solutions and assistance online if they encounter any issues.

Understanding WebRTC

WebRTC (Web Real-Time Communication) is a cutting-edge technology that enables peer-to-peer communication directly inside a web browser. Originally designed for video conferencing, WebRTC facilitates real-time audio, video, and data sharing over the internet without the need for intermediary servers. This technology has become a cornerstone for modern communication applications, providing high-quality, low-latency streaming capabilities that are essential for surveillance systems. Today, WebRTC is supported by most available browsers.

WebRTC use cases

Web Real-Time Communication (WebRTC) technology has found valuable applications within the Internet of Things (IoT) ecosystem to add communication and video capabilities to various smart devices.

1. Smart alarms

One notable example is WebRTC-enabled smart alarms. While WebRTC is traditionally thought of as a video streaming protocol, the protocol includes data channels that allow the transfer of other types of data, including real-time alerts from alarms. When the alarm detects unusual activity, it can instantly send an alert and start a stream of live footage from connected surveillance cameras to the homeowner’s smartphone, allowing for immediate assessment and action. This capability not only improves security but also provides peace of mind, as homeowners can verify false alarms and respond to genuine threats promptly.

2. Video-enabled bird feeders

With WebRTC-enabled bird feeders, bird enthusiasts can watch real-time video feeds of birds visiting their feeders from anywhere in the world. These smart bird feeders come equipped with cameras and potentially microphones, streaming live audio and video to a user’s device. This application allows users to simply observe and enjoy bird-watching remotely or contribute to citizen science projects by sharing live footage with ornithologists and researchers who study bird behaviors and migration patterns.

3. 3D printers

In the realm of 3D printing, WebRTC provides a significant upgrade by enabling remote monitoring and control. WebRTC-enabled 3D printers can stream live video feeds of the printing process to the user’s device, allowing them to keep an eye on the progress without being physically present. This real-time video communication ensures that any issues, such as print errors or material jams, can be quickly identified and addressed, minimizing downtime and material waste. The ability to monitor and control 3D printers remotely also facilitates collaboration among teams working in different locations, enhancing productivity and innovation.

4. Surveillance cameras

Finally, WebRTC-enabled cameras provide seamless real-time video streaming, which is crucial for applications such as security, baby monitoring, and elderly care. While WebRTC was not initially designed with browser-to-camera interactions in mind, its attributes make it an excellent choice for this application. Traditional surveillance systems often rely on proprietary protocols and centralized servers, which can introduce latency, reduce scalability, and increase costs. WebRTC, on the other hand, allows for direct, real-time communication between users and cameras, minimizing latency and enhancing the immediacy of the video feed. By leveraging WebRTC, users can access live video streams from their surveillance cameras with exceptional speed and clarity, ensuring they can respond swiftly to any situation.

These cameras can stream live footage directly to a user’s smartphone or a central computer, allowing for immediate viewing and interaction. The real-time communication capability of WebRTC ensures that users receive immediate alerts and can respond quickly to any situation, enhancing overall safety and convenience.

Combining WebRTC with Raspberry Pi: An ideal pairing

When combined with the Raspberry Pi, WebRTC unlocks even greater potential. The RPI 4, equipped with a high-quality camera, can serve as a robust and cost-effective surveillance device. By integrating Nabto’s platform for WebRTC, developers can easily establish secure, peer-to-peer connections between the camera and the user.

Nabto fills the gap left by the WebRTC specification, providing a seamless method for authenticating peers and ensuring secure communications. This makes it simple for vendors to do a mockup and testing on a RPI system before developing and deploying it on the vendor’s own WebRTC-based surveillance product.

Demo step 1: Setting up the Raspberry Pi

For this demo we have used the RPI4 operating system image (meaning a pre-compiled file of the operating system), specifically the “bookworm” version.

Visit https://www.raspberrypi.com/software/operating-systems/#raspberry-pi-os-64-bit and download the software directly to the RPI.

As of now you should install the image, configure it, but VERY IMPORTANT: “SKIP” update software.

This is because we have unfortunately found that some issues appear when combining the updated bookworm version with the Raspberry Pi “LibCamera” video software, which you’ll be using for the demo. Hopefully this will change in the future.

You can read more on the issue here: https://github.com/raspberrypi/libcamera/issues/141

This has nothing to do with WebRTC or Nabto, but is the result of an error in GStreamer that prevents GStreamer from properly fetching the camera stream.

Step 2: Setting up GStreamer and the video feed

As described in our general Linux tutorial for WebRTC, if you have a Real-Time Streaming Protocol (RTSP) feed you can now start the Nabto WebRTC peer program, but since we are interested in streaming the video feed from the camera on the RPI, we need to setup an Real-time Transport Protocol (RTP) feed for this camera. This is done using GStreamer and Libcamera, so we need to install that. Type the following into your console:

sudo apt install libgstreamer1.0-dev gstreamer1.0-plugins-ugly  gstreamer1.0-plugins-good gstreamer1.0-plugins-bad

sudo apt install libcamera-apps gstreamer1.0-libcamera gstreamer1.0-tools

You can test if your system can see the camera by typing “libcamera-hello –list-camera” in your console. You should see something like the below: 

libcamera-hello –list-camera

Available cameras

—————–

0 : ov5647 [2592×1944 10-bit GBRG] (/base/soc/i2c0mux/i2c@1/ov5647@36)

    Modes: ‘SGBRG10_CSI2P’ : 640×480 [58.92 fps – (16, 0)/2560×1920 crop]

                            1296×972 [43.25 fps – (0, 0)/2592×1944 crop]

                            1920×1080 [30.62 fps – (348, 434)/1928×1080 crop]

                            2592×1944 [15.63 fps – (0, 0)/2592×1944 crop]

You can test that GStreamer can fetch the video feed and display it on the screen with this command:

gst-launch-1.0 libcamerasrc ! xvimagesink

This will open a window like this:


If you don’t have a camera, but want to test WebRTC anyway you can use the built-in video stream simulation called “videotestsrc”

gst-launch-1.0 videotestsrc ! xvimagesink

If the simulated stream is working, you will see a window that looks similar to the below image:

Step 3: How to compile the Nabto WebRTC streaming device code

The demo is using the generic Linux version of the Nabto WebRTC device.

The instructions for compiling the generic version can be read here: https://docs.nabto.com/developer/platforms/embedded/linux-ipc/webrtc-example.html

You can either compile the binary as using one of the two methods below:

Or alternatively you can download a precompiled binary from Nabto, which merely requires you to trust our binary.

Method 1: Downloading binary

Easiest method is to just download one of the precompiled versions.

Got to https://github.com/nabto/edge-device-webrtc

And click on “Releases” on the right, below the “about” field.

Click and download the “edge_device_webrtc_linux_arm64” (assuming you have downloaded the 64bit version of the operating system).

Remember to make it executable.

chmod a+x edge_device_webrtc_linux_arm64

Method 2: Compiling on the RPI

This method is slow, but could be the only option if you do not have access to a Linux system that can be used for cross compiling

You can follow the instructions here to do that: https://github.com/nabto/edge-device-webrtc?tab=readme-ov-file#build-on-raspberry-pi

Method 3: Cross-compiling using a Linux PC

If you have a Linux PC you can follow these instructions to cross build a binary, which is much faster than building the binary on the RPI.

You can follow the instructions here to do that:

https://github.com/nabto/edge-device-webrtc?tab=readme-ov-file#cross-build-for-raspberry-pi

Generating raw key and fingerprint

Now you have the binary, you need to create a PKI key, a fingerprint for that key which will be uploaded to the Nabto infrastructure and configured onto a product and device created on the infrastructure.

You can read more about product-id’s, device-id’s and keys and fingerprints here: https://docs.nabto.com/developer/guides/overview/components.html

Nabto is using public key infrastructure to authenticate IoT devices. So the first step in configuring the device is to generate a key for the device and to get a fingerprint of the key and configure it in the Nabto cloud console.

Generate a key and matching fingerprint with the ./edge_device_webrtc –create-key command:

./edge_device_webrtc –create-key

Created Raw private key: 

  a00dff5f8b0a7629c050a3f57ba719a639bfceeca3e168dc15ef321aa2f37ab3

With fingerprint: 

  621a018471c3b9c105e54ad835ad6da0b4a5c6b8ee0bdcbab02e2d9c371ab9ae

You will use these in a later step, so do not close the console for now. 

Next, you need to create a product and device in the Nabto console. You can create an account for testing purposes for free on a desktop computer at the following link:

https://console.cloud.nabto.com/

Create a product and device profile by following the instructions in the interface and copy and paste the fingerprint you generated earlier in the fingerprint section of the device as shown below (and remember to click “save”).

You should note the ProductId and DeviceId, which you will need later when starting the feed.

Now everything should be set up.

Start the feed

Now you need to start an RTP feed, that will be fed into the WebRTC demo. This can either be a feed from the camera or a simulated feed, as mentioned earlier.

For a feed from a camera, open a terminal and create an RTP feed using the libcamera as a feed like this:

gst-launch-1.0 libcamerasrc ! video/x-raw,width=640,height=480,format=NV12 ! v4l2convert ! queue ! v4l2h264enc !

‘video/x-h264,profile=constrained-baseline,level=(string)4’ ! rtph264pay pt=96 mtu=1200 config-interval=-1 ! udpsink host=127.0.0.1 port=6000

If you don’t have a camera or just want to test, you can setup gst-launch to create a test feed (like the one TV stations use), which is done like this:

gst-launch-1.0 videotestsrc ! video/x-raw,width=640,height=480,format=NV12 ! v4l2convert ! queue ! v4l2h264enc ! ‘video/x-h264,profile=constrained-baseline,level=(string)4’ ! rtph264pay pt=96 mtu=1200 config-interval=-1 ! udpsink host=127.0.0.1 port=6000

Now an RTP feed should be streaming on localhost port 6000 since the default feed for edge_device_webrtc program is localhost port 6000.

Now start the edge_device_webrtc program with this command: “./edge_device_webrtc – k [fingerprint] -p [productid] -d [deviceid]” using the productid and deviceid you established in the Nabto console. Here is an example of what the finished command will look like:

./edge_device_webrtc -k a00dff5f8b0a7629c050a3f57ba719a639bfceeca3e168dc15ef321aa2f37ab3 -p pr-rdrrkuuu -d de-pk9yipjp

Again, use your own raw key matching the fingerprint you configured in the console and use the productid (for the -p parameter) and the deviceid (for the -d parameter) that you created in the console.

The output should be something like this:

################################################################

# Initial user pairing link:   

# https://demo.smartcloud.nabto.com?p=pr-rdrrkuuu&d=de-pk9yipjp&u=admin&pwd=cfwFcnMxoPbi&sct=ueKyi2mUdi7n&fp=621a018471c3b9c105e54ad835ad6da0b4a5c6b8ee0bdcbab02e2d9c371ab9ae

################################################################

medias size: 2

Nabto Device WebRTC version: 0.0.0-branch.main.commits.425+2fd480e.dirty

Copy the link to your browser search bar and you will see something like:

When you hit “Sign in,” if this is your first time using Nabto, you will need to create a new login using the “Sign up” link shown in the image below:

Find the verification code from your email and verify your account:

You can now accept the device invitation:

And you will be presented with a simplistic dashboard:

Now you can access the camera and view the feed via WebRTC and even invite other users to see the camera:


And that's it!

This is a very exciting area of technology and one we hope you'll enjoy exploring with us. For more, check out our other blogs on the topic: