diff options
| author | Feross Aboukhadijeh <feross@feross.org> | 2016-03-17 00:29:13 +0300 |
|---|---|---|
| committer | Feross Aboukhadijeh <feross@feross.org> | 2016-03-17 00:29:13 +0300 |
| commit | 4a84d5e0c5f6633f062105fa73729a5465cc79d9 (patch) | |
| tree | e937acbd41e568dd8505ba5e795c201496145a71 /docs | |
| parent | a01c628ebc9ddd7d88c84ae9bb32e29a8aad9c11 (diff) | |
docs: Improve get started docs
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/examples/file-send.html | 74 | ||||
| -rw-r--r-- | docs/get-started.md | 43 |
2 files changed, 107 insertions, 10 deletions
diff --git a/docs/examples/file-send.html b/docs/examples/file-send.html new file mode 100644 index 0000000..0091ab9 --- /dev/null +++ b/docs/examples/file-send.html @@ -0,0 +1,74 @@ +<!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 9be9a5f..e6eba15 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -33,11 +33,14 @@ var WebTorrent = require('webtorrent') ## Quick Example -### Downloading a torrent +### Downloading a torrent (in the browser) ```js +var WebTorrent = require('webtorrent') + var client = new WebTorrent() +// Sintel, a free, Creative Commons movie var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d' client.add(torrentId, function (torrent) { @@ -49,7 +52,7 @@ client.add(torrentId, function (torrent) { }) ``` -This supports video, audio, images, PDFs, Markdown, [and more][append-to], right +This supports video, audio, images, PDFs, Markdown, [and more][render-media], right out of the box. There are additional ways to access file content directly, including as a node-style stream, Buffer, or Blob URL. @@ -57,7 +60,7 @@ Video and audio content can be streamed, i.e. playback will start before the ful file is downloaded. Seeking works too – WebTorrent dynamically fetches the needed torrent pieces from the network on-demand. -### Creating a new torrent and seeding it +### Creating a new torrent and seed it (in the browser) ```js var dragDrop = require('drag-drop') @@ -68,7 +71,7 @@ var client = new WebTorrent() // When user drops files on the browser, create a new torrent and start seeding it! dragDrop('body', function (files) { client.seed(files, function (torrent) { - console.log('Client is seeding ' + torrent.infoHash) + console.log('Client is seeding ' + torrent.magnetURI) }) }) ``` @@ -76,15 +79,35 @@ dragDrop('body', function (files) { This example uses the [`drag-drop`][drag-drop] package, to make the HTML5 Drag and Drop API easier to work with. -### More examples +### Download and save a torrent (in Node.js) -There are more examples in the [examples](https://github.com/feross/webtorrent/tree/master/examples) folder. +```js +var WebTorrent = require('webtorrent') +var fs = require('fs') +var client = new WebTorrent() +var magnetURI = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d' + +client.add(magnetURI, function (torrent) { + torrent.files.forEach(function (file) { + console.log('Started saving ' + file.name) + + file.getBuffer(function (err, buffer) { + if (err) { + console.error('Error downloading ' + file.name) + return + } + fs.writeFile(file.name, buffer, function (err) { + console.error('Error saving ' + file.name) + }) + }) + }) +}) +``` -## Full tutorial coming soon! +### More Documentation... -For now, check out the [API Documentation](/docs) and [FAQ](/faq) which are very -detailed. +Check out the [API Documentation](/docs) and [FAQ](/faq) which are very detailed. -[append-to]: https://github.com/feross/webtorrent/blob/master/lib/append-to.js#L6-L14 +[render-media]: https://github.com/feross/render-media/blob/master/index.js#L12-L20 [drag-drop]: https://npmjs.com/package/drag-drop |