Video.js with P2P Media Loader

Question

Video.js with P2P Media Loader

matbcvo opened this issue 8 months ago · 0 comments

Hello

I have been trying to get P2P Media Loader work with Video.js player, but unsuccessfully. Trying to debug why P2P isn't working as intended. Maybe someone can check and see what's wrong with that.

Live: https://gaki-no-tsukai.stream/p2p-media-loader
Below is the code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video.js with P2P Media Loader</title>
    <link href="https://vjs.zencdn.net/8.12.0/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/8.12.0/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <!-- Import map for P2P Media Loader modules -->
    <script type="importmap">
        {
        "imports": {
          "p2p-media-loader-core": "https://cdn.jsdelivr.net/npm/p2p-media-loader-core@^1/dist/p2p-media-loader-core.es.min.js",
          "p2p-media-loader-hlsjs": "https://cdn.jsdelivr.net/npm/p2p-media-loader-hlsjs@^1/dist/p2p-media-loader-hlsjs.es.min.js"
        }
      }
    </script>
    <script type="module">
    import {
        HlsJsP2PEngine
    } from "p2p-media-loader-hlsjs";

    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM fully loaded and parsed');

        // Source URL
        var sourceUrl = 'https://hamada.gaki-no-tsukai.stream/hls/test.m3u8';

        // Initialize P2P Media Loader with tracker configuration and swarm ID
        console.log('Initializing P2P Media Loader');
        const HlsWithP2P = HlsJsP2PEngine.injectMixin(window.Hls);

        const hls = new HlsWithP2P({
            p2p: {
                loader: {
                    announceTrackers: [
                        'wss://tracker.novage.com.ua',
                        'wss://tracker.webtorrent.dev',
                        'wss://tracker.openwebtorrent.com'
                    ],
                    isP2PDisabled: false,
                    swarmId: sourceUrl // Set the swarm ID to the source URL
                },
                onHlsJsCreated(hls) {
                    hls.p2pEngine.addEventListener("onPeerConnect", (params) => {
                        console.log("Peer connected:", params.peerId);
                    });
                    hls.p2pEngine.addEventListener("onPeerClose", (params) => {
                        console.log("Peer disconnected:", params.peerId);
                    });
                    hls.p2pEngine.addEventListener("onSegmentLoaded", (params) => {
                        console.log("Segment loaded:", params);
                    });
                    hls.p2pEngine.addEventListener("onSegmentError", (params) => {
                        console.error("Error loading segment:", params);
                    });
                }
            }
        });

        const videoElement = document.querySelector("#video");
        hls.attachMedia(videoElement);
        hls.loadSource(sourceUrl);

        // Initialize Video.js
        var player = videojs('video', {
            controls: true,
            autoplay: false,
            preload: 'auto'
        });

        console.log('Video.js player initialized:', player);

        player.ready(function() {
            console.log('Player is ready');
            player.on('loadedmetadata', function() {
                console.log('Metadata loaded, starting video playback');
                // player.play();
            });

            player.on('error', function(e) {
                console.error('Video.js error:', e);
            });
        });
    });
    </script>
</head>

<body>
    <video id="video" class="video-js vjs-default-skin" controls width="640" height="360"></video>
</body>

</html>