Javascript 视频捕捉

Question

我有以下代码。它在顶部显示过滤视频，在底部显示原始视频。

如何隐藏顶部的视频？

谢谢

// https://editor.p5js.org/

function setup() {
   createCanvas(320, 260);
   video = createCapture(VIDEO);
   video.size(width,height);
 }
 let video;
 function draw() {
 image(video,0,0,width,height);
 // filter(THRESHOLD); 
//  filter(GRAY);
filter(INVERT);
}

Answer 1

在 documenation page 上，它说要执行 video.hide() 以隐藏网络摄像头捕获。

如果您不需要过滤器，请不要调用 filter(...)

因此您的代码将如下所示：

let video;

function setup() {
  createCanvas(320, 260);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
}

function draw() {
  image(video,0,0,width,height);
  // rest of code
}

如果您想重新播放原始视频，只需运行 video.show()。

Answer 2

谢谢@Samathingamajig

以下代码适合我。

let video;

function setup() {
  createCanvas(320, 260);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
}

function draw() {
  image(video,0,0,width,height);
  // rest of code
}

Answer 3

我们可以重新定义如下吗？

// https://editor.p5js.org/

function setup() {
   createCanvas(700, 394);
   video = createCapture(VIDEO);
   
   video.hide();
  // video.show();
 }
 let video;
 function draw() {
 image(video,0,0,width,height);
 // filter(THRESHOLD); 
 //  filter(GRAY);
 // filter(INVERT);
}

Javascript 视频捕捉

Javascript Video Capture

javascript

video

p5.js