Novage / p2p-media-loader

An open-source engine for P2P streaming of live and on demand video directly in a web browser HTML page
https://novage.com.ua/p2p-media-loader/demo.html
Apache License 2.0
1.45k stars 314 forks source link

Video.js with P2P Media Loader #391

Closed matbcvo closed 4 months ago

matbcvo commented 4 months ago

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>