add html example to get-started page

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)
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.
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)