Video player with js-ipfs

[daviddias]

Similar to #127, but that loads a video from IPFS (with seeks and everything)

[daviddias]

@moshisushi is paving the path by taking the lead and implementing hls over IPFS with js-ipfs \o/

Demo on: https://ipfs.io/ipfs/QmPJB4FyoM8CMGt9PdsTwUsiaNho6TGnL1NyPkoFVjtZgH/examples/index.html

Code at: https://github.com/moshisushi/hlsjs-ipfs-loader

This is is pretty cool stuff @moshisushi ! Let me know how we can help :)

[pgc-13]

@diasdavid The media I've used for this example is audio only actually. Video works as well (yes, a Big Buck Bunny test flight was carried out 😄) but due to the higher bandwidth requirements I run into some performance issues with libp2p (well, that's the theory), which makes the buffering of segments a bit slow (see also: https://github.com/moshisushi/ipfs-lab/tree/master/secio-test)

[dignifiedquire]

I spoke too soon, the above profile is from when the content is already stored in cache

[pgc-13]

@diasdavid Added a README to the PR now (0% proof reading at this point): https://github.com/moshisushi/js-ipfs/tree/master/examples/browser-video-streaming

Wasn't sure if you still wanted a discussion about performance in there (so I mostly left it out for now), or if that could go elsewhere.

[Beanow]

I'm working on a very similar project, it's inspired by the old Grooveshark broadcasts feature.
With https://github.com/ipfs-shipyard/ipfs-pubsub-room/ I send coordination messages for leader election, syncing playlists and playback position. And straight IPFS files for data transport. (Though HLS looks very interesting to do chunking, I'm currently fetching the whole mp3/ogg file and turn them into blobs as a proof of concept.)

Even with recent performance boosts, secio still appears to be the greatest performance offender. However I might have my topology wrong and be getting excessive chatter between peers. Having 1 host and 1 listener generally works well enough on a desktop. A phone will struggle with either of those though. It's when I add more listeners, say 4, that it starts crashing chrome tabs and makes firefox freeze within a minute or 2.

There's a lot more moving parts in my proof of concept code, so it might be tricky to profile. Perhaps it can make for a good stress test though? A recent build: https://ipfs.io/ipfs/QmYHgYysnGmiEc7f8CSzoNiJYyJoXS15eP9kaQNdZKReSs/

1. Wait for leader election to select a host.
2. If the host is you, you'll have a red "ON AIR".
3. Use the file picker to add an mp3/ogg to the playlist.
4. Open another instance to listen, it should mirror what the host does and fetch files in the playlist.

[mitra42]

One performance issue I'm seeing is inability to seek, but I see references to seeking above, so I'm wondering how people are doing it in a browser - the other libraries I've used see the Video tag calling back to a createReadStream(opts) where opts passes start and end vaues, but despite it being a Node ReadableStream there doesn't appear to be a way to get to this "createReadStream" on IPFS ?

[daviddias]

Update here:

• We have a HLS.js example at - https://github.com/ipfs/js-ipfs/tree/master/examples/browser-video-streaming by @moshisushi
• @achingbrain is working on a new one with videostream at https://github.com/ipfs/js-ipfs/pull/1231/files