diff options
Diffstat (limited to 'docs/tutorials.md')
| -rw-r--r-- | docs/tutorials.md | 52 |
1 files changed, 26 insertions, 26 deletions
diff --git a/docs/tutorials.md b/docs/tutorials.md index 2d39297..4aa6bcf 100644 --- a/docs/tutorials.md +++ b/docs/tutorials.md @@ -9,7 +9,7 @@ WebTorrent can be used to stream videos. WebTorrent can render the incoming vide Code example: ```js -import WebTorrent from 'webtorrent' +import Webtorrent from 'https://esm.sh/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' @@ -76,34 +76,34 @@ Code example: <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' -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')) - - // 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.createServer({ controller: reg }) && download() - } - if (!checkState(worker)) { - worker.addEventListener('statechange', ({ target }) => checkState(target)) - } -}) + <script type='module'> + import Webtorrent from 'https://esm.sh/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')) + + // 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.createServer({ controller: reg }) && download() + } + if (!checkState(worker)) { + worker.addEventListener('statechange', ({ target }) => checkState(target)) + } + }) </script> </body> </html> |