p5.js能否实时操作摄像头捕获像素？运行对应代码页面崩溃如何解决？

• 你对崩溃原因的判断错误，真正原因是循环逻辑存在死循环错误：你写的for (let x = 0; x < width; x*2)中，x初始值为0，每次执行x*2后x的值仍为0，永远满足x < width的循环条件，导致线程卡死页面崩溃，和摄像头性能开销无关。
• 实时操作摄像头捕获像素的需求完全可以实现，320*240尺寸的像素计算量对浏览器来说完全没有压力。

1. 修正循环增量：把x*2改为x += 2，y*2改为y += 2，实现每隔一个像素遍历的逻辑
2. 直接操作pixels数组比调用set()方法性能更高，也可以预先设置摄像头捕获的尺寸和画布一致，避免缩放开销
3. 隐藏默认的摄像头dom元素，避免页面出现两个重复的视频画面

let capture;

function setup() {
  createCanvas(320, 240);
  // 设置摄像头捕获尺寸和画布一致，减少性能开销
  capture = createCapture(VIDEO, {video: {width: 320, height: 240}});
  // 隐藏默认生成的摄像头dom元素
  capture.hide();
}

function draw() {
  image(capture, 0, 0, width, height);
  loadPixels();
  // 每隔一个像素设置为红色，步长设为2
  for (let x = 0; x < width; x += 2) {
    for (let y = 0; y < height; y += 2) {
      // 直接计算像素在数组中的索引，比set()效率更高
      const index = (y * width + x) * 4;
      pixels[index] = 255; // R通道
      pixels[index + 1] = 0; // G通道
      pixels[index + 2] = 0; // B通道
      // 保持原Alpha通道值不变
    }
  }
  updatePixels();
}

如果想要实现的是水平/垂直方向每隔一个像素整行/整列标红，只需要修改循环逻辑即可：比如固定x每次+2遍历所有y就是垂直每隔一列标红，固定y每次+2遍历所有x就是水平每隔一行标红。

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