diff --git a/examples/browser-browserify/src/index.js b/examples/browser-browserify/src/index.js index f5225851f3..10d3434756 100644 --- a/examples/browser-browserify/src/index.js +++ b/examples/browser-browserify/src/index.js @@ -1,8 +1,5 @@ 'use strict' -const concat = require('concat-stream') -const Buffer = require('safe-buffer').Buffer - const IPFS = require('../../../src/core') // replace this by line below // var IPFS = require('ipfs') @@ -10,9 +7,7 @@ const node = new IPFS({ repo: String(Math.random() + Date.now()) }) -node.on('ready', () => { - console.log('IPFS node is ready') -}) +node.once('ready', () => console.log('IPFS node is ready')) function store () { var toStore = document.getElementById('source').value @@ -33,16 +28,11 @@ function store () { function display (hash) { // buffer: true results in the returned result being a buffer rather than a stream - node.files.cat(hash, (err, res) => { - if (err || !res) { - return console.error('ipfs cat error', err, res) - } + node.files.cat(hash, (err, data) => { + if (err) { return console.error('ipfs cat error', err) } document.getElementById('hash').innerText = hash - - res.pipe(concat((data) => { - document.getElementById('content').innerText = data - })) + document.getElementById('content').innerText = data }) } diff --git a/examples/browser-script-tag/index.html b/examples/browser-script-tag/index.html index d3d3a22f8b..ddc474a8a4 100644 --- a/examples/browser-script-tag/index.html +++ b/examples/browser-script-tag/index.html @@ -4,33 +4,17 @@
Try adding a new file:
- node.files.add(new node.types.Buffer('Hello world!'), (err, res) => {
- if (err || !res) {
+ node.files.add(new node.types.Buffer('Hello world!'), (err, filesAdded) => {
+ if (err) {
return console.error('Error - ipfs files add', err, res)
}
- res.forEach((file) => console.log('successfully stored', file))
+ filesAdded.forEach((file) => console.log('successfully stored', file.hash))
})
You can cat that same file. If you used the exact same string as above ('Hello world!') you should have an hash like this: 'QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY'
- node.files.cat('QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY', function (err, stream) {
- var res = ''
-
- stream.on('data', function (chunk) {
- res += chunk.toString()
- })
-
- stream.on('error', function (err) {
- console.error('Error - ipfs files cat ', err)
- })
+ node.files.cat('QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY', function (err, data) {
+ if (err) {
+ return console.error('Error - ipfs files cat', err, res)
+ }
- stream.on('end', function () {
- console.log('Got:', res)
- })
+ console.log(data.toString())
})
diff --git a/examples/browser-video-streaming/README.md b/examples/browser-video-streaming/README.md
index db8d7749a6..92cb125cf4 100644
--- a/examples/browser-video-streaming/README.md
+++ b/examples/browser-video-streaming/README.md
@@ -3,6 +3,7 @@
This example shows a method for video/audio streaming in the browser over IPFS.
## Why use HLS?
+
HLS (Apple's HTTP Live Streaming) is one of several protocols currently available for adaptive bitrate streaming.
One of the advantages of HLS over some other streaming technologies is that the content can be hosted on a plain old web server without any special server-side support. The way this works is that the original content (the stream or video/audio file) is split up into small MPEG2-TS segments before being uploaded to the server. The segments are then fetched by the HLS player on the fly (using regular HTTP GET requests) and get spliced together to a continuous stream.
@@ -12,6 +13,7 @@ In addition to the segments there are also so-called manifests (m3u8 files) whic
The fact that HLS content is just "a bunch of files" makes it a good choice for IPFS (another protocol that works this way is MPEG-DASH, which could certainly be a good choice as well). Furthermore, the [hls.js](https://github.com/video-dev/hls.js) library enables straightforward integration with the HTML5 video element.
## hlsjs-ipfs-loader
+
The hls.js library ships with an HTTP based content loader only, but it's fortunately possible to configure custom content loaders as well, which is what makes IPFS streaming possible in this case. A loader implementation that fetches content using js-ipfs can be found [here](https://www.npmjs.com/package/hlsjs-ipfs-loader), and is easy to use on a regular HTML page:
```html
@@ -21,6 +23,7 @@ The hls.js library ships with an HTTP based content loader only, but it's fortun
```
## Generating HLS content
+
In order for any of the above to be useful, we also need to have a way to actually generate HLS manifests and MPEG2-TS segments from an arbitrary video/audio file. Luckily, most new builds of `ffmpeg` are compiled with this capability.
For example, say we have a directory containing a video file `BigBuckBunny_320x180.mp4`. We can then create a sub directory and generate the HLS data there, and finally add it to IPFS:
diff --git a/examples/browser-video-streaming/streaming.js b/examples/browser-video-streaming/streaming.js
index 21c1f706b3..2cb915adcc 100644
--- a/examples/browser-video-streaming/streaming.js
+++ b/examples/browser-video-streaming/streaming.js
@@ -5,30 +5,18 @@
const testhash = 'QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K'
const repoPath = 'ipfs-' + Math.random()
-const ipfs = new Ipfs({
- init: false,
- start: false,
- repo: repoPath
-})
+const node = new Ipfs({ repo: repoPath })
-ipfs.init((err) => {
- if (err) {
- throw err
+node.on('ready', () => {
+ Hls.DefaultConfig.loader = HlsjsIpfsLoader
+ Hls.DefaultConfig.debug = false
+ if (Hls.isSupported()) {
+ const video = document.getElementById('video')
+ const hls = new Hls()
+ hls.config.ipfs = node
+ hls.config.ipfsHash = testhash
+ hls.loadSource('master.m3u8')
+ hls.attachMedia(video)
+ hls.on(Hls.Events.MANIFEST_PARSED, () => video.play())
}
-
- ipfs.start(() => {
- Hls.DefaultConfig.loader = HlsjsIpfsLoader
- Hls.DefaultConfig.debug = false
- if (Hls.isSupported()) {
- const video = document.getElementById('video')
- const hls = new Hls()
- hls.config.ipfs = ipfs
- hls.config.ipfsHash = testhash
- hls.loadSource('master.m3u8')
- hls.attachMedia(video)
- hls.on(Hls.Events.MANIFEST_PARSED, () => {
- video.play()
- })
- }
- })
})
diff --git a/examples/browser-webpack/src/components/app.js b/examples/browser-webpack/src/components/app.js
index 7e6b273643..e1e4cbff82 100644
--- a/examples/browser-webpack/src/components/app.js
+++ b/examples/browser-webpack/src/components/app.js
@@ -25,11 +25,9 @@ class App extends React.Component {
function create () {
// Create the IPFS node instance
- node = new IPFS({
- repo: String(Math.random() + Date.now())
- })
+ node = new IPFS({ repo: String(Math.random() + Date.now()) })
- node.on('ready', () => {
+ node.once('ready', () => {
console.log('IPFS node is ready')
ops()
})
@@ -47,25 +45,15 @@ class App extends React.Component {
})
})
- node.files.add([Buffer.from(stringToUse)], (err, res) => {
- if (err) {
- throw err
- }
+ node.files.add([Buffer.from(stringToUse)], (err, filesAdded) => {
+ if (err) { throw err }
- const hash = res[0].hash
+ const hash = filesAdded[0].hash
self.setState({added_file_hash: hash})
- node.files.cat(hash, (err, res) => {
- if (err) {
- throw err
- }
- let data = ''
- res.on('data', (d) => {
- data = data + d
- })
- res.on('end', () => {
- self.setState({added_file_contents: data})
- })
+ node.files.cat(hash, (err, data) => {
+ if (err) { throw err }
+ self.setState({added_file_contents: data})
})
})
}
diff --git a/examples/exchange-files-in-browser/package.json b/examples/exchange-files-in-browser/package.json
index 84ea13b2a4..6fa24583b8 100644
--- a/examples/exchange-files-in-browser/package.json
+++ b/examples/exchange-files-in-browser/package.json
@@ -3,8 +3,8 @@
"version": "0.0.0",
"scripts": {
"bundle": "browserify public/js/app.js > public/js/bundle.js",
- "serve": "http-server -c-1 -p 12345 public",
- "start": "npm run bundle && npm run serve"
+ "dev": "npm run bundle && npm run start",
+ "start": "http-server -c-1 -p 12345 public"
},
"license": "MIT",
"devDependencies": {
diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html
index 7b4da10591..6602f7c52e 100644
--- a/examples/exchange-files-in-browser/public/index.html
+++ b/examples/exchange-files-in-browser/public/index.html
@@ -62,7 +62,7 @@