p5. js извлечение изображений из ленты createCapture ()

Question

Я пытался следить за видео Coding Train p5 при обработке изображений, но я не могу отобразить изображения (только видеопоток dr aws). Я могу заставить изображение отображаться правильно без l oop, но когда я помещаю его в l oop, захваченные изображения не отображаются.

Видеопоток с веб-камеры работает в обоих сценариях ios.

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 () функция не работает. Вы должны определить ширину / высоту в объекте ограничения, как написано ниже. Здесь указано: https://p5js.org/reference/# / p5 / createCapture

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

  video = createCapture( constraints );