Accessing Smartphone And Laptop Cameras In The Web With Javascript

Hello! Today I’m going to show you how to access the built-in cameras in-browser, on computers and mobile devices using Javascript.

In this series, I will show you how to set up a simple HTML page that accesses the front-facing camera, runs MediaPipe Facemesh to detect facial keypoints, and then shows a livestream using the detection features.

This post in particular will show you how to:

• Properly access a device’s camera through the Javascript MediaDevices interface (phone or laptop)
• Stream it live to an HTML Canvas for viewing

Mobile camera livestreamed to an HTML Canvas

The Rundown

Demo

Find the demo here: https://facemeshdemo1.netlify.app/

Code

HTML: https://gist.github.com/kongmunist/83d4862406b3363dcc07199780d81bad#file-index-html

JS: https://gist.github.com/kongmunist/83d4862406b3363dcc07199780d81bad#file-facemeshsetup-js

Deep Dive

Motivation

With the advent of Tensorflow.js, machine learning has begun to move into the browser. No longer will you need to download 6 different Python packages that are each 500 MB to train machine learning…