Video Capture in p5.js Web Editor

Introduction

p5.js is a JS client-side library for creating graphic and interactive experiences based on the core principles of Processing. It is a JavaScript library for creative coding and making coding accessible for designers, educators and beginners.

p5.js is a Free open source platform and is accessible to everyone, and we can learn the use of the tools in it.

For using the p5.js Web Editor, use the URL given below:

https://editor.p5js.org/

In this tutorial, we will be learning on Capturing video from the webcam and display on the canvas as well as with invert filter.

*** Note that by default the capture feed shows up.

We can hide the feed by uncommenting the capture.hide() line.

let capture; 
function setup() {
  createCanvas(390, 240);
  capture = createCapture(VIDEO);
  capture.size(320, 240);
  //capture.hide();
}
function draw() {
  background(255);
  image(capture, 0, 0, 320, 240);
  filter(INVERT);
}

After running the codes in p5.js Web Editor, we will get the Video Capture Screen.