WebRTC Connection, using WebRTC, Promise.race

Intro

Some time ago I found out about WebRTC and used it in a couple of personal projects. One of them is still working today, even if I never use it. The other one is not working anymore, and will never work again, since browsers have changed (for the better, probably).

WebRTC

The problem I wanted to solve is that I wanted to be able to take a picture from my phone remotely. The reason is that I found myself in situations when I needed to take a picture of people, including myself, by accurately placing my smartphone somewhere so that we all were included in the picture. Then, I needed to set a timer and run.

I needed then to find a way to stream video and controls between two browser, possibly without needing a server.

WebRTC allows to do exactly this since it streams data between clients (almost) server-free! This is possible because WebRTC is a peer-to-peer communication protocol that, once set up a communication link between two (or more) via a server, it will keep sending data directly between the two clients (browsers, in this case) bypassing firewalls and any intermediate step between them.

You can see the website here and the code here

WebRTC Connection

Where I work we usually start every frontend project from the same kickstarter, accurapp. It’s a heavily customized version of create-react-app, and it will spawn a webpack dev server that serves the application we are working on on port 8000 (as default) on host 0.0.0.0. This means that any computer in the same LAN will have access to whatever we are working on at the moment, just by connecting to the local IP of the machine on port 8000.

I decided to write a small webpage that allowed me to see what my coworker were working on, by looking at their port 8000. I just needed my local IP, then I’d check all of the possible hosts inside my network by trying a fetch to each possible value of the last octet in my IP address on port 8000. Only successful ones would then be used as src for an iframe that would show the website someone was working on.

In order to retrieve my local IP address I retrieved a IceCandidate trough the RTCPeerConnection. This candidate used to have a property with the local IP, that now is hidden as a random string.

Promise.race

It’s a widely known and used method: Promise.race receives an iterable of promises and returns a promise that resolves when the first promise in the iterable is resolved.

But what’s interesting is that if the iterable is empty, Promise.race will never resolve. It makes sense, but still I think it can cause problems if unknown.