Live Camera Preview Stream

There have been many questions on how to use our API. One of the most frequent questions we get from our customers is, “How can we play a live preview stream for a camera on our public website?” For those that do not know what a live preview stream is, it is simply a series of JPEG images from a particular camera. Normally the system generates one preview image per second within the stream, however it is possible to set the camera to generate four previews per second (we will not cover how to do so in this blog post).

For security purposes, our ecosystem does not support unauthenticated cameras, therefore authentication is required to view the live camera preview stream. If you want to show the live preview stream publicly on your website, you will need to create a web service to use our Authentication API and Camera Preview API. This way the web service will have authentication privileges to grab the image and any visitor on your website will be able to view the live preview stream. In technical speak, the web service acts as an authenticated user proxy for public requests.

In this example, we will use Python/Flask, but we will also provide a Golang example at the end of this blog.

What we will cover in this blog:
● Identify the camera ESN you want to publicly preview stream
● Create a user in your account with ONLY preview stream privileges (remember the username and password)
● Create the authentication code in the web service
● Create the image grabbing code in the web service
● Optimize the code for performance
● Create the javascript code to call your web service

Prerequisites:
● Understand web service programming
● Must have an account with Eagle Eye Networks
● Must have admin access in the account to create users
● Must have a bridge and camera attached and properly streaming in the account

Identify ESN of the Camera:
The first step is to identify the ESN of the camera you want to use for the preview stream. You will want to log into our service (https://login.eagleeyenetworks.com/) using your username and password. All devices within the EEN (Eagle Eye Networks) ecosystem contain an Electronic Serial Number (ESN). This ESN is an eight digit hexadecimal string. You can easily identify the ESN of the camera you want to stream by opening the settings of the camera. From the dashboard, click the gear box of the camera you want to live preview stream.

In our example, we will use the ESN 1006073b.

User Setup:
It is now time to create a user for our web service to use. We will limit the user’s permission to only be able to live preview stream the 1006073b camera. Open the Users section and add a user. Remember that a user requires an email address. After a user has been added, an email is sent to the email address specified asking the user to activate his/her credentials. You must activate the user prior to using it for your web service! The below image shows you how to only set permissions to view the live preview stream:

Backend Server:
The next step is to code! For our examples we will be using Python and Flask. We assume you know how to set the framework and will not cover that portion. Let’s jump right into it!

Authenticating:
The first thing we have to do is authenticate with the user you have created (see Authentication). There are two steps to the authentication process. Authenticate, which we send the username (email) and password. A successful response will return a token. This token is then passed to a second call: Authorize. Once you have been authorized, you will be issued a auth_key cookie. Retain this cookie for any future calls!

Authenitcate and Authorize:

Once you have your auth_key cookie, it is time to get preview images!

Preview image code:
Retrieving preview images is a breeze. There are several api calls to get an image from the preview stream.
● Previous Image – This endpoint allows you to specify a time and get a previous image in history from the time stamp as the anchor point.
● Current Image – This endpoint allows you to specify a time and get the image at that specific endpoint. You cannot just willy nilly choose a timestamp and fetch an image. Images are created by our Bridge system. In order to figure out which timestamp you want you will need to do a List call (not covered in this blog post). See Get List Of Images.
● Next Image – This endpoint allows you to get the next image from a timestamp. You can specify the current time and the system will wait until the cloud receives the image or immediately return if the image already exists in the cloud.

We will use the Next Image api call.

Background Preview Image Code (Optimized Process):
There is a slight problem of inefficiency. You do not want to call this logic every time there is a request from a client. If there are 100 clients, there will be 100 image calls. And these image calls might return the same image! Therefore it is suggested to have a background task that retrieves the image and pushes it into shared memory. From there, any request will always get the latest image. We use GEvent as a co-processing mechanism. We create a greenlet for our background image fetcher and fetch images every second. We then write the results to a shared memory location for any requester to view.

Javascript/HTML Code
And now the easy part. We will call a one second timer to continuously fetch the images.

Conclusion:
Grabbing images in the EEN ecosystem is fairly straightforward. The only barrier of entry is authenticating as a user in order to fetch the image. Eventually we will make cameras public accessible which would eliminate the need for the Backend Web Proxy.

You can download the python app and golang app blog.