p5.js Video Capture开发：如何隐藏上层带滤镜的视频画面

p5.js 调用createCapture(VIDEO)时会默认在页面DOM中插入一个原生视频元素，展示无滤镜的原始画面，也就是你看到的下层视频；你创建的canvas在它上层，draw函数中绘制视频并添加滤镜后，就得到了上层的带滤镜视频。

隐藏上层带滤镜视频的方法 #

你可以按需选择下面任意一种方案：

• 方案一：直接隐藏整个上层canvas容器
  在setup函数末尾添加隐藏canvas的代码即可：

function setup() {
  createCanvas(320, 260);
  video = createCapture(VIDEO);
  video.size(width,height);
  // 隐藏上层带滤镜的canvas
  document.querySelector('canvas').style.display = 'none';
}

• 方案二：停止往canvas绘制内容，上层自然无画面
  注释掉draw函数中的绘制和滤镜逻辑：

function draw() {
  // image(video,0,0,width,height);
  // filter(INVERT);
}

补充：隐藏下层原始视频的方法（常见需求，供参考） #

如果你实际是想保留上层带滤镜画面，隐藏下层原始无滤镜视频，可以调用p5.js提供的hide()方法处理捕获的视频对象：

function setup() {
  createCanvas(320, 260);
  video = createCapture(VIDEO);
  video.size(width,height);
  // 隐藏下层自动生成的原始视频元素
  video.hide();
}

内容的提问来源于stack exchange，提问作者Paramasivan