xxxxxxxxxx
148
/*
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`
);
}
}