├── .gitignore ├── README.md ├── broadcast.js ├── config.js ├── index.js ├── lib └── getMimeType.js ├── package-lock.json ├── package.json └── watch.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .dat 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Experiment: porting hypervision to the browser 2 | [`hypervision`](https://louis.center/p2p-hypervision) is a desktop application built with `dat` and `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. 3 | 4 | As `hypervision` is built on top of `electron`, it has access to the `node` runtime, allowing users to connect to each other using protocols like `TCP`, `UDP` and `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. 5 | 6 | This repository is an experiment in porting `hypervision` to the browser, using `WebRTC`. 7 | 8 | ## Install 9 | Clone this repo to your hard-drive: 10 | ``` 11 | $ git clone https://github.com/louiscenter/hypervision-browser 12 | ``` 13 | 14 | Install required dependencies: 15 | ``` 16 | $ npm install 17 | ``` 18 | 19 | Run the development server: 20 | ``` 21 | $ npm start 22 | ``` 23 | 24 | ## Instructions 25 | **NOTE: Please test in *both* Firefox & Chrome. Sometimes one works, and the other doesn't. I'm not sure why.** 26 | 27 | Open two tabs inside the same browser, and navigate each to `http://localhost:8080`. 28 | 29 | - In one tab, open the `broadcast` page. 30 | - In the other, open the `watch` page. 31 | 32 | Make sure to open the devtools console in each tab. 33 | 34 | - In the `broadcast` tab, 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. 35 | 36 | - Your broadcast has now begun. Copy the `key` underneath the `[Start broadcast]` button to your clipboard. 37 | 38 | - In the `watch` tab, 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. 39 | 40 | ## Current issues 41 | - Joining the swarm can often be unreliable. For this, we are using a `signalhubws` server, which has been installed on a `now.sh` instance to co-ordinate `WebRTC` connections. Connection success rates vary, sometimes because of the browser you're using. I'm not sure why. 42 | 43 | - If peer connection is successful, the viewer will tend to download the first and second blocks of the `dat`/`hypercore` feed, 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 `dat` feeds to replicate between peers using `node` is pretty flawless, but in the browser success has been patchy. 44 | 45 | - If successive block downloads are successful, incoming video data should start being appended to a `MediaSource` object. However, I haven't been able to successfully make the `