how to implement the new version?

t4tohd commented 4 months ago

Hello, I was using the old version and when I replaced the two updated libraries it no longer loads anything, I use clappr, the demo version in Novage does not load, I have used these libraries and they do not work for me: https://cdn.jsdelivr.net/npm/p2p-media-loader-core@1.0.3/dist/p2p-media-loader-core.es.min.js https://cdn.jsdelivr.net/npm/p2p-media-loader-hlsjs@1.0.3/dist/p2p-media-loader-hlsjs.es.min.js https://cdn.jsdelivr.net/npm/@clappr/player@~0/dist/clappr.min.js https://cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@~0/dist/level-selector.min.js

Could you update the guides to implement the new version .

    <style>
        #video {
            width: 720px;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
    </style>
     <div id="video"></div>
    <script>
        if (p2pml.hlsjs.Engine.isSupported()) {
            var engine = new p2pml.hlsjs.Engine();
            var player = new Clappr.Player({
                parentId: "#video",
                source: "https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8",
                playback: {
                    hlsjsConfig: {
                        liveSyncDurationCount: 7, // To have at least 7 segments in queue
                        loader: engine.createLoaderClass(),
                    },
                },
            });
            p2pml.hlsjs.initClapprPlayer(player);
            player.setVolume(1); // 1%
            player.play();
        } else {
            document.write("Not supported :(");
        }
    </script>

DimaDemchenko commented 4 months ago

Hello, @t4tohd

Thank you for submitting the issue. I'll review our demo and fix the problem with the Clappr player.

Regarding your implementation: We have rewritten the p2p-media-loader, and the previous version is not compatible with new one. Please refer to our p2p-media-loader Documentation to learn how to use and configure the new p2p loader.

Please take a look and feel free to provide us with feedback about the documentation. We would like to know if it was informative, clear to read, and if there is anything we should add for clarity.

Here is a very simple working example with Clappr player:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/@clappr/player@~0/dist/clappr.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@~0/dist/level-selector.min.js"
    ></script>

    <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>
  </head>
  <body>
    <style>
      #video {
        width: 720px;
        height: 480px;
        margin-left: auto;
        margin-right: auto;
        display: block;
      }
    </style>
    <div id="video"></div>

    <script type="module">
      import { HlsJsP2PEngine } from "p2p-media-loader-hlsjs";

      const streamUrl =
        "https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8";

      const engine = new HlsJsP2PEngine();

      const clapprPlayer = new Clappr.Player({
        source: streamUrl,
        plugins: [LevelSelector],
        height: "100%",
        width: "100%",
        parentId: `#video`,
        playback: {
          hlsjsConfig: {
            ...engine.getConfigForHlsJs(),
          },
        },
      });

      engine.bindHls(() => clapprPlayer.core.getCurrentPlayback()?._hls);

      clapprPlayer.setVolume(1);
    </script>
  </body>
</html>

stevenking888 commented 4 months ago

Any chance for JWplayer ?

mrlika commented 4 months ago

Our investigation shows that there is no good external hls.js provider for JWPlayer. Its built-in hls.js provider isn't configurable\patchable at all. Unfortunately, there is no good news...

jazz1611 commented 4 months ago

Our investigation shows that there is no good external hls.js provider for JWPlayer. Its built-in hls.js provider isn't configurable\patchable at all. Unfortunately, there is no good news...

hello, can you help you me implement the new version with PlayerJS ?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="none">
        <title>Video</title>
        <script src="/assets/js/jquery-3.6.0.min.js"></script>
        <script src="playerjs/assets/js/playerjs_default_19.10.5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p2p-media-loader-core@1.0.3/dist/p2p-media-loader-core.es.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p2p-media-loader-hlsjs@1.0.3/dist/p2p-media-loader-hlsjs.es.min.js"></script>
    <style>html,body{margin:0;padding:0;overflow:hidden;width:100%;height:100%}#video_player{width:100%;height:100%}</style>
    </head>
    <body>
        <div id="video_player"></div>
