React-ovenplayer NPM

📋 Getting Started with ReactOvenPlayer

🪜 Setup

npm i react-ovenplayer

📖 Usage

import React, {useEffect, useState} from "react";
import ReactOvenPlayer, {ReactOvenPlayerState} from "react-ovenplayer"

export const Player = () => {
    const [state, setState] = useState<ReactOvenPlayerState | null>(null)

    useEffect(()=>{
        state?.instance.pause()
    }, [state])

    return (
      <div>
          <ReactOvenPlayer
              wrapperStyles={{
                  minWidth: 500
              }}
              setState={setState}
              config={{
                  autoStart: true,
                  autoFallback: true,
                  controls: true,
                  showBigPlayButton: false,
                  mute: true,
                  webrtcConfig: {
                      timeoutMaxRetry: 5, 
                      connectionTimeout: 10000,
                  }, 
                  sources: [
                      {
                          label: 'ap-webrtc', 
                          type: 'webrtc',
                          file: `wss://url/webrtc`,
                      }, 
                      {
                          label: 'eu-webrtc', 
                          type: 'webrtc', 
                          file: `wss://url2/webrtc`,
                      },
                  ],
              }
          }
          />
      </div>
    )
}

🚀 Props

wrapperStyles?: React.CSSProperties;

styles of player wrapper

isAutoReconnect?: boolean;

enable feature to auto reconnect player

config: OvenPlayerConfig;

OvenPlayer configurator. Just as in OvenPlayer

  state?: ReactOvenPlayerState | null;
  setState?: React.Dispatch<React.SetStateAction<ReactOvenPlayerState>>;

properties to check and control state of the player

it will give you back

export type ReactOvenPlayerState = {
    library: OvenPlayer;
    instance: OvenPlayerInstance;
    version: string;
    stateObject?: OvenPlayerEvents["stateChanged"];
    quality?: OvenPlayerQuality;
    isAutoQuality?: boolean;
    volume?: number;
};