Experimental Photography

Interactive Media Arts @ NYU

Ellen Nickles

​

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

          USE IN CHROME

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

​

ITP/IMA ER webcams and apps to adjust settings: 

https://tinyurl.com/externalwebcams

​

Serial Code Source:

ITP Physical Computing Lab

Serial Input to P5.js

https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-serial-input-to-the-p5-js-ide/

*/

​

let webcams = [];

let imageNum = 0;

​

let serial;

let portSelector;

let inData;

let canvasWidth = 1;

let canvasHeight = 1;

// let camera;

​

​

function setup() {

  pixelDensity(1);

  // OPTION TO CHANGE

  // Reset canvas width and height based

  // on camera capabilities, check Console

  createCanvas(2000, 2000);

  getVideoDevices(getVideo);

​

  serial = new p5.SerialPort();

  serial.on("list", printList);

  serial.on("connected", serverConnected);

  serial.on("open", portOpen);

  serial.on("data", serialEvent);

  serial.on("error", serialError);

  serial.on("close", portClose);

  serial.list();

}

​

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, 960, 540);

    image(webcams[2], -250, 0, 640, 360);

​

  }

​

  // Only use with built-in camera if possible

  // For external webcams use separate apps

  filter(GRAY)

}

​

​

/*------------------------------------*\

  Functions for Serial Input

\*------------------------------------*/

​

function printList(portList) {

  portSelector = createSelect();

  portSelector.position(10, 10);

  for (var i = 0; i < portList.length; i++) {

    portSelector.option(portList[i]);

  }

  portSelector.changed(mySelectEvent);

}

​

function mySelectEvent() {

  let item = portSelector.value();

  if (serial.serialport != null) serial.close();

  serial.open(item);

}

​

function serverConnected() {

  console.log("connected to server");

}

​

function portOpen() {

  console.log("the serial port opened");

}

​

// This is where the saveCanvas() is triggered

function serialEvent() {

  inData = serial.readString();

  console.log(inData);

​

  if (inData == 1) {

    imageNum++;

    saveCanvas(`pic${imageNum}.png`);

  }

}

​

function serialError(err) {

  console.log("Serial port error: " + err);

}

​

function portClose() {

  console.log("the serial port closed");

}

​

/*------------------------------------*\

  Functions for Video Devices

\*------------------------------------*/

​

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`

    );

  }

}

​