Coder Social home page Coder Social logo

Comments (7)

mrlika avatar mrlika commented on June 16, 2024

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/[email protected]/build/p2p-media-loader-core.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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

from p2p-media-loader.

rahsabum avatar rahsabum commented on June 16, 2024

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 ?

from p2p-media-loader.

mrlika avatar mrlika commented on June 16, 2024

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

from p2p-media-loader.

rahsabum avatar rahsabum commented on June 16, 2024

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

from p2p-media-loader.

mrlika avatar mrlika commented on June 16, 2024

It works for me between chrome and firefox

from p2p-media-loader.

rahsabum avatar rahsabum commented on June 16, 2024

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

from p2p-media-loader.

mrlika avatar mrlika commented on June 16, 2024

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.

from p2p-media-loader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.