const devices = [];

let device=0;

let videoReady;

​

function preload() {}

function setup() {

  navigator.mediaDevices.enumerateDevices().then(gotDevices);

  createCanvas(400, 400, P2D);

  videoReady = false;

  npix = 16;

  pixart = createGraphics(16, 16);

  pixelDensity(3);

}

function gotDevices(deviceInfos) {

  for (let i = 0; i !== deviceInfos.length; ++i) {

    const deviceInfo = deviceInfos[i];

    if (deviceInfo.kind == "videoinput") {

      devices.push({

        label: deviceInfo.label,

        id: deviceInfo.deviceId,

      });

    }

  }

  print(devices);

}

​

function draw() {

  background(0);

  if (devices.length > 0 && !videoReady) {

    var constraints = {

      video: {

        deviceId: {

          exact: devices[4].id,

        },

      },

    };

    video = createCapture(constraints);

    video.hide();

    videoReady = true;

  }

  if (videoReady&&deviceOrientation==PORTRAIT) {

    imageMode(CENTER);

    image(

        video,

        width/2,

        height/2

      );

  //filter(BLUR,5);

pixart.imageMode(CENTER);

pixart.image(

        video,

        pixart.width/2,

        pixart.height/2,

        npix,

        video.height *npix/video.width

);

    pixart.loadPixels();

    stroke(0,128);

    strokeWeight(5);

    rect(mouseX, mouseY, 8*npix, 8*npix);

    for (y = 0; y < npix; y++) {

      for (x = 0; x < npix; x++) {

        fill(pixart.get(x, y));

        noStroke();

        rect(mouseX+x * 8, mouseY+y * 8, 8, 8);

      }

    }

  }

}

function touchStarted() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

document.ontouchmove = function (event) {

  event.preventDefault();

};

​

​