Novage/p2p-media-loader

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

Closed this issue · 7 comments

rahsabum commented

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

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

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

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

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

It works for me between chrome and firefox

rahsabum commented

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

mrlika commented

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.