From e33e6680dd192145712c4f25c94f68fc14e1f4a3 Mon Sep 17 00:00:00 2001 From: achingbrain Date: Tue, 20 Feb 2018 18:36:03 +0000 Subject: [PATCH] docs: Add browser example for ReadableStreams feat: Allows for byte offsets when using ipfs.files.cat and friends to request slices of files --- examples/README.md | 1 + examples/browser-readablestream/README.md | 16 ++ examples/browser-readablestream/index.html | 66 ++++++++ examples/browser-readablestream/index.js | 75 +++++++++ examples/browser-readablestream/package.json | 22 +++ examples/browser-readablestream/utils.js | 145 ++++++++++++++++++ .../browser-readablestream/webpack.config.js | 29 ++++ package.json | 4 +- src/cli/commands/files/cat.js | 20 ++- src/core/components/files.js | 47 ++++-- src/http/api/resources/files.js | 21 ++- test/cli/files.js | 18 +++ 12 files changed, 446 insertions(+), 18 deletions(-) create mode 100644 examples/browser-readablestream/README.md create mode 100644 examples/browser-readablestream/index.html create mode 100644 examples/browser-readablestream/index.js create mode 100644 examples/browser-readablestream/package.json create mode 100644 examples/browser-readablestream/utils.js create mode 100644 examples/browser-readablestream/webpack.config.js diff --git a/examples/README.md b/examples/README.md index b4678c1fa2..e47ef446ec 100644 --- a/examples/README.md +++ b/examples/README.md @@ -22,6 +22,7 @@ Let us know if you find any issue or if you want to contribute and add a new tut - [js-ipfs in electron](./run-in-electron) - [Using streams to add a directory of files to ipfs](./browser-add-readable-stream) - [Customizing the ipfs repository](./custom-ipfs-repo) +- - [Streaming video from ipfs to the browser using `ReadableStream`s](./browser-readablestream) ## Understanding the IPFS Stack diff --git a/examples/browser-readablestream/README.md b/examples/browser-readablestream/README.md new file mode 100644 index 0000000000..6fe75111f8 --- /dev/null +++ b/examples/browser-readablestream/README.md @@ -0,0 +1,16 @@ +# Streaming video from IPFS using ReadableStreams + +We can use the execllent [`videostream`](https://www.npmjs.com/package/videostream) to stream video from IPFS to the browser. All we need to do is return a [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)-like object that contains the requested byte ranges. + +Take a look at [`index.js`](./index.js) to see a working example. + +## Running the demo + +In this directory: + +``` +$ npm install +$ npm start +``` + +Then open [http://localhost:8888](http://localhost:8888) in your browser. diff --git a/examples/browser-readablestream/index.html b/examples/browser-readablestream/index.html new file mode 100644 index 0000000000..61ded58b13 --- /dev/null +++ b/examples/browser-readablestream/index.html @@ -0,0 +1,66 @@ + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+
+
+ + +
+ +
+ 

+    

+  
+
diff --git a/examples/browser-readablestream/index.js b/examples/browser-readablestream/index.js
new file mode 100644
index 0000000000..7a2a969fa1
--- /dev/null
+++ b/examples/browser-readablestream/index.js
@@ -0,0 +1,75 @@
+'use strict'
+
+/* eslint-env browser */
+
+const Ipfs = require('../../')
+const videoStream = require('videostream')
+const ipfs = new Ipfs({ repo: 'ipfs-' + Math.random() })
+const {
+  dragDrop,
+  statusMessages,
+  createVideoElement,
+  log
+} = require('./utils')
+
+log('IPFS: Initialising')
+
+ipfs.on('ready', () => {
+  // Set up event listeners on the