@stronk-tech/mistplayer-react v0.0.1

MistPlayer React

A React component library for MistServer streaming with support for both MistPlayer and Canvas WebRTC players. Automatically contacts the load balancer to find the best streaming host.

Installation

npm install mistplayer-react

Usage

Basic Usage

Import the components you need:

import { Player, MistPlayer, CanvasPlayer } from 'mistplayer-react';

Player Component (Recommended)

The Player component provides a clean interface that renders either MistPlayer or CanvasPlayer based on the playerType prop:

import React from 'react';
import { Player } from 'mistplayer-react';

function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <Player streamName="your-stream-name" />
    </div>
  );
}

You can specify which player to use and enable development mode:

<Player 
  streamName="your-stream-name" 
  playerType="canvas" // 'mist' (default) or 'canvas'
  developmentMode={true} // enables 'dev' skin for MistPlayer
/>

MistPlayer Component

Use MistPlayer directly for the default MistServer player experience:

import React from 'react';
import { MistPlayer } from 'mistplayer-react';

function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <MistPlayer 
        streamName="your-stream-name" 
        developmentMode={true} // optional: uses 'dev' skin
      />
    </div>
  );
}

CanvasPlayer Component

Use CanvasPlayer for WebRTC streaming with HTML5 video element:

import React from 'react';
import { CanvasPlayer } from 'mistplayer-react';

function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <CanvasPlayer streamName="your-stream-name" />
    </div>
  );
}

Adding Your Own UI

Since the components are raw players without UI chrome, you can easily add your own controls:

import React, { useState } from 'react';
import { Player } from 'mistplayer-react';

function CustomPlayerWithControls() {
  const [playerType, setPlayerType] = useState('mist');
  
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <div style={{ padding: '10px', background: '#f0f0f0' }}>
        <button onClick={() => setPlayerType(playerType === 'mist' ? 'canvas' : 'mist')}>
          Switch to {playerType === 'mist' ? 'Canvas' : 'Mist'} Player
        </button>
        <span style={{ marginLeft: '10px' }}>
          Current: {playerType === 'mist' ? 'MistPlayer' : 'Canvas Player'}
        </span>
      </div>
      <Player 
        streamName="your-stream-name" 
        playerType={playerType}
      />
    </div>
  );
}

Load Balancer Hook (Advanced)

For advanced use cases, you can use the load balancer hook directly:

import React from 'react';
import { useLoadBalancer } from 'mistplayer-react';

function CustomComponent() {
  const { bestHost, isLoading, getNode, getSource } = useLoadBalancer({ 
    streamName: 'your-stream-name' 
  });

  if (isLoading) return <div>Finding best server...</div>;
  if (!bestHost) return <div>Stream not available</div>;

  return <div>Best host: {bestHost}</div>;
}

Component Props

Player

MistPlayer

CanvasPlayer

How It Works

This package automatically contacts the load balancer at https://loadbalancer.stronk.rocks to find the best streaming host for your stream:

• MistPlayer: Loads from https://best-host/view/player.js and plays https://best-host/view/streamName.html
• CanvasPlayer: Connects to wss://best-host/view/webrtc/streamName for WebRTC streaming

The components show loading states while contacting the load balancer and error states if no suitable host is found.

Features

• Raw Player Components: Clean components without UI chrome - add your own controls as needed
• Automatic Load Balancing: Contacts load balancer to find the best streaming host
• Loading & Error States: Shows appropriate feedback while finding servers
• Dual Player Support: Choose between MistPlayer and Canvas WebRTC player
• TypeScript Support: Full TypeScript definitions included
• Development Mode: Optional 'dev' skin for MistPlayer debugging
• Responsive Design: Players adapt to container dimensions
• WebRTC Streaming: Low-latency streaming with WebRTC
• Auto-reconnection: Automatic WebSocket reconnection on connection loss
• Modern React: Built with React hooks and functional components

Requirements

• React >= 16.8.0
• Access to the Stronk load balancer service

Browser Support

• Chrome/Chromium (recommended for WebRTC)
• Firefox
• Safari
• Edge

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.