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

Peers are not connecting cross-browser for example chrome peers only connecting with Chrome peers and Firefox only connecting with Firefox peers. Anyone knows the solution ? #309

Closed rahsabum closed 6 months ago

rahsabum commented 11 months ago

Below is the code example:

<!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>