Skip to main content

Anonymous video calls in React, using Ably, Mediapipe, Three.js and Next.js

· 2 min read
Ben Butterworth

You can try it at Club2D.orth.uk, but for now, you'll need to use a Desktop browser running Chrome or Firefox. The repo is available here, which is a fork of my original repo available here.

Club2D is an anonymous video calling app inspired by the Memoji feature available on FaceTime, and allows emotions and face gestures to be shared with others without revealing someone's identity, background, disability or ethnicity. You should try building random projects which interest you because it will help you learn a lot faster than reading books or watching tutorials. Before this project, I did not know how to do 3D rendering (three.js), machine learning in the browser (MediaPipe/ TensorFlowJS), static site generation (NextJS), realtime/ event driven behaviour (Ably), nice CSS styling (TailwindCSS), and only knew a bit of ReactJS, CSS, Cloudflare and Firebase. I'm quite proud of what I made, and was delighted to see many my colleagues impressed by it as well. In doing this, I managed to ask and answer questions on StackOverflow, and am also proud to see my reputation reach 6.1k.

A short demo​

Benefits over conventional video calling​

  • Protect identity: By using a virtual face instead of your real face, you can be anonymous in video calls
  • Avoid bias: Your disability, ethnicity. Many conferencing apps have added background-blur.
  • Comfort: not everyone is comfortable being in front of a camera. When in a video call, we don't know if someone has us zoomed in or is recording. It might prevent distracting other colleagues.

Technologies used​