FadCam Video Segment Auto-Splitting: Code Examples and Implementation Guide

FadCam automatically splits video into 2-second HLS segments using the HlsService class with hls.js, requiring no manual slicing code while supporting encrypted fragments via FadCamFragLoader.

The FadCam open-source repository implements automatic video segment splitting through HTTP Live Streaming (HLS) technology. This feature eliminates the need for manual video slicing by leveraging the hls.js library to handle segment boundaries, decryption, and buffer management automatically. Understanding how to implement FadCam video segment auto-splitting enables developers to build robust streaming applications with minimal configuration.

How FadCam Auto-Splitting Works

The architecture relies on HLS (HTTP Live Streaming) to divide source video into 2-second transport-stream segments automatically. The core logic resides in HlsService, which orchestrates the player instance and manages segment-related events.

When initialized, the service creates an HLS.js instance configured for cloud-mode authentication. It attaches the custom FadCamFragLoader to handle end-to-end decryption of encrypted segments. The system reacts to three primary events:

• FRAG_LOADED – Emitted each time a media fragment (*.m4s) downloads successfully
• INIT_SEGMENT – Handles the initialization segment (never encrypted)
• LEVEL_LOADED – Refreshes the live playlist and detects stale segments

Key Implementation Files

The auto-splitting functionality spans several critical files in the repository:

• app/src/main/assets/web/js/services/HlsService.js – Main wrapper that creates the HLS player, configures authentication via _getHlsConfig, and processes segment events through setupHlsListeners
• app/src/main/assets/web/js/services/FadCamFragLoader.js – Custom fragment loader implementing decryptSegment for processing encrypted ArrayBuffer payloads
• app/src/main/assets/web/js/config.js – Contains HLS-specific configuration values including segment duration and latency windows
• app/src/main/assets/web/js/fadcam-remote.js – Provides cloud-mode token management and authentication helpers

Code Examples for FadCam Video Segment Auto-Splitting

Initializing the HlsService

To enable auto-splitting, instantiate the HlsService class and optionally listen for fragment loading events:

import HlsService from './js/services/HlsService.js';

const hlsService = new HlsService();

// React to each loaded segment
hlsService.on('fragment', data => {
  console.log('Segment', data.frag.sn, 'ready – duration', data.frag.duration);
});

Loading a Live HLS Stream

The load method automatically begins fetching and splitting segments:

const videoEl = document.getElementById('liveVideo');
const playlistUrl = 'https://live.fadseclab.com/stream/xyz.m3u8';

hlsService.load(playlistUrl, videoEl);

// Start playback once manifest parses
hlsService.on('ready', () => videoEl.play());

Cloud-Mode Authentication

When using encrypted streams, the service automatically injects authentication tokens via the xhrSetup configuration in _getHlsConfig:

import FadCamRemote from './js/fadcam-remote.js';

FadCamRemote.login('user', 'pwd').then(() => {
  // Token automatically injected via xhrSetup
  hlsService.reloadStream();
});

Manual Live Edge Seeking

While the service auto-seeks when latency exceeds 60 seconds, you can force a live edge jump:

document.getElementById('goLiveBtn').addEventListener('click', () => {
  if (hlsService.seekToLive()) {
    console.log('Jumped to live edge');
  }
});

Event-Driven Segment Processing

The setupHlsListeners method in HlsService implements the core auto-splitting logic through event handlers.

For each fragment download, the FRAG_LOADED listener extracts the segment number (data.frag.sn) and duration, then emits a fragment event for UI updates. The LEVEL_LOADED handler monitors playback latency; when values exceed 60 seconds, it forces a seek to the live edge to prevent buffer exhaustion.

The custom FadCamFragLoader processes encrypted segments through its decryptSegment method, transforming raw ArrayBuffer data into clear payloads before they reach the media source buffer. The loader attaches automatically via baseConfig.fLoader = FadCamFragLoader when available.

Summary

• FadCam implements automatic segment splitting via HLS and hls.js, creating 2-second transport-stream fragments without manual intervention
• The HlsService class manages player initialization, authentication configuration via _getHlsConfig, and segment event handling through setupHlsListeners
• FadCamFragLoader provides transparent decryption of encrypted segments during the loading process
• Event listeners for FRAG_LOADED, INIT_SEGMENT, and LEVEL_LOADED enable real-time tracking and latency management
• Cloud-mode authentication automatically injects tokens through the xhrSetup configuration property, rewriting request URLs to include stream tokens and cache-busting timestamps

Frequently Asked Questions

How does FadCam handle encrypted video segments?

FadCam processes encrypted segments through the custom FadCamFragLoader class. This loader intercepts fragment downloads and applies the decryptSegment method to raw ArrayBuffer data before passing cleartext payloads to the media source. The loader attaches automatically when baseConfig.fLoader is set in HlsService._getHlsConfig.

What triggers automatic segment splitting in FadCam?

The hls.js library handles segment boundaries based on the HLS playlist manifest. FadCam configures this through HlsService to produce 2-second transport-stream segments automatically. The FRAG_LOADED event fires each time a new *.m4s fragment downloads, indicating the completion of another segment split without requiring manual slicing logic.

How does FadCam manage live streaming latency?

The LEVEL_LOADED event listener in HlsService.setupHlsListeners monitors playback latency continuously. When latency exceeds 60 seconds, the service automatically forces a seek to the live edge. Developers can also trigger this manually via the seekToLive() method for immediate synchronization.

Where is the segment duration configured in FadCam?

Segment duration values reside in app/src/main/assets/web/js/config.js, which stores HLS-specific parameters including segment length and latency windows. The 2-second default aligns with standard HLS practices for low-latency streaming applications.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}