Update: the day after I posted this stranger video went viral in japan. It was a ton of fun. The viralness has died off for now; I’m working on a separate post about the experience of using stranger video at peak popularity.

I have a new project. It’s called ‘stranger video.’ It’s about staring at strangers.

this is me and a friend - no strangers!

stranger video has some rules:

  • you are paired with a stranger for a video call.
  • video is tightly cropped to just your face and cuts out if there’s no face in frame.
  • no audio, no text chat, just silent video.
  • video cuts out as soon as one of you blinks.

You can play it at stranger.video

It’s the most uncomfortable thing I’ve built. I hope you love it.

Why did you make this

You know how sometimes you’re walking down a long hallway and you see an acquaintance at the other end of the hallway and you have to choose when to acknowledge their presence and make eye contact? And how if you acknowledge them too early there’s this social void that you feel obligated to fill with shouted smalltalk, but if you avoid eye contact for too long you feel awkward and self-conscious? Just me? I’ve thought about this problem non-stop since I had to navigate the loggias of Grinnell College as a teen.

this hallway spanned all the dorms on my side of campus

Anyway, originally I wanted to make a game about that. While texting with my friend Ellen about that idea we got to talking about eye tracking, which sparked the idea of staring at real strangers. Everyone I floated this to had a super strong reaction (often negative!) and that just made me like the idea more. A friend told me that it sounded like “something that Jesse from Before Sunrise would start talking about out of nowhere.” So I made it.

When I sat down to work on stranger video I had a few goals:

  1. I wanted to make something that I was comfortable playin1
  2. I wanted the site to be both friendly and weird: I wanted you to feel comfortable enough to start playing, but leave a little unsettled.
  3. I wanted it to be about strangers, not about staring with your friends.
  4. I wanted something that you could interpret as a game or as weird internet performance art.

Removing audio and text chat, cropping to just the face, and not showing video if there was no face on screen all came from 1. Each limits what I’m likely to see on the site, which makes me more comfortable using it. The system is certainly not perfect (hold up a sign! write something on your face!), but that’s ok.

I spent some time thinking about how to reduce the flickering produced by constantly re-cropping faces out of the video feed, but 2 led me to embrace the flickering instead. I started to imagine stranger video as a hole in your computer that someone looks at you through and I thought that the flickering added to that feeling. 2 is also what led me to (attempt) “modern” feeling fonts and CSS animations, friendly-ish colors, and a couple of emojis: I thought it was important that the site was something other than just a cropped webcam.

And 3 was a very convenient way to cut features. For example I originally thought I might let you create “rooms” (e.g. https://stranger.video/my-room) where you’d only match with other folks in that room. My guess is that if I added this feature more people might use the website but the “global” room would end up relatively dead. So I cut the feature.

4 meant that I resisted adding elements that I thought were overly gamey. For example, there is no global leaderboard or even a local “how many times have you blinked” counter. I think it’s cool to be able to experience the game as a weird fleeting connection with a stranger that you’ll never be able to contact and didn’t want to take away from that experience.

I am going to hold up a piece of paper with a face on it

Ok!

There are some kinds of cheating that I thought carefully about while building the site. For example, both sides of the connection validate blink/face detection for both feeds and are otherwise careful about trusting what the other party says.

But beyond those considerations I wanted to give folks something to experiment with. It’s fun to load up the site, move your head around, and watch the feed expand and contract. It’s fun to see what it detects as blinking and what it’ll let slide - can you keep one eye open so wide that you can blink with the other one? And so I think interacting with the site by, say, playing a looping video of yourself not blinking is kinda fascinating.

Of course, depending on whether and how folks end up using the site I may need to further tweak how it works or what it allows.

I would like to put this in my physical space

I’d love to hook up ~30 tablets to a special instance of stranger video and install them in physical spaces around the country. It’d be so fun to see how people interacted with the devices and I think there are folks who would be happy to use this in a gallery setting but wouldn’t touch the website.

looking at you, moma

I’ve got a few ideas for places I could put this but I’d love to hear from you; if you’re interested please reach out!

How did you make this

Smart people solved the hard parts for me. Google’s mediapipe does the face detection. Video is exchanged via webrtc and I run coturn to handle STUN/TURN2. Most content is served up via nginx; nginx also acts as a reverse proxy for a tiny server I wrote that takes websocket connections, matches up strangers, and helps them relay information.

As for the rest: it’s largely a 1200-line frameworkless javascript file along with some hand-written HTML and CSS! This was my first attempt at building a real dynamic website3 that had animations and different states and did stuff. The web ecosystem is huge and overwhelming and I figured learning the basics of making a website would be a lot easier if I did everything myself (and came to actually understand the problems that a framework would solve for me).

I leaned heavily on GPT4 to help me write my CSS and HTML and answer my javascript questions. This was my first time really using ChatGPT to program.

helpful! but not sure my instruction to respond in probabilities is working

Using GPT4 for HTML and CSS was great once I got the hang of it. Most of my questions were super simple and GPT4 gave great answers. Early on I asked for big blocks of HTML and CSS without being appropriately skeptical; later I learned to make smaller and more specific requests and to validate bits that I didn’t understand.

GPT4 was also great for learning / writing javascript. It was more natural for me to be skeptical, probably because javascript is pretty easy to read. I found that GPT4 often couldn’t write the exact code that I needed for things like “setting up a WebRTC connection” or “cropping a face out of a video in real time” but it did know what APIs to use, which meant it was very fast for me to write the right code by looking at its wrong code.

What’s next?

I’m super curious to see how folks end up using stranger video! And folks have given me great ideas about ways to expand on the site (my friend kelin suggested a version where everyone appears on the same page; josh suggested adding tasks that folks needed to cooperate on). I’m excited to spend more time in this space.

The site could also have a better single-player experience while you’re waiting for someone - maybe you could have a staring contest with yourself, or play some other eye-based game. I’m going to attempt to bootstrap my way out of this problem by playing a lot for the next few days, but maybe long-term I’ll aim to solve it some other way. Not thinking about the one-player experience for a many-player experience is a mistake I’ve made before - hopefully it goes ok this time :).

I’m also submitting stranger video to this year’s GDC Experimental Game Workshop. I have no idea if it’s a good fit. But I hope it gets in!

I keep telling folks that my next game will be a more traditional game and then I keep making weird bullshit. I think maybe my next game will be a more traditional game. We’ll see.

Finally - if building something like this sounds fun to you I encourage you to check out the Recurse Center, a retreat for programmers that’s a great spot to stretch your creative muscles and build weird stuff like this. I got a ton of help support from my friends in the RC community while building this game (that’s an RC friend in the video!). Consider applying.

  1. omegle actually shut down while I was making this, which feels worth calling out here. But that all happened after I had the idea; it was weird (and sad) timing. ↩

  2. WebRTC is a way of doing peer-to-peer video/audio exchange. Sometimes peers need some help traversing firewalls in order to communicate; other times firewalls are so restrictive that the you need a server to forward video between the peers. STUN and TURN are techniques for traversing firewalls / NAT (STUN) and relaying video via a server (TURN). ↩

  3. I believe I wrote more CSS and javascript for this site than I had across ~all the web work I’d done before stranger video. ↩