Historical Footage (HLS Playback)

Our Playback API provides endpoints that allow you to stream historical footage from the cameras. In this end-to-end example, we walk you through the steps for streaming playback video.

Prerequisites

To use this endpoint, you'll need:

A valid Lumana api key.
A camera id.

Generating a Lumana API key:

There are two options to generate Lumana API key:

In the platform go to: Organizations Settings -> API Keys -> Generate Key.
Via the Lumana API:

$ curl --location 'https://access.lumana.ai/v1/api-key' \
--header 'Content-Type: application/json' \
--data-raw '{
    "name": "api-key-name",
    "expiresIn": 30,
    "email": "your-email",
    "password": "your-password"
    ,"orgId": "your-org-id"
}'

Getting camera id

You can get cameraId by using the API or by going to the platform -> Edit camera -> Camera Id

Getting Lumana HLS Playback URL:

Each start request is identified by a sessionId, which can be reused in future requests to improve performance and response times for the same camera by maintaining an active session. You can either use the same session to start new stream from the same camera or proactively stop an active session by specifying the corresponding sessionId and cameraId.

Request example:

curl --request GET \
     --url 'https://access.lumana.ai/v1/playback/start?cameraId=<cameraId>&start=<start-timestamp>&end=<end-timestamp>&smartStorage=<boolean>' \
     --header 'authorization: Bearer <api-key>'

Response example:

{
  "cameraId": "<cameraId>",
  "sessionId": "028a1945-4860-4c5a-a8e7-652bc4fd3bbc",
  "url": "https://playback-dev.lumana.ai/session/028a1945-4860-4c5a-a8e7-652bc4fd3bbc/camera/<cameraId>/manifest.m3u8",
  "currentSessions": 1
}

Stream historical footage from camera:

Once you have the url you should start streaming in the first 90 seconds as the session will be invalid due to inactivity timeout. You can stream the video from the camera using this player example.

Enter the playback url obtained from the previous request and play the video.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HLS Player</title>
  
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #121212;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      padding: 20px;
      box-sizing: border-box;
    }

    input[type="text"] {
      width: 60%;
      padding: 12px;
      font-size: 18px;
      border-radius: 5px;
      border: 2px solid #333;
      background-color: #1e1e1e;
      color: #fff;
      margin-bottom: 10px;
      box-sizing: border-box;
    }

    button {
      padding: 12px 20px;
      font-size: 18px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    button:hover {
      background-color: #0056b3;
    }

    .video-container {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50vh;
      background-color: #000;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    video {
      width: 80%;
      max-width: 800px;
      border-radius: 10px;
    }
  </style>
</head>
<body>

  <h1>HLS Playback Player</h1>
  <p>Enter the M3U8 URL below to play the video:</p>
  <input type="text" id="m3u8Url" placeholder="Enter M3U8 URL" />
  <button onclick="playHLS()">Play</button>

  <div class="video-container">
    <video id="videoPlayer" controls></video>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

  <script>
    function playHLS() {
      const video = document.getElementById('videoPlayer');
      const url = document.getElementById('m3u8Url').value;
      const hlsConfig = {
        enableWorker: true,
        lowLatencyMode: true,
        liveSyncDurationCount: 1,
        // liveMaxLatencyDurationCount: 2, // If we are not playing from the last 5 minutes - add this configuration
        startPosition: 0, // If we are playing from the last 5 minutes (semi live-view), otherwise - remove
        initialLiveManifestSize: 1,
        backBufferLength: 30,
        liveDurationInfinity: true,
        // Logger configuration to fix "this.log is not a function" error
        debug: false,
      };


      if (Hls.isSupported()) {
        const hls = new Hls(hlsConfig);
        hls.loadSource(url);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function() {
          video.play();
        });
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        // This is for Safari, which supports HLS natively
        video.src = url;
        video.addEventListener('loadedmetadata', function() {
          video.play();
        });
      } else {
        alert('Your browser does not support HLS streaming.');
      }
    }
  </script>

</body>
</html>