时间戳

首页 > 解决方案 > p5.j​​s 从 createCapture() 提要中提取图像

processing - p5.j​​s 从 createCapture() 提要中提取图像

问题描述

我试图关注关于图像处理的 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);
  }
}

标签： processingvideo-capturep5.js

解决方案

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


主要问题是这条线：

video.size( 160, 120 );

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

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

  video = createCapture( constraints );

推荐阅读