search

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.41k stars 311 forks source link

Working on firefox and old chrome browsers but not working with latest versions of chrome please help. #308

Closed rahsabum closed 6 months ago

rahsabum commented 11 months ago

Hello,

I have configured it with Clappr and also tried videojs please help it's not working on the latest version of Chrome please check.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Clappr/Hls.js with P2P Media Loader</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/p2p-media-loader-core@0.6.2/build/p2p-media-loader-core.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p2p-media-loader-hlsjs@0.6.2/build/p2p-media-loader-hlsjs.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.js"></script>
</head>
<body>
    <div id="player"></div>
    <script>
        if (p2pml.hlsjs.Engine.isSupported()) {
            const config = {
              segments:{
                swarmId: "http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8" // any unique string
              },
              loader:{
              trackerAnnounce: [
                "wss://us-tracker1.peerhub.net",
                "wss://ca-tracker1.peerhub.net",
                "wss://uk-tracker1.peerhub.net",
                "wss://ge-tracker1.peerhub.net",
                "wss://tracker.webtorrent.dev",
                "wss://tracker.files.fm:7073/announce"
                ]
              },
              rtcConfig: {
              iceServers: [
                {urls: "stun:stun.internetcalls.com:3478"},
                {urls: "stun:stun.voipcheap.com:3478"},
                {urls: "stun:stun.counterpath.com:3478"},
                {urls: "stun:stun.nextcloud.com:443"},
                {urls: "stun:stun.bcs2005.net:3478"},
                {urls: "stun:stun.poetamatusel.org:3478"},
                {urls: "stun:stun.teliax.com:3478"},
                {urls: "stun:stun.bridesbay.com:3478"},
                {urls: "stun:stun.dls.net:3478"},
                {urls: "stun:stun.radiojar.com:3478"}
              ]
            }
            };

            var engine = new p2pml.hlsjs.Engine(config);
            engine.on("peer_connect", peer => console.log("peer_connect", peer.id, peer.remoteAddress));
            engine.on("peer_close", peerId => console.log("peer_close", peerId));
            engine.on("segment_loaded", (segment, peerId) => console.log("segment_loaded from", peerId ? `peer ${peerId}` : "HTTP", segment.url));

            var player = new Clappr.Player({
                parentId: "#player",
                source: "http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8",
                mute: false,
                autoPlay: true,
                playback: {
                    hlsjsConfig: {
                        liveSyncDurationCount: 7,
                        loader: engine.createLoaderClass()
                    }
                }
            });

            p2pml.hlsjs.initClapprPlayer(player);
        } else {
            document.write("Not supported :(");
        }
    </script>
</body>
</html>
mrlika commented 11 months ago

This works in Chrome. You can start from here:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Clappr/Hls.js with P2P Media Loader</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/p2p-media-loader-core@0.6.2/build/p2p-media-loader-core.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p2p-media-loader-hlsjs@0.6.2/build/p2p-media-loader-hlsjs.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.js"></script>
</head>
<body>
    <div id="player"></div>
    <script>
        if (p2pml.hlsjs.Engine.isSupported()) {
            const config = {
              loader:{
              rtcConfig: {
                iceServers: [
                            {
                                urls: ["stun:stun.l.google.com:19302", "stun:global.stun.twilio.com:3478"]
                            }
                        ],
                }
            }
            };

            var engine = new p2pml.hlsjs.Engine(config);
            engine.on("peer_connect", peer => console.log("peer_connect", peer.id, peer.remoteAddress));
            engine.on("peer_close", peerId => console.log("peer_close", peerId));
            engine.on("segment_loaded", (segment, peerId) => console.log("segment_loaded from", peerId ? `peer ${peerId}` : "HTTP", segment.url));

            var player = new Clappr.Player({
                parentId: "#player",
                source: "http://sample.vodobox.net/skate_phantom_flex_4k/low/skate_phantom_flex_4k_228_144p.m3u8",
                mute: false,
                autoPlay: true,
                playback: {
                    hlsjsConfig: {
                        liveSyncDurationCount: 7,
                        loader: engine.createLoaderClass()
                    }
                }
            });

            p2pml.hlsjs.initClapprPlayer(player);
        } else {
            document.write("Not supported :(");
        }
    </script>
</body>
</html>

I use single quality to test: http://sample.vodobox.net/skate_phantom_flex_4k/low/skate_phantom_flex_4k_228_144p.m3u8

rahsabum commented 11 months ago

Thank you so much :) @mrlika working fine in Chrome now only problem is peers are not connecting cross-browser for example only connecting with Chrome peers and Firefox only connecting with Firefox peers. Anyone knows the solution ?

mrlika commented 11 months ago

It doesn't depend on JavaScript code. All the popular browsers that support this technology can connect with each other: Firefox, Chrome, Safari, Edge on Windows, Linux, macOS, iPadOS, Android

rahsabum commented 11 months ago

Dear please try above code that you shared open one instance in chrome and one in firefox and see if they both connect? In my case they are not connecting. Also please can you guide how to set turn server in above code any example turn server Thank you

mrlika commented 11 months ago

It works for me between chrome and firefox

rahsabum commented 11 months ago

Okay, I will try again can you please guide how to set turn servers in the above configuration?

mrlika commented 11 months ago

It makes no sense to add TURN servers. TURN server is a relay that is not needed because there is always an HTTP video stream source exists.

A dedicated WebTorrent Tracker should be configured for production usage to not depend on public ones. For privacy reasons, a personal STUN server may also be configured.