Using Multiple Identical Cameras with pose.maxpat

Miscbeginneradvanced
dreimanneins's icon

dreimanneins

Hi everyone,

I'm using the pose.maxpat patch from the jweb-mediapipe project (https://github.com/robtherich/jweb-mediapipe), which works well for me with a single camera.

However, I'm running into an issue when trying to use multiple webcams of the same model. I have three identical USB cameras, but on my Mac, the dropdown menu in the patch can’t distinguish between them — it only recognizes one. As you can see in the screenshot it shows the two webcams, but both with the same name. It can't differentiate. When using jit.grab

When using jit.grab, Max is able to detect three of the cameras separately (they appear with different @inuqueid s), so the Mac does distinguish them.

Has anyone found a way to:

  • integrate jit.grab into pose.maxpat, or

  • modify the existing camera selector so that I can choose between multiple identical webcams?

Any workaround, patch modification, or pointer would be hugely appreciated!

Thanks a lot in advance!

TFL's icon

TFL

You can probably modify the logic to get the mediaDevice list in the js ran into the jweb page.

Look for this:

const getVideoDevicesForMax = () => {
  getMediaDevices()
  .then((devices) => {
    let mediadevices = [];
    devices.forEach((device) => {
      if (device.kind === "videoinput") {
        mediadevices.push(device.label);
      }
    });
    window.max.outlet.apply(window.max, ["mediadevices"].concat(mediadevices));
  })
  .catch((err) => {
    window.max.outlet("error",`${err.name}: ${err.message}`);
  });
}

Make it output the device id instead of their label:

const getVideoDevicesForMax = () => {
  getMediaDevices()
  .then((devices) => {
    let mediadevices = [];
    devices.forEach((device) => {
      if (device.kind === "videoinput") {
        mediadevices.push(device.deviceId);
      }
    });
    window.max.outlet.apply(window.max, ["mediadevices"].concat(mediadevices));
  })
  .catch((err) => {
    window.max.outlet("error",`${err.name}: ${err.message}`);
  });
}

(the only change is device.label replaced by device.deviceId)

But then you will get a umenu filled with device id instead of names, so you also need to update getMediaDeviceByLabel to use deviceId instead:

const getMediaDeviceByLabel = async (deviceId) => {
  let mediaDevices = await getMediaDevices();
  return mediaDevices.filter(device => device.deviceId == deviceId);
}

And it should work.

I haven't tested any of this but that may do the trick.

If you still want your umenu to be filled with device names, then you need some extra step to get both deviceId and label and make a matching table/coll/list/array/dict so that you can know that item N in umenu corresponds to deviceId N.

EDIT: more about the syntax used for the various mediadevice calls in the mdn doc.

dreimanneins's icon

dreimanneins

Thank you so much for your reply. That solved my problem!