React WebSockets Video Player

React WebSockets Video Player is a versatile React component that allows you to play WebSocket videos and render them to a canvas in a React application. The package provides two versions of the player, one using web workers for enhanced performance and another without web workers.

Demo Page: View Demo

Important Note

This package is designed specifically for streaming video frames on a canvas and does not support audio playback or any additional features beyond rendering video frames. It is important to note the following details and limitations:

1. Video Frames Only: The primary functionality of this package is to display video frames on a canvas. It does not support audio playback or processing.

2. WebSocket Message Format: The expected format of WebSocket messages/output from the server should be a Blob. The client-side validation assumes that the received data is a Blob containing video frame information.

Table of Contents

• Installation
• Usage
  • Basic Usage
  • Advanced Usage
• Props
  • LoaderProps
• Examples
  • Basic Example
  • Example with Web Workers
• Development
• License

Installation

To install the package, use npm or yarn:

npm install react-websockets-video-player
# or
yarn add react-websockets-video-player

Usage

Basic Usage

import React from "react";
import Player from "react-websockets-video-player";

const YourComponent = () => {
  const wsUrl = "wss://your-websocket-url";

  return <Player wsUrl={wsUrl} />;
};

Advanced Usage

import React from "react";
import Player from "react-websockets-video-player";

const YourComponent = () => {
  const wsUrl = "wss://your-websocket-url";
  const playerProps = {
    width: 800,
    height: 600,
    withWorker: true,
    debug: true,
    loaderProps: {
      show: true,
      customLoader: <YourCustomLoader />,
    },
  };

  return <Player wsUrl={wsUrl} {...playerProps} />;
};

Props

The Player component accepts the following props:

| Prop Name | Type | Description | Default Value | | ------------- | --------- | ---------------------------------------------- | ------------- | | wsUrl | string | The WebSocket URL for streaming video content. | - | | width | number | The width of the canvas. | 600 | | height | number | The height of the canvas. | 600 | | withWorker | boolean | Use web workers for enhanced performance. | false | | debug | boolean | Enable debugging messages. | false | | style | object | Additional styles for the container div. | - | | loaderProps | object | Loader configuration. | - |

LoaderProps

| Prop Name | Type | Description | Default Value | | -------------- | --------- | ----------------------------------- | ------------- | | show | boolean | Whether to display the loader. | false | | style | object | Styles for the loader container. | - | | className | string | CSS class for the loader container. | - | | customLoader | node | Custom loader component. | - |

Examples

Basic Example

import React from "react";
import Player from "react-websockets-video-player";

const BasicExample = () => {
  const wsUrl = "wss://your-websocket-url";

  return <Player wsUrl={wsUrl} />;
};

Example with Web Workers

import React from "react";
import Player from "react-websockets-video-player";

const WorkerExample = () => {
  const wsUrl = "wss://your-websocket-url";
  const playerProps = {
    withWorker: true,
    debug: true,
  };

  return <Player wsUrl={wsUrl} {...playerProps} />;
};

Development

If you want to contribute to the development of this package or run it locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/ericus123/react-websockets-video-player.git

2. Install dependencies:

   cd react-websockets-video-player
   yarn install

3. Run the development server:

   yarn start

License

This project is licensed under the MIT License - see the LICENSE file for details.