Afficher la vidéo dans le canvas

Il suffit d’utiliser la fonction createCapture(VIDEO); pour afficher l’image de la webcam dans le navigateur (il faut évidemment autoriser le partage). Pour afficher l’image de la webcam dans le canvas il est nécessaire de rajouter les éléments suivants :

var video;

function setup() {
  createCanvas(780,500);
  background(200);
  video = createCapture(VIDEO);
  video.size(640,480);
  video.hide();
}

function draw() {
  image(video,70,10);
}

La ligne video.hide(); permet de cacher la vidéo qui se trouve en dehors du canvas.
Il est possible d’appliquer à la vidéo affichée par la fonction image tout ce fonctionne avec des images : tint(), rotate()…

Récupérer des images de la vidéo

Il suffit de créer un bouton (voir supra) et une fonction avec la ligne save(‘image’+’.png’);

var video;
var bouton;

function setup() {
  createCanvas(780,500);
  background(200);
  video = createCapture(VIDEO);
  video.size(640,480);
  video.hide();
  
  bouton = createButton('capture');
  bouton.mousePressed(capturerImage);
}

function capturerImage(){
  save('image'+'.png');
}

function draw() {
  image(video,70,10);
}