Experimental Photography

Interactive Media Arts @ NYU

Ellen Nickles

​

*------------------------------------*

          USE IN CHROME

*------------------------------------*

​

ITP/IMA ER webcams and apps to adjust settings: https://tinyurl.com/externalwebcams

*/

​

const webcams = [];

let num = 0;

​

function setup() {

  pixelDensity(1);

  // OPTION TO CHANGE

  // Reset width and height based on camera capabilities, check Console

  createCanvas(1920, 1080);

  // createCanvas(3840, 1080);  // adjust when adding cameras

  getVideoDevices(getVideo);

}

​

function draw() {

  // mirror video devices

  translate(width, 0);

  scale(-1, 1);

​

  // if any webcams are detected

  if (webcams.length) {

    // OPTION TO CHANGE

    // specify cameras to draw on canvas, check Console

    image(webcams[0], 0, 0, 1920, height);

    // image(webcams[1], 1920, 0, 1920, height);

  }

​

  // Only use with built-in camera if possible

  // For external webcams use separate apps

  // filter(GRAY);

}

​

​

​

function mousePressed() {

  num++;

  saveCanvas(`pic${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`

    );

  }

}

​