![\"API](\"https:\/\/www.een.com\/wp-content\/uploads\/2017\/02\/API-Your-Server.jpg\")
<\/p>\nThere have been many questions on how to use our API. One of the most frequent questions we get from our customers is, \u201cHow can we play a live preview stream for a camera on our public website?\u201d 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).<\/p>\n
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.<\/p>\n
<\/p>\n
In this example, we will use Python\/Flask, but we will also provide a Golang example at the end of this blog.<\/p>\n
What we will cover in this blog:
\n\u25cf Identify the camera ESN you want to publicly preview stream
\n\u25cf Create a user in your account with ONLY preview stream privileges (remember the username and password)
\n\u25cf Create the authentication code in the web service
\n\u25cf Create the image grabbing code in the web service
\n\u25cf Optimize the code for performance
\n\u25cf Create the javascript code to call your web service<\/p>\n
Prerequisites:
\n\u25cf Understand web service programming
\n\u25cf Must have an account with Eagle Eye Networks
\n\u25cf Must have admin access in the account to create users
\n\u25cf Must have a bridge and camera attached and properly streaming in the account<\/p>\n
Identify ESN of the Camera: In our example, we will use the ESN 1006073b.<\/p>\n User Setup: Backend Server: Authenticating: Authenitcate and Authorize:<\/p>\n Once you have your auth_key cookie, it is time to get preview images!<\/p>\n Preview image code: We will use the Next Image api call.<\/p>\n Background Preview Image Code (Optimized Process): Javascript\/HTML Code Conclusion: You can download the python app and golang app blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" There have been many questions on how to use our API. One of the most frequent questions we get from our customers is, \u201cHow can we play a live preview …<\/p>\n
\nThe 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\/<\/a>) 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.<\/p>\n![\"API](\"https:\/\/www.een.com\/wp-content\/uploads\/2017\/02\/API-Authentication.png\")
\n![\"Camera](\"https:\/\/www.een.com\/wp-content\/uploads\/2017\/02\/Camera-Setting-Test-Camera.png\")
<\/p>\n
\nIt is now time to create a user for our web service to use. We will limit the user\u2019s 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:<\/p>\n![\"User](\"https:\/\/www.een.com\/wp-content\/uploads\/2017\/02\/User-Settings.png\")
<\/p>\n
\nThe 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\u2019s jump right into it!<\/p>\n
\nThe first thing we have to do is authenticate with the user you have created (see Authentication<\/a>). 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!<\/p>\n
\nRetrieving preview images is a breeze. There are several api calls to get an image from the preview stream.
\n\u25cf Previous Image<\/a> \u2013 This endpoint allows you to specify a time and get a previous image in history from the time stamp as the anchor point.
\n\u25cf Current Image<\/a> \u2013 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<\/a>.
\n\u25cf Next Image<\/a> \u2013 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.<\/p>\n
\nThere 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.<\/p>\n
\nAnd now the easy part. We will call a one second timer to continuously fetch the images.<\/p>\n
\nGrabbing 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.<\/p>\n