Skip to content
This repository was archived by the owner on Feb 12, 2024. It is now read-only.

Commit 2c4b8b3

Browse files
daviddiasdaviddias
authored
feat: implementing the new streaming interfaces (#1086)
1 parent 1b1fa05 commit 2c4b8b3

File tree

27 files changed

+476
-566
lines changed

27 files changed

+476
-566
lines changed

‎examples/browser-browserify/src/index.js

+4-14
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
11
'use strict'
22

3-
const concat = require('concat-stream')
4-
const Buffer = require('safe-buffer').Buffer
5-
63
const IPFS = require('../../../src/core') // replace this by line below
74
// var IPFS = require('ipfs')
85

96
const node = new IPFS({
107
repo: String(Math.random() + Date.now())
118
})
129

13-
node.on('ready', () => {
14-
console.log('IPFS node is ready')
15-
})
10+
node.once('ready', () => console.log('IPFS node is ready'))
1611

1712
function store () {
1813
var toStore = document.getElementById('source').value
@@ -33,16 +28,11 @@ function store () {
3328

3429
function display (hash) {
3530
// buffer: true results in the returned result being a buffer rather than a stream
36-
node.files.cat(hash, (err, res) => {
37-
if (err || !res) {
38-
return console.error('ipfs cat error', err, res)
39-
}
31+
node.files.cat(hash, (err, data) => {
32+
if (err) { return console.error('ipfs cat error', err) }
4033

4134
document.getElementById('hash').innerText = hash
42-
43-
res.pipe(concat((data) => {
44-
document.getElementById('content').innerText = data
45-
}))
35+
document.getElementById('content').innerText = data
4636
})
4737
}
4838

‎examples/browser-script-tag/index.html

+16-40
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,17 @@
44
<title>IPFS in the Browser</title>
55
<script src="https://unpkg.com/ipfs/dist/index.min.js"></script>
66
<script type="text/javascript">
7-
const repoPath = 'ipfs-' + Math.random()
7+
const node = new Ipfs({ repo: 'ipfs-' + Math.random() })
88

9-
// Create an IPFS node
10-
const node = new Ipfs({
11-
init: false,
12-
start: false,
13-
repo: repoPath
14-
})
15-
16-
// Init the node
17-
node.init(handleInit)
18-
19-
function handleInit (err) {
20-
if (err) {
21-
throw err
22-
}
23-
24-
node.start(() => {
25-
console.log('Online status: ', node.isOnline() ? 'online' : 'offline')
9+
node.once('ready', () => {
10+
console.log('Online status: ', node.isOnline() ? 'online' : 'offline')
2611

27-
document.getElementById("status").innerHTML= 'Node status: ' + (node.isOnline() ? 'online' : 'offline')
12+
document.getElementById("status").innerHTML= 'Node status: ' + (node.isOnline() ? 'online' : 'offline')
2813

29-
// You can write more code here to use it. Use methods like
30-
// node.files.add, node.files.get. See the API docs here:
31-
// https://github.com/ipfs/interface-ipfs-core/tree/master/API
32-
})
33-
}
14+
// You can write more code here to use it. Use methods like
15+
// node.files.add, node.files.get. See the API docs here:
16+
// https://github.com/ipfs/interface-ipfs-core/tree/master/API
17+
})
3418
</script>
3519
</head>
3620
<body>
@@ -44,32 +28,24 @@ <h2>Some suggestions</h2>
4428
<p>Try adding a new file:</p>
4529

4630
<code style="display:block; white-space:pre-wrap; background-color:#d7d6d6">
47-
node.files.add(new node.types.Buffer('Hello world!'), (err, res) => {
48-
if (err || !res) {
31+
node.files.add(new node.types.Buffer('Hello world!'), (err, filesAdded) => {
32+
if (err) {
4933
return console.error('Error - ipfs files add', err, res)
5034
}
5135

52-
res.forEach((file) => console.log('successfully stored', file))
36+
filesAdded.forEach((file) => console.log('successfully stored', file.hash))
5337
})
5438
</code>
5539

5640
<p>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'</p>
5741

5842
<code style="display:block; white-space:pre-wrap; background-color:#d7d6d6">
59-
node.files.cat('QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY', function (err, stream) {
60-
var res = ''
61-
62-
stream.on('data', function (chunk) {
63-
res += chunk.toString()
64-
})
65-
66-
stream.on('error', function (err) {
67-
console.error('Error - ipfs files cat ', err)
68-
})
43+
node.files.cat('QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY', function (err, data) {
44+
if (err) {
45+
return console.error('Error - ipfs files cat', err, res)
46+
}
6947

70-
stream.on('end', function () {
71-
console.log('Got:', res)
72-
})
48+
console.log(data.toString())
7349
})
7450
</code>
7551
</body>

‎examples/browser-video-streaming/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
This example shows a method for video/audio streaming in the browser over IPFS.
44

55
## Why use HLS?
6+
67
HLS (Apple's HTTP Live Streaming) is one of several protocols currently available for adaptive bitrate streaming.
78

89
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
1213
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.
1314

1415
## hlsjs-ipfs-loader
16+
1517
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:
1618

1719
```html
@@ -21,6 +23,7 @@ The hls.js library ships with an HTTP based content loader only, but it's fortun
2123
```
2224

2325
## Generating HLS content
26+
2427
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.
2528

2629
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:

‎examples/browser-video-streaming/streaming.js

+12-24
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,18 @@
55

66
const testhash = 'QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K'
77
const repoPath = 'ipfs-' + Math.random()
8-
const ipfs = new Ipfs({
9-
init: false,
10-
start: false,
11-
repo: repoPath
12-
})
8+
const node = new Ipfs({ repo: repoPath })
139

14-
ipfs.init((err) => {
15-
if (err) {
16-
throw err
10+
node.on('ready', () => {
11+
Hls.DefaultConfig.loader = HlsjsIpfsLoader
12+
Hls.DefaultConfig.debug = false
13+
if (Hls.isSupported()) {
14+
const video = document.getElementById('video')
15+
const hls = new Hls()
16+
hls.config.ipfs = node
17+
hls.config.ipfsHash = testhash
18+
hls.loadSource('master.m3u8')
19+
hls.attachMedia(video)
20+
hls.on(Hls.Events.MANIFEST_PARSED, () => video.play())
1721
}
18-
19-
ipfs.start(() => {
20-
Hls.DefaultConfig.loader = HlsjsIpfsLoader
21-
Hls.DefaultConfig.debug = false
22-
if (Hls.isSupported()) {
23-
const video = document.getElementById('video')
24-
const hls = new Hls()
25-
hls.config.ipfs = ipfs
26-
hls.config.ipfsHash = testhash
27-
hls.loadSource('master.m3u8')
28-
hls.attachMedia(video)
29-
hls.on(Hls.Events.MANIFEST_PARSED, () => {
30-
video.play()
31-
})
32-
}
33-
})
3422
})

‎examples/browser-webpack/src/components/app.js

+8-20
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,9 @@ class App extends React.Component {
2525
function create () {
2626
// Create the IPFS node instance
2727

28-
node = new IPFS({
29-
repo: String(Math.random() + Date.now())
30-
})
28+
node = new IPFS({ repo: String(Math.random() + Date.now()) })
3129

32-
node.on('ready', () => {
30+
node.once('ready', () => {
3331
console.log('IPFS node is ready')
3432
ops()
3533
})
@@ -47,25 +45,15 @@ class App extends React.Component {
4745
})
4846
})
4947

50-
node.files.add([Buffer.from(stringToUse)], (err, res) => {
51-
if (err) {
52-
throw err
53-
}
48+
node.files.add([Buffer.from(stringToUse)], (err, filesAdded) => {
49+
if (err) { throw err }
5450

55-
const hash = res[0].hash
51+
const hash = filesAdded[0].hash
5652
self.setState({added_file_hash: hash})
5753

58-
node.files.cat(hash, (err, res) => {
59-
if (err) {
60-
throw err
61-
}
62-
let data = ''
63-
res.on('data', (d) => {
64-
data = data + d
65-
})
66-
res.on('end', () => {
67-
self.setState({added_file_contents: data})
68-
})
54+
node.files.cat(hash, (err, data) => {
55+
if (err) { throw err }
56+
self.setState({added_file_contents: data})
6957
})
7058
})
7159
}

‎examples/exchange-files-in-browser/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"version": "0.0.0",
44
"scripts": {
55
"bundle": "browserify public/js/app.js > public/js/bundle.js",
6-
"serve": "http-server -c-1 -p 12345 public",
7-
"start": "npm run bundle && npm run serve"
6+
"dev": "npm run bundle && npm run start",
7+
"start": "http-server -c-1 -p 12345 public"
88
},
99
"license": "MIT",
1010
"devDependencies": {

‎examples/exchange-files-in-browser/public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ <h2>Peers</h2>
6262
</div>
6363

6464
<!-- The IPFS node module -->
65-
<script src="//unpkg.com/ipfs/dist/index.min.js"></script>
65+
<!-- <script src="//unpkg.com/ipfs/dist/index.min.js"></script> -->
6666
<!-- <script src="js/app.js"></script> -->
6767
<script src="js/bundle.js"></script>
6868
</body>

0 commit comments

Comments
 (0)