Using non-default camera with createVideo(CAPTURE)

[shiffman]

The need to use a different camera with createVideo(CAPTURE) has come up several times this semester. @lmccart posted an example for how to do so here:

https://github.com/ITPNYU/ICM-2015/blob/master/09_video_sound/02_capture/13_get_sources/sketch.js

I'm wondering if we should wrap this functionality and possibly make it more generic to sync with p5.sound and p5.AudioIn?

Something like:

var capture;
var sourceId = '_________';

function setup() {

  // can be removed once sourceId is discovered
  // or creating the capture could be moved to callback?
  captureList(gotSources);
  capture = createVideo(CAPTURE, sourceId);

}

// This method can be removed after the source ID has been determined.
// Make this only give the "video" kind for captureList?
function gotList(sources) {
  console.log('video: '+sources[i].label+' ID: '+sources[i].id);
}

This would add one function to the API (captureList(). I'm happy to work on this if we think it's a good idea.

Another idea would be to add a callback to createVideo where the user could somehow assign the sourceId dynamically?

  capture = createVideo(CAPTURE, gotSources);

[lmccart]

I think this could be a good idea, however, I worry about going down a rabbit hole here. We support the optional constraints object in which you can specify sourceId as well as a lot of other properties. I wonder if we wrap the camera source function if we'd also then be fielding requests to wrap a lot of other functionality associated with the constraints object. Perhaps this is the place to draw the line and ask users to learn a little more if they want to use an additional camera? Maybe not, maybe the line should be drawn on the other side. :)

[shiffman]

Yes, thanks for the response, I'm now leaning towards avoiding the rabbit hole. My post was prompted by seeing the additional complexity of passing in this constraints object over, say, how new Capture() and Capture.list() work with Processing. But this idea of a "options" object is ultimately how things in JS work and and so this is possibly a good time for p5 users to dig a little deeper and get used to that. . . and if we have the example with a link for more, that is likely enough.

Maybe let's see how it goes with students and whether your example trips them up too much or not.

I think I'll close this and we can re-open if we want to revisit?

[lmccart]

yeah, let's play it by ear for a bit and revisit this later. it may make sense to align with the functionality of Processing, and maybe that's where we draw the line...

I do like that mixing in these bits of the underlying JS feels like a way to make the transition from p5.js to other libraries or native JS more seamless.

[dyqally]

Hi, just to follow up and check in if there's any alternative/update way of displaying two captures from two different webcams on the same page? Tried the example provide by @lmccart but I when I run it I got errors saying connection refused. Thank you very much in advanced !

[computationalmama]

Hello, I have figured out a hack. Please see below, its running two camera inputs (although currently on of them is the default laptop camera). However this is working only on local server and every time there is a new tab or window the id is changing.

let video1;
let video2;
let constraints1;
let constraints2;

//call the list of cameras 
function gotDevices(deviceInfos) {
    for (let i = 0; i !== deviceInfos.length; ++i) {
        const deviceInfo = deviceInfos[i];
        if (deviceInfo.kind == "videoinput") {
            console.log(deviceInfo);
        }
    }
}

function streamCameras() {
    for (var i = 0; i < 2; i++) {
        console.log(videolist[i]);
    }
}

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

function setup() {
    createCanvas(innerWidth, innerHeight);
    //copy the device info from console to create constraints for the webcams
    constraints1 = {
        video: {
            deviceId: "as per console log",
            groupId: "as per console log",
            kind: "videoinput",
            label: "as per console log"

        }
    }
    constraints2 = {
        video: {
            deviceId: "as per console log",
            groupId: "as per console log",
            kind: "videoinput",
            label: "as per console log"
        }
    }
    
    video1 = createCapture(constraints1);
    video2 = createCapture(constraints2);
    // video1.size(320,280);
}

function draw() {
    background(255);
    image(video1, 0, 0);
    image(video2, video1.width, 0);
}