@broadcastingplatforms/web-connectors

Analytics connectors for @broadcastingplatforms/player.

Installation

npm install @broadcastingplatforms/web-connectors @broadcastingplatforms/player
# or
pnpm add @broadcastingplatforms/web-connectors @broadcastingplatforms/player

Mux Analytics

Connect analytics via the ready event. The connector automatically destroys itself when the player is destroyed.

Web Component

<bp-player
  id="player"
  source='{"sources":[{"type":"video","url":"..."}]}'
></bp-player>

<script type="module">
  import { createMuxConnector } from '@broadcastingplatforms/web-connectors/mux';

  document.getElementById('player').addEventListener('ready', (e) => {
    createMuxConnector(e.detail, {
      envKey: 'your-mux-env-key',
      data: {
        video_title: 'Big Buck Bunny',
        video_id: 'bbb-001',
      },
    });
  });
</script>

React

import { BPDefaultUI, type PlayerCore } from '@broadcastingplatforms/player-react';
import { createMuxConnector } from '@broadcastingplatforms/web-connectors/mux';

function Player() {
  const handleReady = (player: PlayerCore) => {
    createMuxConnector(player, {
      envKey: 'your-mux-env-key',
      data: {
        video_title: 'Big Buck Bunny',
        video_id: 'bbb-001',
      },
    });
  };

  return (
    <BPDefaultUI
      source={{ sources: [{ type: 'video', url: '...' }] }}
      onReady={handleReady}
    />
  );
}

Update Metadata

Update metadata during playback:

const connector = createMuxConnector(player, { envKey: '...' });

// Later, update metadata
connector.updateMetadata({
  video_title: 'New Title',
});

Configuration

MuxAnalyticsConfig

| Option | Type | Required | Description | |--------|------|----------|-------------| | envKey | string | Yes | Your Mux environment key | | debug | boolean | No | Enable debug logging | | disableCookies | boolean | No | Disable cookie usage | | data | Record<string, unknown> | No | Video/viewer metadata |

Common Metadata Fields

| Field | Type | Description | |-------|------|-------------| | video_id | string | Unique video identifier | | video_title | string | Video title | | video_series | string | Series/channel name | | video_duration | number | Video duration in seconds | | video_stream_type | 'live' \| 'on-demand' | Stream type | | viewer_user_id | string | Unique viewer identifier |

BPLive Integration

When using BPLive sources, metadata is automatically populated from the stream/clip data:

• video_id from stream/clip ID
• video_title from stream/clip title
• video_series from channel name
• viewer_user_id from auth token (if present)

Lifecycle

The connector listens to the player's destroy event and cleans itself up automatically. No manual cleanup is required in most cases.