Stanag Web Player Component library

Stanag2WebRTC enables easy integration of live multicast UDP STANAG 4609 streams into web-based applications. The Stanag Web Player Component library provides several front-end components that can be used with the Stanag2WebRTC server backend.

Stanag2WebRtc React Player / Recorder

The Stanag2WebRtc React Player is a versatile React component that allows seamless integration into your applications. This powerful component provides low-latency WebRTC playback and optional recording (server side) in MPEG-TS or HLS formats.
With its simple integration and customizable features, the Stanag2WebRtc React Player offers a seamless streaming experience.

Features

• Low Latency WebRTC Playback: Experience real-time streaming with minimal delay, enabling a smooth and responsive playback experience.
• Optional Recording: Capture and store your streams in MPEG-TS or HLS formats for future reference or analysis.
• Flexible Configuration: Customize the player's behavior by providing parameters such as server URL, player width, poster image, controls visibility, autoplay, and more.
• Event-driven API: Utilize various event callbacks to handle state changes, recorder events, data packet reception, stream and server info, message reception, connection state changes, errors, etc.

Installation

npm i @impleotv/stanag-player

Usage Sample

import React from 'react';
import StanagPlayer from '@impleotv/stanag-player';

const App = () => {
  return (
    <div>
      <h1>Your Application</h1>
      <StanagPlayer
        serverUrl="http://your-server-url"
        onConnected={handleConnection} 
        onStateChange={handleStateChange}
        onRecorderStateChange={handleRecorderStateChange}
        onDataReceive={handleDataReceive}
        // Add more event callbacks as needed
      />
    </div>
  );
};

export default App;

In the above example, the StanagPlayer component is integrated into a React application. It is configured with a server URL and various event callbacks to handle different aspects of the player's functionality.

Note: Make sure to install the @impleotv/stanag-player package from npm before using it in your project.

For more details on the available props and their descriptions, please refer to the table provided below.

Prop Name	Type	Description
serverUrl	string	The URL of the server.
width	number	Explicit player width. If not provided, the player width will be determined by its parent element.
poster	string	The URL of the poster image to be shown while the video is loading or until the user hits play.
showColorBars	boolean	Set to true to display color bars as the poster image.
controls	boolean	Set to true to show playback controls.
useStandardControls	boolean	Set to true to use standard WebRTC controls instead of custom controls.
autoplay	boolean	Set to true to start playback automatically.
onStateChange	function	Fired when the stream state changes
onRecorderStateChange	function	Fired when the recorder state changes
onServerInfo	function	Fired when a recorder event is received
onStreamInfo	function	Fired when stream info is detected
onRecorderEvent	function	Fired when a recorder event is receivedreceived.
onDataReceive	function	Fired when a data packet is received
onSizeChange	function	Fired when the player size changes
onMessageReceive	function	Fired when a message from the server arrives
onConnected	function	Fired when the connection state changes
onError	function	Fired when an error occurs