Electron with WebTorrent for a video streaming app


#1

Hi, I’m trying to use Electron to make an app for streaming torrent videos with WebTorrent. WebTorrent is a torrent client for node and the browser and it can communicate to web peers (WebRTC) and normal BitTorrent peers.

What I want to do is use WebTorrent in a node like process so that it can communicate with BitTorrent peers as well as web peers. When I include my JavaScript code in the HTML file without first compiling it with Browerify, WebTorrent is able to communicate with BitTorrent peers, but I’m not able to use the videostream module to stream the torrent to the video element on the page.

I get this error in the console

“Uncaught TypeError: data.arrayBuffer is not a function”, source: /usr/lib/node_modules/webtorrent/node_modules/dezalgo/node_modules/asap/asap.js

I’m new to Electron but I have found that it runs two different types of processes: a node like main process and a chrome like renderer process. I apologise for this rather long issue, but I’m unsure what process I’m running my code in. Maybe someone can point me in the right direction. I think this issue could be related to how Electron treats buffers in the main process, like on the remote page in the docs.

Here’s a simplified version of the code in my GitHub repository fastcast-app

var videostream = require('videostream')
var WebTorrent = require('webtorrent')

var client = new WebTorrent()

client.add(magnetUri, onTorrent) // magnetUri is defined on the HTML page

// This is the important part
function onTorrent (torrent) {

  torrent.files.forEach(function (file) {
    // 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
    videostream(file, video)
}

#2

You should probably check out the Quick Start document here:

http://electron.atom.io/docs/latest/tutorial/quick-start/

which explains the separation between the main process and the renderer process. Node is available in both processes too.

I talk a lot about the separation and how it is best to use it in this topic too:


#3

https://popcorntime.io and https://github.com/mafintosh/playback may be of interest


#4

Hi sorry for the very late reply.

Thanks @leedohm for the information. I have a better idea of how Electron works now.

@balupton I ended up us using a similar approach to playback, which is setting up a HTTP server and using it to stream the torrent to the video element.