Live Video SDK for Web

Introduction

The Eagle Eye Networks Live Video Web SDK allows you to integrate live video streaming into your project using the native HTML VideoElement. The SDK supports playback of both video and audio and provides a number of customization options to suit your needs.

Installation

To install the latest version, run the following command in your project's root directory:

npm i @een/live-video-web-sdk

Here is more information on the NPM package :

npmjs.com

@een/live-video-web-sdk

React Example

import LivePlayer from '@een/live-video-web-sdk'
import React, { useEffect, useRef } from "react";

function App() {
  const videoElement = useRef(null);

  useEffect(() => {
    const config = {
      videoElement: videoElement.current,
      cameraId: "1003dc62",
      baseUrl: "https://api.c000.eagleeyenetworks.com",
      jwt: "eyJraWQiOiI2O...",
    }
    const player = new LivePlayer();
    player.start(config);
  });

  return (
    <div className="App">
      <div className="container">
          <video autoPlay muted ref={videoElement}></video>
      </div>
    </div>
  );
}

export default App;

Vue Example

<template>
  <div>
    <video id="videoElement" autoplay muted/>
  </div>
</template>

<script setup>
import LivePlayer from '@een/live-video-web-sdk'
import {onMounted} from 'vue'

onMounted(() => {
  const config = {
    videoElement: document.getElementById("videoElement"),
    cameraId: "100544a0",
    baseUrl: "https://api.c000.eagleeyenetworks.com",
    jwt: "eyJraWQiOiI2O..."
  }
  const player = new LivePlayer();
  player.start(config);
})

</script>

Configuration

It’s recommended to configure the player when calling start() to make sure the configuration is still valid. A configuration file can also be provided on initialization.

dictionary livePlayerConfig {
  videoElement (required): HTMLVideoElement // render frames into a video element using MediaStreamTrack API
  videoTech: // "WebCodecs"(default) | "FLV"
  cameraId:string // 6-digit camera ESN
  baseUrl: string // example: "https://api.c000.eagleeyenetworks.com"
  feedUrl: string // as retrieved via the feeds endpoint
  jwt: string (required) // EEN JWT or access_token
  onFrame: callback(EEN timestamp <number>) // returns the number of milliseconds since the epoch, which is defined as the midnight at the beginning of January 1, 1970, UTC
  onStop: callback() // called when videostream has been stopped
  onAudio: callback() // called when audio is detected
  maxBuffer: unsigned short // milliseconds, defaults to 3000
  minBuffer: unsigned short // milliseconds, defaults to 1000
};

Please note that WebCodecs will only work on Chromium browsers such as Google Chrome and Microsoft Edge. If you want to use this SDK on other browsers change the videoTech to FLV.

Interface

interface VideoPlayer {
  start(livePlayerConfig) // starts playback
  stop() // stops playback
  maxBuffer unsigned short // can be adjusted during playback
  minBuffer unsigned short // can be adjusted during playback
  // audio supported on multiPart only
  getAudioMuted() boolean // defaults to true
  setAudioMuted(boolean)
  setMaxBuffer(unsigned short milliseconds)
  setMinBuffer(unsigned short milliseconds)
  getBufferLength() returns bufferLength in milliseconds
  getAudioVolume() octet // range between 0 and 1
  setAudioVolume() octet // range between 0 and 1
  getAudioPlaybackError() boolean // defaults to false, true when audio playback encountered an error
  isPlaying() boolean // indicates if the video is still playing
}