How to configure HLS in version 2.x

[myikaros2]

How to configure HLS in version 2.x, it seems there is no related documentation.
I tried setting it up:

const hls = new HlsWithP2P({
        maxBufferLength: 60,
        
        p2p: p2pConfig,
});

But it did not take effect.
Are there any documents I might have missed? Thanks in advance.

[bluchip-studio-official]

i am having issues setting this up as well this is my player.js file

`/**

• Video Player with HLS and P2P Support
• Uses hls.js and p2p-media-loader
  */

import { HlsJsP2PEngine as Engine } from 'p2p-media-loader-hlsjs';

export class VideoPlayer {
constructor(videoElement, options = {}) {
this.video = videoElement;
this.options = {
autoplay: true,
muted: false,
volume: 0.8,
showControls: true,
p2pEnabled: true,
...options
};

    this.hls = null;
    this.currentUrl = null;
    this.isPlaying = false;
    this.isMuted = false;
    this.volume = this.options.volume;
    this.prerollAd = null;
    this.adsEnabled = false;

    this.init();
}

/**
 * Initialize player
 */
init() {
    // Set initial properties
    this.video.volume = this.volume;
    this.video.muted = this.options.muted;

    // Setup event listeners
    this.setupEventListeners();

    // Setup controls
    if (this.options.showControls) {
        this.setupControls();
    }

    console.log('Video player initialized');
}

/**
 * Setup video event listeners
 */
setupEventListeners() {
    this.video.addEventListener('play', () => {
        this.isPlaying = true;
        this.updatePlayButton();
        console.log('Playback started');
    });

    this.video.addEventListener('pause', () => {
        this.isPlaying = false;
        this.updatePlayButton();
        console.log('Playback paused');
    });

    this.video.addEventListener('volumechange', () => {
        this.volume = this.video.volume;
        this.isMuted = this.video.muted;
        this.updateVolumeUI();
    });

    this.video.addEventListener('error', (e) => {
        console.error('Video error:', e);
        this.handleError(e);
    });

    this.video.addEventListener('waiting', () => {
        this.showLoading();
    });

    this.video.addEventListener('canplay', () => {
        this.hideLoading();
    });
}

/**
 * Setup custom controls
 */
setupControls() {
    const container = this.video.parentElement;
    if (!container) return;

    // Create controls container
    const controls = document.createElement('div');
    controls.className = 'video-controls';
    controls.innerHTML = `
        <div class="controls-wrapper">
            <button class="control-btn play-pause" title="Play/Pause">
                <svg class="play-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M8 5v14l11-7z"/>
                </svg>
                <svg class="pause-icon hidden" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
                </svg>
            </button>

            <div class="volume-control">
                <button class="control-btn volume-btn" title="Mute/Unmute">
                    <svg class="volume-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
                    </svg>
                    <svg class="muted-icon hidden" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
                    </svg>
                </button>
                <input type="range" class="volume-slider" min="0" max="100" value="80"/>
            </div>

            <div class="time-display">
                <span class="current-time">0:00</span>
                <span>/</span>
                <span class="duration">0:00</span>
            </div>

            <div class="spacer"></div>

            <button class="control-btn fullscreen-btn" title="Fullscreen">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
                </svg>
            </button>
        </div>
    `;

    container.appendChild(controls);

    // Attach control event listeners
    this.attachControlListeners(controls);

    // Auto-hide controls
    this.setupControlsAutoHide(container);
}

/**
 * Attach control button listeners
 */
attachControlListeners(controls) {
    const playPauseBtn = controls.querySelector('.play-pause');
    const volumeBtn = controls.querySelector('.volume-btn');
    const volumeSlider = controls.querySelector('.volume-slider');
    const fullscreenBtn = controls.querySelector('.fullscreen-btn');

    playPauseBtn?.addEventListener('click', () => this.togglePlayPause());
    volumeBtn?.addEventListener('click', () => this.toggleMute());
    volumeSlider?.addEventListener('input', (e) => this.setVolume(e.target.value / 100));
    fullscreenBtn?.addEventListener('click', () => this.toggleFullscreen());
}

/**
 * Setup controls auto-hide
 */
setupControlsAutoHide(container) {
    let hideTimeout;

    const showControls = () => {
        container.classList.add('show-controls');
        clearTimeout(hideTimeout);
        hideTimeout = setTimeout(() => {
            if (this.isPlaying) {
                container.classList.remove('show-controls');
            }
        }, 3000);
    };

    container.addEventListener('mousemove', showControls);
    container.addEventListener('touchstart', showControls);
}

/**
 * Load HLS stream
 */
/**
 * Load HLS stream
 */
loadStream(url, channelId = null, prerollAdUrl = null) {
    console.log('Loading stream:', url, 'Channel ID:', channelId);
    this.currentUrl = url;
    this.currentChannelId = channelId;

    // Play pre-roll ad first if enabled
    if (prerollAdUrl && this.adsEnabled) {
        this.playPrerollAd(prerollAdUrl, () => {
            this.loadHLSStream(url, channelId);
        });
    } else {
        this.loadHLSStream(url, channelId);
    }
}

/**
 * Load HLS stream with P2P support
 */
loadHLSStream(url, channelId) {
    console.log('Reinitializing player for new stream');

    if (!Hls.isSupported()) {
        // Fallback for browsers that support HLS natively (Safari)
        if (this.video.canPlayType('application/vnd.apple.mpegurl')) {
            this.video.src = url;
            this.play();
        } else {
            console.error('HLS is not supported');
            this.showError('Your browser does not support HLS streaming');
        }
        return;
    }

    // Destroy previous HLS instance FIRST (per HLS.js docs)
    if (this.hls) {
        console.log('Destroying previous HLS instance');
        this.hls.destroy();
        this.hls = null;
    }

    // Then reset video element
    console.log('Resetting video element');
    this.video.pause();
    this.video.removeAttribute('src');
    this.video.load();

    // Reset player state
    this.isPlaying = false;
    this.updatePlayButton();

    console.log('Player ready - creating new HLS instance');

    // Default HLS configuration
    let hlsConfig = {
        debug: false,
        enableWorker: true,
        lowLatencyMode: true,
        backBufferLength: 90
    };

    // Use injectMixin for P2P support if enabled
    let HlsClass = Hls;
    if (this.options.p2pEnabled && Engine) {
        if (!Hls.engine) {
            HlsClass = Engine.injectMixin(Hls);
        }
    }

    // Setup P2P configuration if enabled
    if (this.options.p2pEnabled) {
        hlsConfig.p2p = {
            core: {
                announceTrackers: [
                    "wss://us-tracker1.peerhub.net",
                    "wss://ca-tracker1.peerhub.net",
                    "wss://uk-tracker1.peerhub.net",
                    "wss://ge-tracker1.peerhub.net",
                    "wss://tracker.novage.com.ua",
                    "wss://tracker.webtorrent.dev",
                    "wss://tracker.openwebtorrent.com"
                ],
                swarmId: channelId ? `channel-${channelId}` : url,
                validateHTTPSegment: async (url, byteRange, data) => {
                    console.log('[P2P Validation] Checking segment size:', data.byteLength);
                    if (data.byteLength < 50 * 1024) {
                        console.warn('[P2P Validation] Rejecting small segment:', data.byteLength);
                        return false;
                    }
                    return true;
                },
                mainStream: {
                    validateHTTPSegment: async (url, byteRange, data) => {
                        console.log('[P2P Validation] Checking segment size (mainStream):', data.byteLength);
                        if (data.byteLength < 50 * 1024) {
                            console.warn('[P2P Validation] Rejecting small segment:', data.byteLength);
                            return false;
                        }
                        return true;
                    }
                }
            },
            onHlsJsCreated: (hls) => {
                this.p2pEngine = hls.p2pEngine;
                console.log('[P2P] Engine initialized via mixin');
                console.log('[P2P] Configured with Swarm ID:', hlsConfig.p2p.core.swarmId);

                // Setup peer tracking
                this.peerCount = 0;
                const updateStats = () => {
                    if (this.onP2PStats) {
                        this.onP2PStats({ enabled: true, peers: this.peerCount });
                    }
                };
                updateStats();

                // Listen to P2P events
                this.p2pEngine.addEventListener('onPeerConnect', (peer) => {
                    console.log('[P2P] Peer Connected:', peer.peerId);
                    this.peerCount++;
                    updateStats();
                });

                this.p2pEngine.addEventListener('onPeerClose', (peer) => {
                    console.log('[P2P] Peer Disconnected:', peer.peerId);
                    this.peerCount = Math.max(0, this.peerCount - 1);
                    updateStats();
                });

                // Debug logging
                const logEvent = (name, ...args) => console.log(`[P2P Event] ${name}:`, ...args);
                this.p2pEngine.addEventListener('onSegmentLoaded', (details) => {
                    if (details?.segment?.url) {
                        logEvent('onSegmentLoaded', details.segment.url);
                    }
                });
                this.p2pEngine.addEventListener('onChunkDownloaded', (bytesLength, downloadSource, peerId) => {
                    const source = downloadSource === 'p2p' ? `Peer ${peerId}` : 'HTTP Server';
                    logEvent('onChunkDownloaded', bytesLength, source);
                });
                this.p2pEngine.addEventListener('onChunkUploaded', (bytesLength, peerId) => logEvent('onChunkUploaded', bytesLength, `to Peer ${peerId}`));
                this.p2pEngine.addEventListener('onTrackerError', (error) => console.log('[P2P Tracker Error] (non-fatal):', error));
                // this.p2pEngine.addEventListener('onTrackerWarning', (warning) => console.warn('[P2P Tracker Warning]:', warning));
            }
        };
    } else {
        // ... existing fallback ...
    }

    // Initialize HLS with potentially augmented class
    this.hls = new HlsClass(hlsConfig);

    // ... rest of initialization ...





    // Attach to video element
    this.hls.attachMedia(this.video);

    // Load source
    this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
        this.hls.loadSource(url);
    });

    // Auto-play when manifest is parsed
    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
        if (this.options.autoplay) {
            this.play();
        }
    });

    // Error handling
    this.hls.on(Hls.Events.ERROR, (event, data) => {
        console.error('HLS error:', JSON.stringify(data, null, 2));
        this.handleHLSError(data);
    });
}

/**
 * Play pre-roll ad
 */
playPrerollAd(adUrl, callback) {
    console.log('Playing pre-roll ad:', adUrl);

    // Save main content URL
    const contentUrl = this.currentUrl;

    // Load ad video
    this.video.src = adUrl;
    this.video.play();

    // Show ad indicator
    this.showAdIndicator();

    // When ad ends, load main content
    this.video.addEventListener('ended', () => {
        this.hideAdIndicator();
        callback();
    }, { once: true });

    // Skip ad button (optional - after 5 seconds)
    setTimeout(() => {
        this.showSkipAdButton(() => {
            this.video.pause();
            this.video.currentTime = this.video.duration; // Jump to end
        });
    }, 5000);
}

/**
 * Play/Pause toggle
 */
togglePlayPause() {
    if (this.isPlaying) {
        this.pause();
    } else {
        this.play();
    }
}

/**
 * Play video
 */
async play() {
    try {
        await this.video.play();
        console.log('Playing');
    } catch (error) {
        console.error('Play error:', error);
        // If autoplay blocked, show play button
        if (error.name === 'NotAllowedError') {
            console.warn('Autoplay blocked. User interaction required.');
        }
    }
}

/**
 * Pause video
 */
pause() {
    this.video.pause();
    console.log('Paused');
}

/**
 * Toggle mute
 */
toggleMute() {
    this.video.muted = !this.video.muted;
}

/**
 * Set volume (0-1)
 */
setVolume(volume) {
    this.video.volume = Math.max(0, Math.min(1, volume));
}

/**
 * Toggle fullscreen
 */
toggleFullscreen() {
    const container = this.video.parentElement;

    if (!document.fullscreenElement) {
        container.requestFullscreen?.() ||
            container.webkitRequestFullscreen?.() ||
            container.mozRequestFullScreen?.() ||
            container.msRequestFullscreen?.();
    } else {
        document.exitFullscreen?.() ||
            document.webkitExitFullscreen?.() ||
            document.mozCancelFullScreen?.() ||
            document.msExitFullscreen?.();
    }
}

/**
 * Update play/pause button
 */
updatePlayButton() {
    const playIcon = document.querySelector('.play-icon');
    const pauseIcon = document.querySelector('.pause-icon');

    if (this.isPlaying) {
        playIcon?.classList.add('hidden');
        pauseIcon?.classList.remove('hidden');
    } else {
        playIcon?.classList.remove('hidden');
        pauseIcon?.classList.add('hidden');
    }
}

/**
 * Update volume UI
 */
updateVolumeUI() {
    const volumeIcon = document.querySelector('.volume-icon');
    const mutedIcon = document.querySelector('.muted-icon');
    const volumeSlider = document.querySelector('.volume-slider');

    if (this.isMuted || this.volume === 0) {
        volumeIcon?.classList.add('hidden');
        mutedIcon?.classList.remove('hidden');
    } else {
        volumeIcon?.classList.remove('hidden');
        mutedIcon?.classList.add('hidden');
    }

    if (volumeSlider) {
        volumeSlider.value = this.volume * 100;
    }
}

/**
 * Show loading indicator
 */
showLoading() {
    console.log('Loading...');
    // TODO: Show loading spinner
}

/**
 * Hide loading indicator
 */
hideLoading() {
    console.log('Loaded');
    // TODO: Hide loading spinner
}

/**
 * Show ad indicator
 */
showAdIndicator() {
    // TODO: Show "Advertisement" label
}

/**
 * Hide ad indicator
 */
hideAdIndicator() {
    // TODO: Hide "Advertisement" label
}

/**
 * Show skip ad button
 */
showSkipAdButton(callback) {
    // TODO: Show skip button
}

/**
 * Handle HLS errors
 */
handleHLSError(data) {
    if (data.fatal) {
        switch (data.type) {
            case Hls.ErrorTypes.NETWORK_ERROR:
                console.error('Fatal network error, trying to recover');
                this.hls.startLoad();
                break;
            case Hls.ErrorTypes.MEDIA_ERROR:
                console.error('Fatal media error, trying to recover');
                this.hls.recoverMediaError();
                break;
            default:
                if (data.details === 'internalException') {
                    console.warn('Fatal internal exception, attempting to recover...');
                    this.hls.recoverMediaError();
                    // Alternatively: this.hls.startLoad();
                    break;
                }
                console.error('Fatal error, cannot recover');
                this.showError('Streaming error occurred');
                this.hls.destroy();
                break;
        }
    }
}

/**
 * Handle generic errors
 */
handleError(error) {
    console.error('Player error:', error);
    this.showError('An error occurred during playback');
}

/**
 * Show error message
 */
showError(message) {
    // TODO: Show user-friendly error message
    console.error(message);
}

/**
 * Destroy player
 */
destroy() {
    if (this.hls) {
        this.hls.destroy();
        this.hls = null;
    }

    this.video.src = '';
    this.video.load();

    console.log('Player destroyed');
}

}

// Export for use
window.VideoPlayer = VideoPlayer;
`

the page loads it says p2p enabled and o peers the live stream plays perfect no errors but the second i open a new tab and try play the same stream it shows there is now 1 peer connected then it throws an error about the media segment having no media or what ever but again the same stream is still running perfect in the other tab and in vlc then it fisconnects the peer shows failed to connect to trackers and then goes back to plain http streaming wvere again its now works perfectly fine i feel like i am doing something wrong but i can not see what exactly

[myikaros2]

This issue of multiple tabs conflict frequently occurs, but it should not be related to HLS, because the same problem occurs when using WebTorrent. I suspect it might be related to WebRTC;

My current issue is that even after setting HLS-related parameters, such as maxBufferLength: 60, the video still loads only a very short time forward (much less than 60 seconds)

[BluchipStudio]

This issue of multiple tabs conflict frequently occurs, but it should not be related to HLS, because the same problem occurs when using WebTorrent. I suspect it might be related to WebRTC;

My current issue is that even after setting HLS-related parameters, such as maxBufferLength: 60, the video still loads only a very short time forward (much less than 60 seconds)

Do you have your player code on a GitHub repo so we can see the full setup ?