Skip to content

Commit c3872d9

Browse files
Feat/docs (#362)
* hls clappr & dplayer * vime player * plyr player * plyr instance * openPlayer * added opt groups in playback options * shaka player * separated player's props * shaka DPlayer * Shaka Clappr * Clappr declaration * Add PlayerEvents type * Plyr imporvements * OpenPlayer improvements * Simplified hls configuration with getConfiguredHlsInstance * simplified shakaP2PEngine configuration * mediaelement test * simplified render func * shaka import improvements * fixed playback options * Clappr shakaP2PEngine * shaka Plyr * p2p engine destroy * refactored HLS integration in players * hls mediaElement player container * configure shaka events * Plyr improvements * remove window.Hls on cleanup * refactored cleanup logic for openPlayer * small adjustments * small adjustments * MediaElement bug fixed * shaka improvements * clappr styles * shaka clappr * type declaration * global declaration * fixed type errors * Add HLS & shaka support check and error message for unsupported browsers * Refactor useQueryParams hook to improve readability and performance * add custom quality selector for hlsjs player * Fix select-container alignment issue in Hlsjs.css * removed redundant code * Add playsInline attribute to video elements in players * test vime with mp4 * Add vidstack player * Update HLS provider library * Improve types * simplified vidstack player setup * p2p config improvements * fix type error * changed default player * added debug mode from query params * Removed Vime player since it will be deprecated * fixed naming * jsdoc * refactor types * add typedoc configuration for p2p-media-loader packages * add typedoc configuration for p2p-media-loader packages * added plugin for typedoc * updated main README file * Improved core config jsdoc * main readme files improvements * typedoc config * add docs to gitignore * jsdoc improvements * updated applyDynamicConfig method parameter types in HlsJsP2PEngine and ShakaP2PEngine * updated video players to autoplay and mute by default * updated video player styles for better aspect ratio control * updated HlsjsClapprPlayer initialization in engine.ts * removed member visibility section * api doc * refactor: Shaka player initialization and video container handling * updated with new player examples * refactored video player initialization and container handling * improved readability * updated API documentation link in README.md * small fix in api docs * api docs improvements * improved scrollbar styling in typedoc * Improve video player initialization and container handling * Add error logging for player initialization in HlsjsOpenPlayer and ShakaPlyr * Removed categorizeByGroup from typedoc.json * Updated import URLs for p2p-media-loader-core and p2p-media-loader-hlsjs * Updated event names and parameters for peer events * Removed DeepReadOnly type * Refactored naming * Improved api docs * Improve types * Fix linter issues * Updated README in packages * Updated FAQ.md * Improved FAQ.md * Updated FAQ.md --------- Co-authored-by: Andriy Lysnevych <[email protected]>
1 parent e7be84f commit c3872d9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1870
-1235
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ yarn-error.log*
77
pnpm-debug.log*
88
lerna-debug.log*
99

10+
docs
1011
node_modules
1112
/demo/dist
1213
/packages/*/dist

FAQ.md

Lines changed: 94 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# P2P Media Loader - FAQ
22

33
Table of contents:
4+
45
- [What is tracker?](#what-is-tracker)
56
- [Don't use public trackers in production](#dont-use-public-trackers-in-production)
67
- [How to achieve better P2P ratio for live streams?](#how-to-achieve-better-p2p-ratio-for-live-streams)
@@ -20,6 +21,8 @@ Table of contents:
2021
Few [public trackers](https://openwebtorrent.com/) are configured in the library by default for easy development and testing but [don't use public trackers in production](#dont-use-public-trackers-in-production).
2122

2223
Any compatible WebTorrent tracker works for `P2P Media Loader`:
24+
25+
- [Aquatic](https://github.com/greatest-ape/aquatic) - A high-performance BitTorrent tracker written in Rust.
2326
- [wt-tracker](https://github.com/Novage/wt-tracker) - high-performance WebTorrent tracker by Novage that uses [uWebSockets.js](https://github.com/uNetworking/uWebSockets.js) for I/O.
2427
- [bittorrent-tracker](https://github.com/webtorrent/bittorrent-tracker) - tracker from WebTorrent project that uses Node.js I/O
2528

@@ -32,60 +35,29 @@ That is why they can't be used in production environments. Consider running your
3235

3336
## How to achieve better P2P ratio for live streams?
3437

35-
The default configuration works best for live streams with 15-20 segments in the playlist. The segments duration sohould be about 5 seconds.
38+
The default configuration works best for live streams with 15-20 segments in the playlist. The segments duration should be about 5 seconds.
3639

3740
## How to achieve better P2P ratio for VOD streams?
3841

39-
An example of a good configuration tested in production for a VOD stream with segments 20 seconds long each:
42+
An example of a good configuration tested in production for a VOD stream with segments 10 seconds long each:
4043

4144
```javascript
42-
const config = {
43-
segments:{
44-
// number of segments to pass for processing to P2P algorithm
45-
forwardSegmentCount:50, // usually should be equal or greater than p2pDownloadMaxPriority and httpDownloadMaxPriority
46-
},
47-
loader:{
45+
{
46+
const config = {
4847
// how long to store the downloaded segments for P2P sharing
49-
cachedSegmentExpiration:86400000,
48+
cachedSegmentExpiration: 86400000,
5049
// count of the downloaded segments to store for P2P sharing
51-
cachedSegmentsCount:1000,
52-
53-
// first 4 segments (priorities 0, 1, 2 and 3) are required buffer for stable playback
54-
requiredSegmentsPriority:3,
55-
56-
// each 1 second each of 10 segments ahead of playhead position gets 6% probability for random HTTP download
57-
httpDownloadMaxPriority:9,
58-
httpDownloadProbability:0.06,
59-
httpDownloadProbabilityInterval: 1000,
60-
61-
// disallow randomly download segments over HTTP if there are no connected peers
62-
httpDownloadProbabilitySkipIfNoPeers: true,
63-
64-
// P2P will try to download only first 51 segment ahead of playhead position
65-
p2pDownloadMaxPriority: 50,
66-
67-
// 1 second timeout before retrying HTTP download of a segment in case of an error
68-
httpFailedSegmentTimeout:1000,
69-
70-
// number of simultaneous downloads for P2P and HTTP methods
71-
simultaneousP2PDownloads:20,
72-
simultaneousHttpDownloads:3,
73-
74-
// enable mode, that try to prevent HTTP downloads on stream start-up
75-
httpDownloadInitialTimeout: 120000, // try to prevent HTTP downloads during first 2 minutes
76-
httpDownloadInitialTimeoutPerSegment: 17000, // try to prevent HTTP download per segment during first 17 seconds
77-
78-
// allow to continue aborted P2P downloads via HTTP
79-
httpUseRanges: true,
80-
}
81-
};
82-
83-
const engineHlsJs = new p2pml.hlsjs.Engine(config);
50+
cachedSegmentsCount: 1000,
51+
// number of simultaneous downloads for P2P methods
52+
simultaneousP2PDownloads: 20,
53+
};
54+
}
8455
```
8556

8657
## What are the requirements to share a stream over P2P?
8758

8859
The requirements to share a stream over P2P are:
60+
8961
- The stream should have the same swarm ID on all the peers. Swarm ID is equal to the stream master manifest URL without query parameters by default. If a stream URL is not the same for different peers you can set the swarm ID manually [using configuration](#how-to-manually-set-swarm-id).
9062
- The master manifest should have the same number of variants (i.e. qualities) in the same order on all the peers. URLs of the variant playlists don't matter.
9163
- Variants should consist of the same segments under the same sequence numbers (see #EXT-X-MEDIA-SEQUENCE for HLS) on all the peers. URLs of the segments don't matter.
@@ -98,7 +70,6 @@ P2P Media Loader implements approach of P2P assisted video delivery. It means th
9870

9971
For example for 10 peers in the best case the maximum possible P2P ratio is 90% if a stream was downloaded from the source only once.
10072

101-
10273
## What happens if there are no peers on a stream?
10374

10475
P2P Media Loader downloads all the segments from HTTP(S) source in this case. It should not perform worse than a player configured without P2P at all.
@@ -107,55 +78,113 @@ P2P Media Loader downloads all the segments from HTTP(S) source in this case. It
10778

10879
```javascript
10980
const config = {
110-
loader: {
111-
trackerAnnounce: [
81+
core: {
82+
announceTrackers: [
11283
"wss://personal.tracker1.com",
113-
"wss://personal.tracker2.com"
84+
"wss://personal.tracker2.com",
11485
],
11586
rtcConfig: {
11687
iceServers: [
11788
{ urls: "stun:stun.l.google.com:19302" },
118-
{ urls: "stun:global.stun.twilio.com:3478?transport=udp" }
119-
]
120-
}
121-
}
89+
{ urls: "stun:global.stun.twilio.com:3478?transport=udp" },
90+
],
91+
},
92+
},
12293
};
12394

124-
const engineHlsJs = new p2pml.hlsjs.Engine(config);
95+
const engineShaka = new ShakaP2PEngine(config, shaka);
12596
// or
126-
const engineShaka = new p2pml.shaka.Engine(config);
97+
const engineHlsJs = new HlsJsP2PEngine(config);
12798
```
99+
100+
```javascript
101+
const HlsWithP2P = HlsJsP2PEngine.injectMixin(Hls);
102+
const hls = new HlsWithP2P({
103+
p2p: {
104+
core: {
105+
announceTrackers: [
106+
"wss://personal.tracker1.com",
107+
"wss://personal.tracker2.com",
108+
],
109+
rtcConfig: {
110+
iceServers: [
111+
{ urls: "stun:stun.l.google.com:19302" },
112+
{ urls: "stun:global.stun.twilio.com:3478?transport=udp" },
113+
],
114+
},
115+
},
116+
onHlsJsCreated(hls) {
117+
// Subscribe to P2P engine and Hls.js events here
118+
hls.p2pEngine.addEventListener("onSegmentLoaded", (details) => {
119+
console.log("Segment Loaded:", details);
120+
});
121+
},
122+
},
123+
});
124+
```
125+
128126
## How to manually set swarm ID?
129127

130128
```javascript
131129
const config = {
132-
segments: {
133-
swarmId: "https://somecdn.com/mystream_12345.m3u8" // any unique string
134-
}
130+
core: {
131+
swarmId: "https://somecdn.com/mystream_12345.m3u8", // any unique string
132+
},
135133
};
136134

137-
const engineHlsJs = new p2pml.hlsjs.Engine(config);
135+
const engineShaka = new ShakaP2PEngine(config, shaka);
138136
// or
139-
const engineShaka = new p2pml.shaka.Engine(config);
137+
const engineHlsJs = new HlsJsP2PEngine(config);
138+
```
139+
140+
```javascript
141+
const HlsWithP2P = HlsJsP2PEngine.injectMixin(Hls);
142+
const hls = new HlsWithP2P({
143+
p2p: {
144+
core: {
145+
swarmId: "https://somecdn.com/mystream_12345.m3u8", // any unique string
146+
},
147+
onHlsJsCreated(hls) {
148+
// Subscribe to P2P engine and Hls.js events here
149+
hls.p2pEngine.addEventListener("onSegmentLoaded", (details) => {
150+
console.log("Segment Loaded:", details);
151+
});
152+
},
153+
},
154+
});
140155
```
156+
141157
## How to see that P2P is actually working?
142158

143-
The easiest way is to subscribe to P2P [events](https://github.com/Novage/p2p-media-loader/tree/master/p2p-media-loader-core#loaderoneventssegmentloaded-function-segment-peerid-) and log them:
159+
The easiest way is to subscribe to P2P [events](https://novage.github.io/p2p-media-loader/docs/v1.0/types/p2p_media_loader_core.CoreEventMap.html) and log them:
160+
161+
```javascript
162+
const engine = new HlsJsP2PEngine();
163+
164+
engine.addEventListener("onSegmentLoaded", (details) => {
165+
console.log("Segment Loaded:", details);
166+
});
167+
```
144168

145169
```javascript
146-
const engine = new p2pml.hlsjs.Engine();
147-
148-
engine.on("peer_connect", peer => console.log("peer_connect", peer.id, peer.remoteAddress));
149-
engine.on("peer_close", peerId => console.log("peer_close", peerId));
150-
engine.on("segment_loaded", (segment, peerId) => console.log("segment_loaded from", peerId ? `peer ${peerId}` : "HTTP", segment.url));
170+
const HlsWithP2P = HlsJsP2PEngine.injectMixin(Hls);
171+
const hls = new HlsWithP2P({
172+
p2p: {
173+
onHlsJsCreated(hls) {
174+
hls.p2pEngine.addEventListener("onSegmentLoaded", (details) => {
175+
console.log("Segment Loaded:", details);
176+
});
177+
},
178+
},
179+
});
151180
```
152181

153182
Open few P2P enabled players with the same stream so they can connect.
154183

155184
## How to debug?
156185

157-
To enable ALL debugging type in browser's console `localStorage.debug = 'p2pml:*'` and reload the webpage.
186+
To enable ALL debugging type in browser's console `localStorage.debug = 'p2pml-core:*'` and reload the webpage.
158187

159-
To enable specific logs use filtering like `localStorage.debug = 'p2pml:media-peer'`.
188+
To enable specific logs use filtering like `localStorage.debug = 'p2pml-core:peer'`.
160189

161190
Check the source code for all the possible log types.

README.md

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,27 @@
11
# P2P Media Loader
22

3-
[![](https://data.jsdelivr.com/v1/package/npm/p2p-media-loader-core/badge)](https://www.jsdelivr.com/package/npm/p2p-media-loader-core)
4-
[![npm version](https://badge.fury.io/js/p2p-media-loader-core.svg)](https://npmjs.com/package/p2p-media-loader-core)
3+
[![jsDelivr Badge](https://data.jsdelivr.com/v1/package/npm/p2p-media-loader-core/badge)](https://www.jsdelivr.com/package/npm/p2p-media-loader-core)
54

6-
**P2P Media Loader** is an open-source JavaScript library that uses features of modern web browsers (i.e. HTML5 video and WebRTC) to deliver media over P2P and do playback via integrations with many popular HTML5 video players. It doesn’t require any web browser plugins or add-ons to function (see the [demo](http://novage.com.ua/p2p-media-loader/demo.html)).
5+
**P2P Media Loader** is an open-source JavaScript library that leverages modern web browser features, such as HTML5 video and WebRTC, to enable media delivery over peer-to-peer (P2P) networks. It integrates smoothly with many popular HTML5 video players and works entirely without browser plugins or add-ons. Experience it in action with the [demo](http://novage.com.ua/p2p-media-loader/demo.html).
76

8-
It allows creating Peer-to-Peer network (also called P2P CDN or P2PTV) for traffic sharing between users (peers) that are watching the same media stream live or VOD over HLS or MPEG-DASH protocols.
7+
This library enables the creation of a huge P2P mesh network, also known as P2P CDN or P2PTV, which allows traffic sharing among users who are simultaneously viewing the same live or VOD stream via HLS or MPEG-DASH protocols.
98

10-
It significantly reduces traditional CDN traffic and cost while delivering media streams to more users.
9+
By leveraging P2P technology, it greatly reduces reliance on traditional CDN resources, lowers costs, and enhances the ability to deliver media streams to a larger audience.
1110

1211
## Related projects
1312

14-
* [wt-tracker](https://github.com/Novage/wt-tracker) - high-performance WebTorrent tracker
15-
* [WebTorrent](https://github.com/webtorrent/webtorrent) - streaming torrent client for the web https://webtorrent.io
13+
- [Aquatic](https://github.com/greatest-ape/aquatic): A high-performance BitTorrent tracker written in Rust.
14+
- [wt-tracker](https://github.com/Novage/wt-tracker): A high-performance WebTorrent tracker.
15+
- [WebTorrent](https://github.com/webtorrent/webtorrent): A streaming torrent client designed for web use. Learn more at [WebTorrent.io](https://webtorrent.io).
1616

1717
## Useful links
1818

1919
- [P2P development, support & consulting](https://novage.com.ua/)
2020
- [Demo](http://novage.com.ua/p2p-media-loader/demo.html)
21-
- [FAQ](FAQ.md)
21+
- [FAQ](https://github.com/Novage/p2p-media-loader/blob/master/FAQ.md)
2222
- [Overview](http://novage.com.ua/p2p-media-loader/overview.html)
2323
- [Technical overview](http://novage.com.ua/p2p-media-loader/technical-overview.html)
24-
- API documentation
25-
- [Hls.js integration](p2p-media-loader-hlsjs#p2p-media-loader---hlsjs-integration)
26-
- [Shaka Player integration](p2p-media-loader-shaka#p2p-media-loader---shaka-player-integration)
27-
- [Core](p2p-media-loader-core#p2p-media-loader-core)
28-
- JS CDN
29-
- [Core](https://cdn.jsdelivr.net/npm/p2p-media-loader-core@latest/build/)
30-
- [Hls.js integration](https://cdn.jsdelivr.net/npm/p2p-media-loader-hlsjs@latest/build/)
31-
- [Shaka Player integration](https://cdn.jsdelivr.net/npm/p2p-media-loader-shaka@latest/build/)
24+
- [API documentation](https://novage.github.io/p2p-media-loader/docs/v1.0/)
3225
- npm packages
3326
- [Core](https://npmjs.com/package/p2p-media-loader-core)
3427
- [Hls.js integration](https://npmjs.com/package/p2p-media-loader-hlsjs)
@@ -39,7 +32,7 @@ It significantly reduces traditional CDN traffic and cost while delivering media
3932
- Supports live and VOD streams over HLS or MPEG-DASH protocols
4033
- Supports multiple HTML5 video players and engines:
4134
- Engines: Hls.js, Shaka Player
42-
- Video players: JWPlayer, Clappr, Flowplayer, MediaElement, VideoJS, Plyr, DPlayer, Player.js and others
35+
- Video players: [Vidstack](https://www.vidstack.io/), [Clappr](http://clappr.io/), [MediaElement](https://www.mediaelementjs.com/), [Plyr](https://plyr.io/), [DPlayer](https://dplayer.diygod.dev/), [OpenPlayerJS](https://www.openplayerjs.com/), and others that support Hls.js or Shaka video engines. These players can be integrated via custom integration with the library API.
4336
- Supports adaptive bitrate streaming of HLS and MPEG-DASH protocols
4437
- No need in server-side software. By default **P2P Media Loader** uses publicly available servers:
4538
- STUN servers - [Public STUN server list](https://gist.github.com/mondain/b0ec1cf5f60ae726202e)
@@ -52,6 +45,7 @@ All the components of the P2P network are free and open-source.
5245
![P2P Media Loader network](https://raw.githubusercontent.com/Novage/p2p-media-loader/gh-pages/images/p2p-media-loader-network.png)
5346

5447
**P2P Media Loader** web browser [requirements](#web-browsers-support) are:<br>
48+
5549
- **WebRTC Data Channels** support to exchange data between peers
5650
- **Media Source Extensions** are required by Hls.js and Shaka Player engines for media playback
5751

@@ -64,28 +58,31 @@ It is possible to run personal WebTorrent tracker using open-source implementati
6458

6559
**P2P Media Loader** is configured to use public **STUN** and **WebTorrent** servers by default. It means that it is not required to run any server-side software for the P2P network to function.
6660

67-
## How it works
61+
## How It Works
62+
63+
A web browser runs a video player that integrates with the **P2P Media Loader** library. Each instance of the library is referred to as a **peer**, and collectively, many peers form the P2P network.
6864

69-
A web browser runs a video player integrated with **P2P Media Loader** library. An instance of **P2P Media Loader** is called **peer**. Many peers form the P2P network.
65+
**P2P Media Loader** initially downloads media segments over HTTP(S) from a source server or CDN to start media playback quickly. If no peers are available, it continues to download segments over HTTP(S), similar to a traditional media stream.
7066

71-
**P2P Media Loader** starts to download initial media segments over HTTP(S) from source server or CDN. This allows beginning media playback faster.
72-
Also, in case of no peers, it will continue to download segments over HTTP(S) that will not differ from traditional media stream download over HTTP.
67+
Subsequently, **P2P Media Loader** transmits media stream details and connection information, such as ICE candidates, to WebTorrent trackers. These trackers provide a list of other peers who are accessing the same media stream.
7368

74-
After that **P2P Media Loader** sends media stream details and its connection details (ICE candidates) to WebTorrent trackers
75-
and obtains from them list of other peers that are downloading the same media stream.
69+
**P2P Media Loader** then connects with these peers to download additional media segments and simultaneously shares segments that it has already downloaded.
7670

77-
**P2P Media Loader** connects and starts to download media segments from the obtained peers as well as sharing already downloaded segments to them.
71+
Periodically, random peers in the P2P swarm download new segments over HTTP(S) and distribute them to others via P2P.
7872

79-
From time to time random peers from the P2P swarm download new segments over HTTP(S) and share them to others over P2P.
73+
## Web browsers support
8074

81-
## Limitations
75+
**All features listed below are fully supported across the following browsers:**
8276

83-
Only one media track is delivered over P2P. If video and audio tracks in HLS or MPEG-DASH go separately, just video is going to be shared over the P2P network.
77+
- Chrome
78+
- Firefox
79+
- macOS Safari
80+
- iPadOS Safari (iPad)
81+
- iOS Safari (iPhone, iOS version 17.1+)
82+
- Edge
8483

85-
## Web browsers support
84+
**Supported Features:**
8685

87-
| | Chrome | Firefox | macOS Safari | iPadOS Safari (iPad) | iOS Safari (iPhone) | IE | Edge |
88-
|-------------------------|--------|---------|--------------|----------------------|---------------------|-------|-------|
89-
| WebRTC Data Channels | + | + | + | + | + | - | - |
90-
| Media Source Extensions | + | + | + | + | - | + | + |
91-
| **P2P Media Loader** | **+** | **+** | **+** | **+** | **-** | **-** | **-** |
86+
- WebRTC Data Channels
87+
- [Media Source Extensions](https://caniuse.com/mediasource) or [Managed Media Source](https://caniuse.com/mdn-api_managedmediasource)
88+
- P2P Media Loader

0 commit comments

Comments
 (0)