Streaming MP4 from browser with webtorrent min js & seeding from instant.io on a server{Code Help}{Bounty} #420

florian583 · 2015-09-03T18:49:28Z

Hi
I'am trying to setup a server who will share torrents videos files, and a web-player page for clients, who need to play this video file over web torrent library and seed the file to, to share the bandwith.

Actually i have the server seeding over Instant.io
and my client page code look like this

<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
        <script src="http://wzrd.in/standalone/concat-stream@1.4.7"></script>
    </head>
    <body>
   <script>
      var client = new WebTorrent()
      var magnetUri = 'magnet:?xxxxxxxxxtracker.webtorrent.io'
      client.add(magnetUri + '&tr=wss://tracker.webtorrent.io', function (torrent) {
        // Got torrent metadata!
      console.log('Torrent info hash:', torrent.infoHash)
        // Let's say the first file is a webm (vp8) or mp4 (h264) video...
      var file = torrent.files[0]
        // Create a video element
      var video = document.createElement('video')
      video.controls = true
      document.body.appendChild(video)
        // Stream the video into the video tag
      file.createReadStream().pipe(video)
    })
   </script>
   </body>
</html>

But actually i have multiples issues :

-1/ I dont know how i can script this to seed the torrent to, my goal is to have the 'viewers' to 'seed' after downloading/while downloading

-2/ The player dont work, i have some odd error in console :
If i host the client page on the same server :

*If the client page is in local (MAMP), i do have a player opening, but cant load the video : *

florian583 · 2015-09-03T21:50:38Z

Got it work now, trying to install the seed-server with command line and webtorrent-hybrid but got a bunch of node errors and install fails. Digging into it.

Code of the client page look like that now :

<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="//awsdrp.net/QXT/webtorrent.min.js"></script>
        <script src="//awsdrp.net/9sx/concat-stream-1.4.7"></script>
    </head>
    <body>
      <script>
    //  var WebTorrent = require('webtorrent')
      var client = new WebTorrent()
      var magnetUri = 'magnet:?xxxxxxxtracker.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).
    file.appendTo('body')
  })
})
</script>
   </body>
</html>

-1/ The video file is played by the 'regular' player (html5 player of the browser), i would like to parse the video source to use it in FlowPlayer or another HTML5 Player with mores options, how i can put the video file source into a variable ?

-2/ How i can seed the file also, using

client.seed(files, function onTorrent (torrent) {
    console.log('Client is seeding:', torrent.infoHash)
  })

Got me bunch of error like the variable is not found etc, i would like to seed the file i'am downloading too, to share/save bandwidth.

Would appreciate any help, willing to donate/bounty 30/40$ for quick issue resolving.
Thanks

jakefb · 2015-09-10T09:34:14Z

Hi @Daemon024, I'm still trying to figure out how to get the blob url as soon as the video is loaded. I would like to know this too so when I figure it out I will let you know.

You can seed the video from a http webseed like this:

var parseTorrent = require('parse-torrent')
var http = require('stream-http')
var WebTorrent = require('webtorrent')

var torrentName = 'cityscape-chicago-ii.torrent'

