Video Capture / ビデオキャプチャ

ウェブカメラからビデオをキャプチャし、反転フィルタを適用してキャンバスに表示します。

capture webcam filter
DOM Video

View Source Code

/*
 * @name Video Capture
 * @arialabel Takes feed from the user’s computer camera and displays it in the window
 * @frame 710,240
 * @description Capture video from the webcam and display
 * on the canvas as well with invert filter. Note that by
 * default the capture feed shows up, too. You can hide the
 * feed by uncommenting the capture.hide() line.
 */
let capture;

function setup() {
  // createCanvas(390, 240);
  createCanvas(windowWidth, windowHeight);
  capture = createCapture(VIDEO);
  capture.size(320, 240);
  //capture.hide();
}

function draw() {
  background(255);
  image(capture, 0, 0, 320, 240);
  filter(INVERT);
}

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.