stserver-frontend-comp

stserver-frontend-comp is a js frontend React component library that helps you build a user interface for StanagOnDemand Server.
It contains standalone reusable components that serve as a building blocks for FMV web application.
The modular components do not contain much application specific dependencies - they provide a basic functionality, so you can easily reuse them, adding your own application specific "look & feel" and logic.

Excluded dependencies

Library excludes the following from the package, so they must be present in the hosting application

• react
• react-dom

Peer Dependencies

• react
• react-dom
• @material-ui/core
• @material-ui/icons
• @material-ui/lab
• socket.io-client

Live Demo

Components

Players

Player components implement a video playback and KLV metadata extraction functionality.

SensorPlayer

SensorPlayer is a high level component that implements a video playback and KLV metadata extraction functionality for all supported (by StanagOnDemand server) operational modes and protocols. It supports both Live and VOD playback. In most cases user should use this component when building a front end.

Usage

VOD scenario

import './App.css';
import { SensorPlayer } from 'stserver-frontend-comp';

function App() {
  return (
    <div className="App" >     
      <SensorPlayer serverUrl='https://stserver.impleotv.com'
        missionIdOrName='Truck' sensorIdOrName='EO-IR' videoDir='videos'
        username='guest' password='guest'
        clientId='storybookDemo'
        width={640} height={360}/>
    </div>
  );
}

export default App;

Live and Live low latency scenarios

import './App.css';
import { SensorPlayer } from 'stserver-frontend-comp';

function App() {
  return (
    <div className="App" >     
      <SensorPlayer serverUrl='https://stserver.impleotv.com'
        mode='lowLatency'
        platformName='Legion'
        missionIdOrName='Truck' sensorIdOrName='EO-IR' 
        username='guest' password='guest'
        wsVideoStreamPort={9010}
        useReverseProxy={true}   
        width={640} height={360}/>
    </div>
  );
}

export default App;

HlsPlayer

HlsPlayer is a low level component that implements a video playback and KLV metadata extraction functionality for HLS protocol. It supports both Live and VOD playback. SensorPlayer wraps this component, so it should not be used directly.

Usage

import './App.css';
import { HlsPlayer } from 'stserver-frontend-comp';

function App() {
  return (
    <div className="App" >     
      <HlsPlayer serverUrl='https://stserver.impleotv.com'
        missionIdOrName='Truck' sensorIdOrName='EO-IR' videoDir='videos'
        username='guest' password='guest'
        width={640} height={360}/>
    </div>
  );
}

export default App;

LiveLowLatencyPlayer

LiveLowLatencyPlayer is a low level component that implements a video playback and KLV metadata extraction functionality in Live Low Latency mode. SensorPlayer wraps this component, so it should not be used directly.

Klv metadata

KlvView

KlvView implements a JSON based MISB metadata hierarchical presentation.

Usage

import './App.css';
import { KlvView } from 'stserver-frontend-comp';

const Pckt601 = {
    "1": -10117, 
    "2": 1355755344617000,
    "3": "test",
    "4": "AF-101",
    "5": 159.974,
    "6": -0.4315,
    "7": 3.4059,
    "8": 147,
    "9": 159,
    "10": "MQ1-B",
    "11": "EO",
    "12": "WGS-84",
    "13": 40.847380520333815,
    "14": -104.97439262217624,
    "15": 14190.7
};

function App() {
  return (
    <div className="App" >     
      <KlvView theme='light' data={Pckt601}/>
    </div>
  );
}

export default App;

MissionTimeline

MissionTimeline is a generic timeline for mission presentation and (optional) current playback position. It requires an external sensor data source. MissionTimeline shows all sensor that belong to the mission. If recording contains non-continues clips, they are placed on a timeline accordingly. Additionally, MissionTimeline provides events on clicked bookmarks and position.

SensorTimeline

SensorTimeline is a generic timeline for mission presentation and (optional) current playback position. It requires an external sensor data source. Additionally, it provides events on clicked bookmark and position.

StMissionTimeline

StMissionTimeline is a StServer helper wrapper for the MissionTtimeline control. It contains MissionTtimeline control and a code that pulls data from the server. StMissionTimeline shows all sensor that belong to the mission. If recording contains non-continues clips, they are placed on a timeline accordingly. Additionally, StMissionTimeline provides events on clicked bookmarks and position.

CanvasGrid

CanvasGrid is a low level component that renders a grid. It is a helper component that is used by higher level components for showing background.

Tools

CutControl

CutControl implements a timeline for cutting and exporting clips out of the video files.

Usage

import './App.css';
import { CutControl } from 'stserver-frontend-comp';

function App() {
  return (
    <div className="App" >     
      <CutControl theme='light'
        markIn={0} markOut={2800} duration={3600} curPos={1000}
        crosshairColor={'red'} gridColor={'grey'} gridOpacity={0.2} 
      />
    </div>
  );
}

export default App;