http.get('/torrents/' + torrentName, function (res) {
  var data = [] // List of Buffer objects

  res.on('data', function(chunk) {
    data.push(chunk) // Append Buffer object
  })

  res.on('end', function() {
    data = Buffer.concat(data) // Make one large Buffer of it

    var torrentParsed = parseTorrent(data) // Parse the Buffer

    var client = new WebTorrent()

    client.add(torrentParsed, function (torrent) {
      torrent.files.forEach(function (file) {
        file.appendTo('body')
      })
    }
  })
})

You will have to compile this code with browserify and have a web server hosting the files (like this for example http://fastcast.nz/downloads/cityscape-chicago-ii.mp4). You can manually create a torrent file with a webseed by adding &ws= onto the end of the magnetic link you want, for example magnet:?xt=urn:btih:ab3f1350ebe4563a710545d0e33e09a7b7943ecf&tr=wss://tracker.webtorrent.io&ws=http%3A%2F%2Ffastcast.nz%2Fdownloads%2Fawakening-new-zealand-4k.mp4. You can use http://meyerweb.com/eric/tools/dencoder/ to encode the url.

Then paste the magnet link on https://instant.io/ while a webrtc peer is seeding, and download the torrent file. You will then have to upload the torrent file to your web server and define the torrentName (and the path before it like I have done).

You might find it useful to have a look at my project https://github.com/fastcast/fastcast. Good luck and let me know how it goes!

florian583 · 2015-09-10T17:42:03Z

Hi
I managed to get the blob url as soon as the video is loaded but i think i’am gonna switch to HLS because the seeding use a lot of ressources.
I’am running this on a ARM Quad core server + 4GB ram and just one torrent seed with Node server /or via Browser (Firefox, chrome) use 40/60% CPU in use……

feross · 2016-02-12T19:51:36Z

@jakefb I'm still trying to figure out how to get the blob url as soon as the video is loaded. I would like to know this too so when I figure it out I will let you know.

You can't get the blob url until the file you want is fully downloaded, because unfortunately Blob is an immutable type, so data can't be added to a blob after it is created. So, when you call file.getBlobURL(function callback (err, url) {}) that's going to wait until the file is fully downloaded.

feross · 2016-02-12T19:54:17Z

@Daemon024 -1/ The video file is played by the 'regular' player (html5 player of the browser), i would like to parse the video source to use it in FlowPlayer or another HTML5 Player with mores options, how i can put the video file source into a variable ?

This depends on exactly how FlowPlayer works, and I'm not familiar with the details. But you can now tell WebTorrent to render it's video into an existing <video> tag which should help you out.

If you can get FlowPlayer to make a video element without an actual video source, then you can get a reference to the <video> DOM node and pass it to WebTorrent, like this:

var videoElem = document.querySelector('video') // probably want to make sure this is actually the right video tag
file.appendTo(videoElem, function (err, elem) {
  // done!
})

feross · 2016-02-12T19:55:09Z

@Daemon024 -2/ How i can seed the file also?

client.add also seeds the file. There's no need to call client.seed since that's for creating a new torrent from some existing file data.

lock · 2018-05-04T19:38:13Z

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

feross closed this Feb 12, 2016

feross added the question label Feb 12, 2016

lock bot locked as resolved and limited conversation to collaborators May 4, 2018

webtorrent / webtorrent

Streaming MP4 from browser with webtorrent min js & seeding from instant.io on a server{Code Help}{Bounty} #420

Streaming MP4 from browser with webtorrent min js & seeding from instant.io on a server{Code Help}{Bounty} #420

florian583 commented Sep 3, 2015

This comment has been minimized.

florian583 commented Sep 3, 2015

This comment has been minimized.

jakefb commented Sep 10, 2015

This comment has been minimized.

florian583 commented Sep 10, 2015

This comment has been minimized.

feross commented Feb 12, 2016

This comment has been minimized.

feross commented Feb 12, 2016

This comment has been minimized.

feross commented Feb 12, 2016

This comment has been minimized.

lock bot commented May 4, 2018

webtorrent / webtorrent

Sponsor webtorrent/webtorrent

Join GitHub today

Streaming MP4 from browser with webtorrent min js & seeding from instant.io on a server{Code Help}{Bounty} #420

Streaming MP4 from browser with webtorrent min js & seeding from instant.io on a server{Code Help}{Bounty} #420

Comments

florian583 commented Sep 3, 2015

This comment has been minimized.

florian583 commented Sep 3, 2015

This comment has been minimized.

jakefb commented Sep 10, 2015

This comment has been minimized.

florian583 commented Sep 10, 2015

This comment has been minimized.

feross commented Feb 12, 2016

This comment has been minimized.

feross commented Feb 12, 2016

This comment has been minimized.

feross commented Feb 12, 2016

This comment has been minimized.

lock bot commented May 4, 2018