diff options
| author | Feross Aboukhadijeh <feross@feross.org> | 2016-03-25 05:52:21 +0300 |
|---|---|---|
| committer | Feross Aboukhadijeh <feross@feross.org> | 2016-03-25 05:52:21 +0300 |
| commit | 89ddd92211ce32e909a7607647a6c22377ea781a (patch) | |
| tree | 22efe99d7ae0dfc942394a1002e68aa7c4697316 /docs/get-started.md | |
| parent | 03ef03c6d5c527eef05086502bbe1e4856c6aecb (diff) | |
add html example to get-started page
Diffstat (limited to 'docs/get-started.md')
| -rw-r--r-- | docs/get-started.md | 89 |
1 files changed, 87 insertions, 2 deletions
diff --git a/docs/get-started.md b/docs/get-started.md index 9dbe748..83b069f 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -41,7 +41,7 @@ var WebTorrent = require('webtorrent') var client = new WebTorrent() // Sintel, a free, Creative Commons movie -var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d' +var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4' client.add(torrentId, function (torrent) { // Torrents can contain many files. Let's use the first. @@ -87,7 +87,8 @@ var WebTorrent = require('webtorrent') var fs = require('fs') var client = new WebTorrent() -var magnetURI = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d' + +var magnetURI = 'magnet:...' client.add(magnetURI, function (torrent) { torrent.files.forEach(function (file) { @@ -106,6 +107,90 @@ client.add(magnetURI, function (torrent) { }) ``` +### Complete HTML page example + +Looking for a more complete example? Look no further! This HTML example has a form input +where the user can paste a magnet link and start a download over WebTorrent. + +Best of all, it's a single HTML page, under 70 lines! + +If the torrent contains images, videos, audio, or other playable files (with supported +codecs), they will be added to the DOM and streamed, even before the full content is +downloaded. + +```html +<!doctype html> +<html> + <body> + <h1>Download files using the WebTorrent protocol (BitTorrent over WebRTC).</h1> + + <form> + <label for="torrentId">Download from a magnet link: </label> + <input name="torrentId", placeholder="magnet:" value="magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4"> + <button type="submit">Download</button> + </form> + + <h2>Log</h2> + <div class="log"></div> + + <!-- Include the latest version of WebTorrent --> + <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script> + + <script> + var client = new WebTorrent() + + client.on('error', function (err) { + console.error('ERROR: ' + err.message) + }) + + document.querySelector('form').addEventListener('submit', function (e) { + e.preventDefault() // Prevent page refresh + + var torrentId = document.querySelector('form input[name=torrentId]').value + log('Adding ' + torrentId) + client.add(torrentId, onTorrent) + }) + + function onTorrent (torrent) { + log('Got torrent metadata!') + log( + 'Torrent info hash: ' + torrent.infoHash + ' ' + + '<a href="' + torrent.magnetURI + '" target="_blank">[Magnet URI]</a> ' + + '<a href="' + torrent.torrentFileBlobURL + '" target="_blank" download="' + torrent.name + '.torrent">[Download .torrent]</a>' + ) + + // Print out progress every 5 seconds + var interval = setInterval(function () { + log('Progress: ' + (torrent.progress * 100).toFixed(1) + '%') + }, 5000) + + torrent.on('done', function () { + log('Progress: 100%') + clearInterval(interval) + }) + + // Render all files into to the page + torrent.files.forEach(function (file) { + file.appendTo('.log') + log('(Blob URLs only work if the file is loaded from a server. "http//localhost" works. "file://" does not.)') + file.getBlobURL(function (err, url) { + if (err) return log(err.message) + log('File done.') + log('<a href="' + url + '">Download full file: ' + file.name + '</a>') + }) + }) + } + + function log (str) { + var p = document.createElement('p') + p.innerHTML = str + document.querySelector('.log').appendChild(p) + } + </script> + </body> +</html> +``` + ## More Documentation Check out the [API Documentation](/docs) and [FAQ](/faq) which are very detailed. |