Code Snippet: How to Configure External WebCam in p5.js

A simple solution that uses the internal webcam as a fallback

Why External Webcams

Integrating an external webcam into your setup can significantly enhance your video quality and flexibility in various ways. Firstly, external webcams often offer better resolution and performance compared to built-in options, ensuring clearer and more detailed images. Secondly, they excel in handling a wide range of lighting conditions, whether too dark, too bright, or requiring high dynamic range, thus providing consistently high-quality video. Lastly, the fixed position of internal webcams — embedded within computers — may not always be convenient or suitable for every user’s needs. In contrast, an external webcam allows for adjustable positioning, making it a versatile choice for optimal framing and angles.

How Cameras are Supported in p5.js

By default, p5.js recognizes the internal webcam, and it works like a charm. You do not need to touch anything. This default setup routine hides all the complexity away from you.

let video;
let poseNet;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
  poseNet = ml5.poseNet(video, modelLoaded)…