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.
Library excludes the following from the package, so they must be present in the hosting application
- react
- react-dom
- react
- react-dom
- @material-ui/core
- @material-ui/icons
- @material-ui/lab
- socket.io-client
Player components implement a video playback and KLV metadata extraction functionality.
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.
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;
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 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.
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 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.
KlvView implements a JSON based MISB metadata hierarchical presentation.
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 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 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 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 is a low level component that renders a grid. It is a helper component that is used by higher level components for showing background.
CutControl implements a timeline for cutting and exporting clips out of the video files.
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;