Experiment: porting hypervision to the browser
hypervision is a desktop application built with
electron that lets you watch and broadcast peer-to-peer live streams. When users connect to a stream, they distribute the data they receive amongst each other. This bypasses the need for a central server, and the huge amount of bandwidth required to deliver the same data to every user.
hypervision is built on top of
electron, it has access to the
node runtime, allowing users to connect to each other using protocols like
UTP. In web browsers like Firefox & Chrome, we don't have access to these tools. We are required to use
WebRTC, a collection of protocols that allows browsers to connect directly to each other.
This repository is an experiment in porting
hypervision to the browser, using
Clone this repo to your hard-drive:
$ git clone https://github.com/louiscenter/hypervision-browser
Install required dependencies:
$ npm install
Run the development server:
$ npm start
NOTE: Please test in both Firefox & Chrome. Sometimes one works, and the other doesn't. I'm not sure why.
Open two tabs inside the same browser, and navigate each to
- In one tab, open the
- In the other, open the
Make sure to open the devtools console in each tab.
broadcasttab, press the
[Start broadcast]button. Your browser should ask for access to your webcam and microphone. For this to work, you will need to allow access.
Your broadcast has now begun. Copy the
[Start broadcast]button to your clipboard.
watchtab, paste the key you just copied into the
Key:input field, then press the
[Watch broadcast]button above. This tab will now try connecting to the broadcast in the other tab.
Joining the swarm can often be unreliable. For this, we are using a
signalhubwsserver, which has been installed on a
now.shinstance to co-ordinate
WebRTCconnections. Connection success rates vary, sometimes because of the browser you're using. I'm not sure why.
If peer connection is successful, the viewer will tend to download the first and second blocks of the
hypercorefeed, and then either timeout before it can download anymore, or just stop working altogether. Once again, I'm very new to
WebRTC, so I'm unsure as to why. Getting
datfeeds to replicate between peers using
nodeis pretty flawless, but in the browser success has been patchy.
If successive block downloads are successful, incoming video data should start being appended to a
MediaSourceobject. However, I haven't been able to successfully make the
<video>element on the
watchpage playback. I'm not sure if I'm appending data incorrectly or not.
Any feedback/ideas regarding the issues above is much appreciated. I'd be lying if I said I really knew what I was doing.