1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
# WebTorrent Tutorials
## Integrate WebTorrent with Video Players
WebTorrent can be used to stream videos. WebTorrent can render the incoming video to an HTML `<video>` element. Below are some examples for various video players.
### [Default HTML5 Video Player](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) [legacy]
Code example:
```html
<!DOCTYPE html>
<html>
<head>
<title>Web Torrent Tutorial</title>
<meta charset="UTF-8" />
<script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
</head>
<body>
<video id="video-container" controls="true"></video>
<script>
const client = new WebTorrent();
const torrentId =
"magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent";
client.add(torrentId, function (torrent) {
// Torrents can contain many files. Let's use the .mp4 file
const file = torrent.files.find(function (file) {
return file.name.endsWith(".mp4");
});
// Render to a <video> element by providing an ID. Alternatively, one can also provide a DOM element.
file.renderTo("#video-container", {}, () => {
console.log("Ready to play!");
});
});
</script>
</body>
</html>
```
### [Service Worker Renderer](https://github.com/webtorrent/webtorrent/blob/master/docs/api.md#clientloadworkercontroller-function-callback-controller---browser-only)
Code example:
```js
import WebTorrent from 'webtorrent'
const client = new WebTorrent()
const torrentId = "magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent"
const player = document.querySelector('video')
function download () {
client.add(torrentId, torrent => {
// Torrents can contain many files. Let's use the .mp4 file
const file = torrent.files.find(file => file.name.endsWith('.mp4'))
// Log streams emitted by the video player
file.on('stream', ({ stream, file, req }) => {
if (req.destination === 'video') {
console.log(`Video player requested data from ${file.name}! Ranges: ${req.headers.range}`)
}
})
// Stream to a <video> element by providing an the DOM element
file.streamTo(player, () => {
console.log('Ready to play!')
})
}
}
navigator.serviceWorker.register('sw.min.js', { scope }).then(reg => {
const worker = reg.active || reg.waiting || reg.installing
function checkState (worker) {
return worker.state === 'activated' && client.loadWorker(worker, download)
}
if (!checkState(worker)) {
worker.addEventListener('statechange', ({ target }) => checkState(target))
}
})
```
### [Video.js](https://videojs.com/)
Video.js is an open source HTML5 & Flash video player. We include the dependencies for `video.js` using CDN. A normal `<video>` element is converted to `video.js` by passing `class="video-js"` and `data-setup="{}"`. For more information visit the [docs](https://docs.videojs.com/tutorial-setup.html).
**Note**: Unlike in the Default HTML5 Video Player example we don't directly pass the ID of the `<video>` element but pass `` `video#${id}_html5_api` `` (JS String Literal). It is because `video.js` wraps the `<video>` element in a `<div>`.
Original code:
```html
<video
id="video-container"
class="video-js"
data-setup="{}"
controls="true"
></video>
```
Code rendered on the browser:
```html
<div>
<video id="video-container_html5_api"></video>
</div>
```
Code example:
```html
<!DOCTYPE html>
<html>
<head>
<title>Web Torrent Tutorial</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video-js.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video.min.js"></script>
<script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
</head>
<body>
<video id="video-container" class="video-js" data-setup="{}" controls="true"></video>
<script>
const client = new WebTorrent();
const torrentId =
"magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent";
client.add(torrentId, function (torrent) {
// Torrents can contain many files. Let's use the .mp4 file
const file = torrent.files.find(function (file) {
return file.name.endsWith(".mp4");
});
// Render to a <video> element by providing an ID. Alternatively, one can also provide a DOM element.
file.renderTo("video#video-container_html5_api", {}, () => {
console.log("Ready to play!");
});
});
</script>
</body>
</html>
```
|
