Closed rahsabum closed 6 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>
Below is the code example: