Streaming video using js-ipfs in the Browser

[milankragujevic]

• Version: 0.25.2
• Platform: macOS 10.12.6 Chrome 60.0.3112.113
• Subsystem: Not sure?

Type:

Question

Severity:

High / Critical (sometimes)

Description:

I cannot seem to get js-ipfs communicating with go-ipfs... I get cryptic errors, and I'm not quite sure is that even supposed to work. My code is this:

const ipfs = new Ipfs({
  init: true,
  start: true,
  repo: 'ipfs-testing-' + window.reqID,
  config: {
    Swarm: [
      "/dns4/milankragujevic.com/tcp/9999/ws",
      "/libp2p-webrtc-star/dns4/star-signal.cloud.ipfs.team/wss"
    ],
    Bootstrap: [
      "/dns4/ams-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLer265NRgSp2LA3dPaeykiS1J6DifTC88f5uVQKNAd",
      //"/dns4/sfo-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLju6m7xTh3DuokvT3886QRYqxAzb1kShaanJgW36yx",
      "/dns4/lon-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLMeWqB7YGVLJN3pNLQpmmEk35v6wYtsMGLzSr5QBU3",
      //"/dns4/sfo-2.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLnSGccFuZQJzRadHn95W2CrSFmZuTdDWP8HXaHca9z",
      //"/dns4/sfo-3.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLPppuBtQSGwKDZT2M73ULpjvfd3aZ6ha4oFGL1KrGM",
      "/dns4/sgp-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLSafTMBsPKadTEgaXctDQVcqN88CNLHXMkTNwMKPnu",
      "/dns4/nyc-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm",
      "/dns4/nyc-2.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64"
    ]
  }
})

ipfs.on('error', (err) => {
  console.error(err)
})

ipfs.on('ready', () => {
  ipfs.files.cat('QmcPZGXSyaQSnDVEtJrgtp2EyxhENiBdpGa8pfs5rMBCWr').then((data) => {
    window.VideoStream(data, document.getElementsByTagName('video')[0])
  })
})

I built the latest 0.25.2 version with gulp and set it up but it doesn't seem to work, I usually get no response or this:

Error: Stream ended prematurely

You can see it in action here at the link below.

I'm trying to stream Sintel.mp4 from WebTorrent, which I know for a fact should work, using the package videostream, as WebTorrent uses, and this usually works with HTTP-storage and a custom API for loading data via AJAX, or via vanilla WebTorrent, but doesn't seem to work with js-ipfs. I'm not sure whether the problem is with videostream or with js-ipfs, but I'm leaning more on the js-ipfs, because it seems to never even try to execute videostream.

Thanks!

Steps to reproduce the error:

https://milankragujevic.com/ipfs-proj/

[daviddias]

Thanks for reporting this, @milankragujevic. We are investigating a possible regression in the WebSockets transport (either in js-ipfs or go-ipfs side //cc @lgierth).

Meanwhile, check the work developed by @moshisushi on https://github.com/ipfs/js-ipfs/issues/128 and https://github.com/ipfs/js-ipfs/pull/947, he built a HLS Video Streamer using js-ipfs and his demo is fully working.

Btw, this seems like an excellent test for js-ipfs, would you like to consider adding it to the batch of tests? Thank you!

[daviddias]

Hey @milankragujevic, check if https://github.com/ipfs/js-ipfs/tree/master/examples/browser-video-streaming is helpful to you. Thanks to @moshisushi for making it happen!

[daviddias]

btw @milankragujevic, your issue is because you are passing a Stream object to a thing that expects a buffer. You need to buffer up the stream.

You can do that manually or just use bl

[milankragujevic]

The problem was that the code inside the function NEVER got called, so it doesn't even matter.

[daviddias]

@milankragujevic test with the latest master, that was due to infra changes that separated bootstrappers from gateways, it was fixed with #973

[OstlerDev]

I downloaded milankragujevic's demo app, built the latest master and swapped it in, but it still doesn't seem to work.

It would be very helpful to get an example made for the native html5 video player, and VideoJS once this works though.

[milankragujevic]

@OstlerDev Hi, I actually got it to work, you can see it here, thought it's not for distribution yet, that's why there's the warning in the footer.

https://milankragujevic.com/ipfs-proj2/

[OstlerDev]

Very interesting and cool, I will be watching and waiting until there is a stable version to start testing with.

Glad to see you got it working!

[NinjaTurtle007]

So when realistically we can have working p2p live video streaming? And would it work for users that share IP, are behind NAT or have dynamic IP?

[victorb]

@NinjaTurtle007 there is currently two threads in discuss.ipfs.io about live (or not) streaming.

• https://discuss.ipfs.io/t/video-music-streaming
• https://discuss.ipfs.io/t/is-it-possible-to-use-ipfs-for-live-video-streaming

Copy paste from those:

Here is a tiny proof of concept for webcam streaming between multiple peers. It's inefficient since it sends the data directly to each peer, instead of sending a hash identifying the content then helping everyone pulling it down. But it works.

Repository: https://github.com/victorbjelkholm/resort Demo: https://ipfs.io/ipfs/QmaK1BRzvYU7F2taQ5qAazKKDGqSgZ9vu2vSYyw1L852ws/

[daviddias]

Let's convert this thread into a thread on https://github.com/ipfs/research-p2p-video and explore more ways to use IPFS to do p2p video :)

[daviddias]

For development, check the latest here -- https://github.com/ipfs/js-ipfs/issues/128#issuecomment-367260468. Closing this issue to avoid duplicated discussion in multiple points.