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 detection, player size changes, message reception, connection state changes, and error handling.

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 |