p5.js 从 createCapture() 提要中提取图像

Question

我试图按照有关图像处理的 Coding Train p5 视频进行操作，但无法显示图像（仅显示视频提要）。我可以在没有循环的情况下正确显示图像，但是当我将它放入循环中时，捕获的图像不会显示。

网络摄像头视频源在这两种情况下都有效。

let video;
let pics = [];
var button;
var idx = 0;

function setup() {
  createCanvas(160,120);
  background(255);
  video = createCapture(VIDEO);
  video.size(160,120);
  button = createButton('shoot pic');
  button.mousePressed(shoot);
}

function shoot() {
  let img = video.get(0,0,160,120);
  pics.push(img);
}

function draw() {
  for(var i = 0; i < pics.length; i++) {
     image(pics[i], 0, 0);
  }
}

Answer 1

我已将您的代码更新到此处的这个工作示例中； https://editor.p5js.org/EthanHermsey/sketches/yjqWDF5FA

主要问题是行：

video.size( 160, 120 );

此行导致视频元素未设置就绪状态，并且 .get() 函数不起作用。您应该在约束对象中定义 width/height ，如下所示。此处指定：https://p5js.org/reference/#/p5/createCapture

let constraints = {
    video: {
      mandatory: {
        maxWidth: videoWidth,
        maxHeight: videoHeight
      }
    },
    audio: false
  };

  video = createCapture( constraints );

p5.js 从 createCapture() 提要中提取图像

p5.js extracting images from createCapture() feed

processing

video-capture

p5.js