react-websockets-video-player v0.0.22

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:

LoaderProps

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.