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 | |
parent | 03ef03c6d5c527eef05086502bbe1e4856c6aecb (diff) |
add html example to get-started page
-rw-r--r-- | docs/examples/file-send.html | 74 | ||||
-rw-r--r-- | docs/get-started.md | 89 |
2 files changed, 87 insertions, 76 deletions
diff --git a/docs/examples/file-send.html b/docs/examples/file-send.html deleted file mode 100644 index 0091ab9..0000000 --- a/docs/examples/file-send.html +++ /dev/null @@ -1,74 +0,0 @@ -<!doctype html> -<html> - <head> - <title>WebTorrent – Simple File Sending Example</title> - <style> - body { - font-family: sans-serif; - } - </style> - </head> - <body> - <h1>Streaming File Transfer over <a href="http://webtorrent.io">WebTorrent</a></h1> - - <p>Download files using the WebTorrent protocol (BitTorrent over WebRTC).</p> - - <h2>Log</h2> - <div class="log"></div> - - <h2>Start downloading</h2> - - <form> - <label for="torrentId">Download from a magnet link or info hash</label> - <input name="torrentId", placeholder="magnet:"> - <button type="submit">Download</button> - </form> - - <br> - <p><small>Code is available on <a href="https://github.com/feross/instant.io">GitHub</a> under MIT License. Run <code>localStorage.debug = '*'</code> in the console and refresh to enable verbose logs.</small></p> - - <!-- Include the latest version of WebTorrent --> - <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script> - - <script> - var client = new WebTorrent() - - // Print warnings and errors to the console - client.on('warning', function (err) { - console.log('WARNING: ' + err.message) - }) - client.on('error', function (err) { - console.error('ERROR: ' + err.message) - }) - - document.querySelector('form').addEventListener('submit', onSubmit) - - function onSubmit (e) { - e.preventDefault() // Prevent page refresh - - var torrentId = document.querySelector('form input[name=torrentId]').value - client.add(torrentId, onTorrent) - } - - function onTorrent (torrent) { - alert('torrent') - log( - 'Torrent info hash: ' + torrent.infoHash + ' ' + - '<a href="' + torrent.magnetURI + '" target="_blank">[Magnet URI]</a> ' + - '<a href="' + torrent.torrentFileURL + '" target="_blank" download="' + torrentFileName + '">[Download .torrent]</a>' - ) - - torrent.files.forEach(function (file) { - file.appendTo('.log') - }) - } - - function log (str) { - var p = document.createElement('p') - p.innerHTML = str - document.querySelector('.log').appendChild(p) - } - - </script> - </body> -</html> 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. |