Issues dealing with createObjectURL(file) to stream video

[theocousin]

Hi there i'm stuck on this issue using Blob.
I'm trying to stream videos using webtorrent and an external video player.
For now i'm using flowplayer as player.
The problem is that it requires a source to load and play the video.
Here is the thing, i want to stream the video using webtorrent (this part works fine) as its more efficient for high definition streaming and maybe 4K.
But the problem with that is that i got no direct path to the server, and i would like to use the blob path stored on the browser.
But i cant find out why this isnt working for me.

var client = new WebTorrent()
var magnetUri = 'magnet:?xt=urn:btih:2d009baa395c94f6ad30375cfbae87c8cf0e5fff&dn=New+Zealand+in+4K+(Ultra+HD).mp4&tr=wss%3A%2F%2Ftracker.webtorrent.io
    client.add(magnetUri, function (torrent) {
      // Got torrent metadata!
    console.log('Client is downloading:', torrent.infoHash)
    torrent.files.forEach(function (file) {

// Display the file by appending it to the DOM. Supports video, audio, images, and
// more. Specify a container element (CSS selector or reference to DOM node).

function createObjectURL ( file ) {
    if ( window.webkitURL ) {
        return window.webkitURL.createObjectURL( file );
    } else if ( window.URL && window.URL.createObjectURL ) {
        return window.URL.createObjectURL( file );
    } else {
        return null;
    }
}

var url = createObjectURL( file );

On every browser the createObjectURL doesn't work. I've been trying with "objectURL = URL.createObjectURL(blob);" but same issues.
Hope i've been clear enough and hope you guys will take time to help me fix this problem.

[theocousin]

Added 15$ Bounty
https://www.bountysource.com/issues/26461772-issues-dealing-with-createobjecturl-file-to-stream-video

[gillesdemey]

You can get the BlobURL by calling the getBlobURL function on the file object.

The file object returned by WebTorrent is very different from the native JavaScript File object.

Example:

var client = new window.WebTorrent()
var magnetUri = 'magnet:?xt=urn:btih:2d009baa395c94f6ad30375cfbae87c8cf0e5fff&dn=New+Zealand+in+4K+(Ultra+HD).mp4&tr=wss%3A%2F%2Ftracker.webtorrent.io'

  client.add(magnetUri, function (torrent) {
    console.log('Client is downloading:', torrent.infoHash)

    torrent.files.forEach(function (file) {
      file.getBlobURL(function (err, url) {
        if (err) throw err
        console.log(url)
      })
    })

  })

You can check out the source: https://github.com/feross/webtorrent/blob/f1d966c24739d982128e247e48cc41f2a82ee30a/lib/file.js#L109-L121

[theocousin]

Alright i’m a fucktard.
I « fixed » the problem. The fact is i get the blob url once the buffer on the vid is fully loaded and i never tried to wait 20 mins till the video was completely loaded
Now my problem is that i need to get the blob url at the same time the video starts to load.
Any ideas ?
Edit I guess this is because of this "and callback will be called once the file is ready"
Any idea on how to remove the callback ?

Le 5 sept. 2015 à 00:38, Gilles De Mey notifications@github.com a écrit :

You can get the BlobURL by calling the getBlobURL function on the file object.

The file object returned by WebTorrent is very different from the native JavaScript File object.

Example:

var client = new window.WebTorrent()
var magnetUri = 'magnet:?xt=urn:btih:2d009baa395c94f6ad30375cfbae87c8cf0e5fff&dn=New+Zealand+in+4K+(Ultra+HD).mp4&tr=wss%3A%2F%2Ftracker.webtorrent.io'

client.add(magnetUri, function (torrent) {
console.log('Client is downloading:', torrent.infoHash)

torrent.files.forEach(function (file) {
  file.getBlobURL(function (err, url) {
    if (err) throw err
    console.log(url)
  })
})

})
You can check out the source: https://github.com/feross/webtorrent/blob/f1d966c24739d982128e247e48cc41f2a82ee30a/lib/file.js#L109-L121 https://github.com/feross/webtorrent/blob/f1d966c24739d982128e247e48cc41f2a82ee30a/lib/file.js#L109-L121
—
Reply to this email directly or view it on GitHub #423 (comment).

[insanux]

I am struggling with something like this with audio. Is it possible to wrap a previously created video/audio element with file.appendTo() to use streaming? How could we do it in other way?

[ericwooley]

@insanux it's possible to append to a buffer while it's set as the source of something, but it's not easy and codecs needs to line up and it's strange. I am doing it here: (built) with videos, it works under certain circumstances and not with others. It's still something I am playing a lot with for a video streaming setup I want to create.

[DiegoRBaquero]

@theocousin Any updates?

The Blob URL is only returned once fully loaded. Append-to can stream things using other deps like MediaSourceStream, you could simulate it. Check https://github.com/feross/webtorrent/blob/master/lib/append-to.js

[feross]

You can use file.renderTo(element) to stream into an existing video or audio tag.

So, if you're using some third-party video player, you need to get the DOM <video> tag somehow, then call:

file.renderTo(videoTag)

And the video should start to stream before it's fully downloaded.

[lock]

This thread has been automatically locked because it has not had recent activity. To discuss futher, please open a new issue.