WebRTC Player

FLPlayer for WebRTC provides ultra-low latency live streaming capabilities through the Janus Gateway, enabling sub-second latency streaming for real-time applications.

Setup

Prerequisites

1. Janus Gateway Server: You need a running Janus Gateway server with the streaming plugin enabled
2. Janus JavaScript Library: Include the Janus JavaScript library in your project. Refer to the official Janus documentation for the latest library versions and installation instructions.

important

Both the Janus JavaScript library and WebRTC adapter must be available globally in the browser environment (typically as window.Janus and window.adapter) for the FLPlayer to access them properly. Ensure your library loading method exports these to the global scope.

Create the Player

A WebRTC player is built using the PlayerBuilder pattern, configured with Janus Gateway server details and ICE servers for WebRTC connectivity.

import { createJanusPlayerBuilder, ExternalPlayer } from '@quickplay/player';
import { createLogger, LoggerLevel } from '@quickplay/foundation';

// Create video element
const videoElement = document.createElement('video');
videoElement.controls = true;
document.body.appendChild(videoElement);

// Create logger
const logger = createLogger(LoggerLevel.DEBUG, 'WebRTCExample');

// Configure and build WebRTC player
const playerBuilder = createJanusPlayerBuilder()
  .mediaElement(videoElement)
  .logger(logger)
  .janusServer('wss://your-janus-server.com/janus')
  .iceServers([
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'turn:your-turn-server.com', username: 'user', credential: 'pass' }
  ]);

const player = playerBuilder.build();

Basic Playback

The WebRTC player automatically connects to the first available stream when loaded, simplifying the streaming experience.

// Load and automatically connect to the first available stream
await player.load();

// Start playback
player.play();

Subscribe for events

The application can listen to events such as changes in player state, buffering state, progress updates, and playback errors.

player.subscribe('playbackstatechanged', (state) => {
  console.log('Playback state:', state);
  // States: 'idle', 'loading', 'loaded', 'started', 'paused'
});

player.subscribe('progressupdate', () => {
  console.log('Progress', player.currentEpochTime);
});

player.subscribe('bufferingstatechanged', (buffering) => {
  if (buffering) {
    console.log('Buffering started');
  } else {
    console.log('Buffering ended');
  }
});

player.subscribe('error', (error) => {
  console.error('Player error:', error);
});

Authentication

The WebRTC player supports multiple authentication methods for secure connections to Janus Gateway servers.

Token Authentication

const playerBuilder = createJanusPlayerBuilder()
  .mediaElement(videoElement)
  .logger(logger)
  .janusServer('wss://secure-janus.example.com/janus')
  .auth({
    method: 'token',
    token: 'your-jwt-token-here'
  });

Basic Authentication

const playerBuilder = createJanusPlayerBuilder()
  .mediaElement(videoElement)
  .logger(logger)
  .janusServer('wss://janus.example.com/janus')
  .auth({
    method: 'basic',
    username: 'your-username',
    password: 'your-password'
  });

Key differences

Streaming Characteristics

• Ultra-Low Latency: WebRTC enables sub-second latency streaming
• Live Only: Optimized for live streaming scenarios, no seeking support
• Automatic Stream Selection: Connects to first available stream automatically
• No DVR: Limited support for DVR functionality

Playback Configuration

The following playback configuration options are not supported on WebRTC Player:

• Seeking/scrubbing
• Bitrate selection
• Buffer configuration
• Trickplay (fast forward/rewind)

Error Handling

Handle WebRTC-specific errors for better user experience:

player.subscribe('error', (error) => {
  switch (error.code) {
    case 'JANUS_INIT_FAILURE':
      console.error('Failed to initialize Janus connection');
      break;
    case 'WEBRTC_CONNECTION_FAILURE':
      console.error('WebRTC connection failed - check network and ICE servers');
      break;
    case 'JANUS_PLUGIN_ATTACH_FAILURE':
      console.error('Failed to attach Janus streaming plugin');
      break;
    default:
      console.error('Unknown error:', error);
  }
});

Cleanup

Always properly stop and cleanup the WebRTC player to free resources:

// Stop and cleanup
await player.stop();