Experimental Photography

Interactive Media Arts @ NYU

Professor Ellen Nickles

Modified by: Mingren Fu

*/

​

const webcams = [];

let num = 0;

​

function setup() {

  pixelDensity(1);

  // OPTION TO CHANGE

  // Reset canvas width and height based 

  // on camera capabilities, check Console

  createCanvas(960, 540);

  getVideoDevices(getVideo);

}

​

function draw() {

  // mirror video device

  translate(width, 0);

  scale(-1, 1);

​

  // if any webcams are detected

  if (webcams.length) {

    // OPTION TO CHANGE

    // specify camera to draw on canvas, check Console

    image(webcams[1], 0, 0, width, height);

  }

​

  // Only use with built-in camera if possible

  // For external webcams use separate apps

  // linked in document above

  // filter(GRAY);

}

​

function mousePressed() {

  num++;

  saveCanvas(`img${num}.png`);

}

​

function getVideoDevices(callback) {

  navigator.mediaDevices

    .enumerateDevices()

    .then((devices) => {

      const filtered = devices.filter((device) => device.kind === "videoinput");

      callback(filtered);

    })

    .catch((err) => console.log(`${err.name}: ${err.message}`));

}

​

function getVideo(cams) {

  for (let cam of cams) {

    const index = cams.indexOf(cam);

    const capabilities = cam.getCapabilities();

    const constraints = {

      audio: false,

      video: {

        deviceId: `${cam.deviceId}`,

        width: `${capabilities.width.max}`,

        height: `${capabilities.height.max}`,

      },

    };

    webcams[index] = createCapture(constraints);

    webcams[index].hide();

​

    console.log(

      `webcams[${index}]\n${cam.label}\nMax width:\t${constraints.video.width}\nMax height:\t${constraints.video.height}\n`

    );

  }

}

​