Introduction

Eagle Eye Networks provides different options to integrate live and recorded videos into your applications. They are as follows:

In this guide, we are going to demonstrate how to implement the iFrame feature for the Live Player and History Browser in the Eagle Eye web application.

Before you begin

  1. Login to your account and receive an access token.
  2. Using the /cameras API, retrieve a list of the connected cameras to the end user.
  3. Select the camera ID that you want to show in the iFrame.

Procedure

  1. Select the desired iFrame feature, and replace <esn> with your camera ID:
  • In the Live Player: https://iframe.eagleeyenetworks.com/#/live/<esn>
Live iFrame Sample
  • In the History Browser: https://iframe.eagleeyenetworks.com/#/history?ids=<esn>&time=<time_stamp> (The time query parameter is optional)
History iFrame Sample
  • Live + History: https://iframe.eagleeyenetworks.com/#/historylive/<esn>
History + Live iFrame Sample
  1. Insert an iFrame element in the body and define the following attributes:
  • id: <string>
  • height, width: The video's dimensions in pixels
  • title: A descriptive title
  • src: The URL from Step 1.
  1. Add the JavaScript code. Include a <script> element in the body as shown in the example.
    1. Get a reference to the iFrame's contentWindow using its ID.
    2. Add an event listener to the window object for the "message" event.
    3. Check if the event data is "een-iframe-loaded" or "een-iframe-token-expired".
    4. If true, send a postMessage to the iFrame with the required access token.
  2. Replace <your_access_token> with your camera's valid access token.

Example

Here is a sample code for embedding a history iFrame.

πŸ“˜

Note

Make sure to replace <esn> and <your_access_token> with your camera ID and access token, respectively.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>iframe example</title>
  </head>
  <body>
    <iframe 
      id="test-iframe" 
      height="700" 
      width="1000" 
      title="History Browser" 
      src="https://iframe.eagleeyenetworks.com/#/history?ids=<esn>"
    ></iframe>
    <script>
      const iframe = document.getElementById("test-iframe").contentWindow;
      window.addEventListener("message", event => {
        if (event.data === 'een-iframe-loaded' || event.data === "een-iframe-token-expired") {
          iframe.postMessage({ 
            type: "een-token", 
            token: "<your_access_token>"
          }, "https://iframe.eagleeyenetworks.com/");
        }
      });
    </script>
  </body>
</html>