<script type="text/javascript">
        var Get_P2P = 0;
        if (Get_P2P && p2pml.hlsjs.Engine.isSupported()) {
            var engine = new p2pml.hlsjs.Engine({
                segments: {
                    swarmId: "xxxxxxxxx",
                },
                loader: {
                    trackerAnnounce: ["custom_tracker"],
                    // rtcConfig: {iceServers: [{urls: ["stun:stun.l.google.com:19302", "stun:global.stun.twilio.com:3478"]}]},
                    cachedSegmentExpiration: 86400000,
                    cachedSegmentsCount: 1000,
                    // requiredSegmentsPriority: 6,
                }
            });
        }
        var ID = "xxxxxxxxx";
        var player = new Playerjs({
            id: "video_player",
            file: "link.m3u8",
            poster: "link.jpg",
            subtitle_start: 1,
            subtitle: "",
            download: "",
            thumbnails: "link.vtt",
            autoplay: 0,
            lang: "en",
            hlsconfig: {
                loader: engine.createLoaderClass(),
            },
            default_audio: "English",
        });

    if (Get_P2P && p2pml.hlsjs.Engine.isSupported()) {
        p2pml.hlsjs.initHlsJsPlayer(player.api('hls'));
        var downloaded_total = 0;
        var downloaded = 0;
        engine.on('piece_bytes_downloaded', function (method, segment, bytes, peerId) {
            if(peerId){
                downloaded += bytes;
            }
            downloaded_total += bytes;
        });
        // setInterval(function(){ console.log('Download from P2P: ' + ((downloaded*100)/downloaded_total) + '%'); }, 5000);
    }
    </script>
    </body>
</html>

jazz1611 commented 4 months ago

@mrlika @DimaDemchenko hello, i found debug in console.log but i can't found wss tracker load in Network tab. what should i do?

    <script type="module">
    import { HlsJsP2PEngine } from "p2p-media-loader-hlsjs";
    var Get_P2P = 1;
    if (Get_P2P) {
        var hlsP2PEngine = new HlsJsP2PEngine({
            core: {
                swarmId: "8XZVWVH2uyqN",
                announceTrackers: ["wss://custom1", "wss://custom2"],
            }
        });
    }
    var player = new Playerjs({
    ....
        hlsconfig: {
            ...hlsP2PEngine.getConfigForHlsJs(),
        },
    });
    .....
    hlsP2PEngine.bindHls(() => player.api('hls'));
    </script>

DimaDemchenko commented 4 months ago

@jazz1611 I'm currently looking into your issue with implementing P2P in PlayerJS and will give you an update soon.

jazz1611 commented 4 months ago

@jazz1611 I'm currently looking into your issue with implementing P2P in PlayerJS and will give you an update soon.

thank you for support. this is PlayerJS library have included HLS.js library too. you can rely on the HTML sample above to make PlayerJS work.

<script src="https://cdn.plrjs.com/player/ttd5tyt396tfa/nnszdu40osmd.js"></script>

DimaDemchenko commented 4 months ago

@jazz1611 So, here is the update on your situation. I used a different method to implement P2P with PlayerJS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Playerjs</title>
    <script src="playerjs.js"></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>
  </head>
  <body>
    <div id="player"></div>

    <script type="module">
      import { HlsJsP2PEngine } from "p2p-media-loader-hlsjs";

      window.Hls = HlsJsP2PEngine.injectMixin(window.Hls);

      function initPlayer() {
        const player = new Playerjs({
          id: "player",
          hlsconfig: {
            // Hls.js config parameters go here
            p2p: {
              core: {
                swarmId: "Optional custom swarm ID for stream",
                // Other P2P engine config parameters go here
              },
              onHlsJsCreated: (hls) => {
                // Subscribe to P2P engine and Hls.js events here
                hls.p2pEngine.addEventListener("onPeerConnect", (details) => {
                  console.log(`Connected to peer ${details.peerId})`);
                });
              },
            },
          },
        });
      }

      document.addEventListener("DOMContentLoaded", initPlayer);
    </script>
  </body>
</html>

DimaDemchenko commented 4 months ago

@jazz1611 I tried to run your code and it seems like it works. However, I ran it with my PlayerJS (with the HLS module enabled) because I couldn't load your script for some reason.

jazz1611 commented 4 months ago

@DimaDemchenko hello, i just make some test and it still work when use only PlayerJS library have included HLS.js library (no need external url load from hls.js)

there is what is changed. i will make test with VideoJS soon. thank you so much.

test online: https://jsfiddle.net/nmgsr79o/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="none">
    <title>Video</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.plrjs.com/player/ttd5tyt396tfa/nnszdu40osmd.js"></script>
    <script type="importmap"> {
        "imports": {
            "p2p-media-loader-core": "https://cdn.jsdelivr.net/npm/p2p-media-loader-core@latest/dist/p2p-media-loader-core.es.js",
            "p2p-media-loader-hlsjs": "https://cdn.jsdelivr.net/npm/p2p-media-loader-hlsjs@latest/dist/p2p-media-loader-hlsjs.es.js"
        }
    }
    </script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100%;
        height: 100%
      }

      #video_player {
        width: 100%;
        height: 100%
      }
    </style>
  </head>
  <body>
    <div id="video_player"></div>
    <script type="module">
      import {
        HlsJsP2PEngine
      } from "p2p-media-loader-hlsjs";
      window.Hls = HlsJsP2PEngine.injectMixin(window.Hls);
      var downloaded = 0;
      var downloaded_total = 0;
      var ID = "xxxxxxxxx";
      var player = new Playerjs({
        id: "video_player",
        file: "https://flipfit-cdn.akamaized.net/flip_hls/6656423247ffe600199e8363-15125d/video_h1.m3u8",
        poster: "link.jpg",
        subtitle_start: 1,
        subtitle: "",
        download: "",
        thumbnails: "link.vtt",
        autoplay: 0,
        lang: "en",
        hlsconfig: {
          p2p: {
            core: {
              swarmId: "xxxxxxxxx",
            },
            onHlsJsCreated: (hls) => {
              // Subscribe to P2P engine and Hls.js events here
              hls.p2pEngine.addEventListener("onPeerConnect", (details) => {
                console.log(`Connected to peer ${details.peerId})`);
              });
              hls.p2pEngine.addEventListener('onChunkDownloaded', (bytesLength, downloadSource, peerId) => {
                console.log(`Downloaded ${bytesLength} bytes from ${downloadSource} ${peerId ? 'from peer ' + peerId : 'from server'}`);
                if (peerId) {
                  downloaded += bytesLength;
                }
                downloaded_total += bytesLength;
              });
            },
          },
        },
        default_audio: "English",
      });
    </script>
  </body>
</html>

jazz1611 commented 4 months ago

@jazz1611 I tried to run your code and it seems like it works. However, I ran it with my PlayerJS (with the HLS module enabled) because I couldn't load your script for some reason.

I have updated the exact URL so you can test online (https://jsfiddle.net/nmgsr79o/). I don't enable HLS version in PlayerJS (by default PlayerJS always adds it in its own library) I have set up P2P-Media-Loader's default tracker. Please try and let me know the results

Another problem is that if I open 2 tabs at the same time, in JSFiddle's Console and also in the browser, it returns results continuously causing the browser to crash... I'm pretty sure P2P is working but is there a bug in the console?

DimaDemchenko commented 4 months ago

@jazz1611 I'm not responsible for JSFiddle lags. I tested provided code locally and it works

jazz1611 commented 4 months ago

@DimaDemchenko What I mean is that it returns results in the console continuously, right? Because if only one tab is opened, it returns the correct loading results from HTTP. If there is a peer, it returns results continuously.

DimaDemchenko commented 4 months ago

@jazz1611 I probably understand what you mean. If there are no peers in the network, you will only download high-demand segments (15 seconds by default). If there are peers in the network, they will try to download segments within the p2pDownloadTimeWindow and httpDownloadTimeWindow. That's why you see a lot of download / upload logs. Check the stream config documentation, we described those parameters here

jazz1611 commented 4 months ago

@DimaDemchenko i found the script hls.js plugin with latest version for VideoJS and i do config similar from PlayerJS to VideoJS but it not work. can help you me to check it?

Source: https://www.nuevodevel.com/nuevo/showcase/hlsjs Script: https://jsfiddle.net/a3zdv1tn/

P/s: also any chance i can run p2p library in html page with inside . which type="module" some my code not work. and im not expert with Javascript code

stevenking888 commented 4 months ago

I didn't try version 1.0.3 yet I try previous release and found problem with iPad OS with Apple CPU M series. Can you all share me your experience about this device with version 1.0.3.

DimaDemchenko commented 4 months ago

@stevenking888, we are experiencing problems with Safari. I'm currently working on version 1.0.4, which might fix these issues.

Novage / p2p-media-loader

how to implement the new version? #388