Camera capture on web app

💬 App Building
,
1

Hello,

  1. My goal: I'm looking to trigger a photo capture on an event. On mobile this is an existing component but on web it seems like a harder endeavor.
  2. Issue: At the moment I'm trying to create a custom component that I'll be able to interact with and therefore take a photo. I'm trying to use mozmorris/react-webcam: Webcam component and most of it works but it doesn't seem to be able to show the camera feed.
  3. Steps I've taken to troubleshoot:
  • Specify the height and width (so it doesn't render the image in 0x0 pixels)
  • Checked retool has permission to access the camera using the inbuild scanner component which works
  • Listed out the camera's the custom component can see to ensure it can detect the camera's
  1. Additional info: (Cloud or Self-hosted, Screenshots): We're self-hosted, I believe we're a few versions behind but I'm not the person who manages that.

I followed tryretool/custom-component-collection-template to create custom components and then added the following code to create a webcamCapture component

import React, { useRef, useCallback } from "react";
import Webcam from "react-webcam";
import { Retool } from "@tryretool/custom-component-support";

export const WebcamCapture: React.FC = () => {
  const webcamRef = useRef<Webcam>(null);
  const [imgSrc, setImgSrc] = Retool.useStateString({ name: "imageSrc" });

  const capture = useCallback(() => {
    const imageSrc = webcamRef.current?.getScreenshot();
    if (imageSrc) setImgSrc(imageSrc);
  }, [webcamRef, setImgSrc]);

  // const [deviceId, setDeviceId] = React.useState({});
  const [deviceId, setDeviceId] = React.useState<string>("");
  const [devices, setDevices] = React.useState([]);

  const handleDevices = React.useCallback(
    mediaDevices =>
      setDevices(mediaDevices.filter(({ kind }) => kind === "videoinput")),
    [setDevices]
  );

  React.useEffect(
    () => {
      navigator.mediaDevices.enumerateDevices().then(handleDevices);
    },
    [handleDevices]
  );

  return (
    <div>
      <Webcam
        audio={false}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        videoConstraints={{ deviceId: deviceId }}
        width={340}
        height={280}
      />
      <button onClick={capture}>Capture</button>
      <div> Potential cameras: </div>
      <ul>
        {devices.map((device, key) => (
          <li key={device.deviceId}>
            {device.label || `Device ${key + 1}`}
          </li>
        ))}
      </ul>
    </div>
  );
};

My current suspicious is that I need to change my permissions somehow to allow this custom component to access the cameras, but I have no idea how to do that.

If there's an easier approach, I'd be very happy to try but this is where I'm at at the moment.

3

Hey @soph - I see that you found an existing custom component that had previously been shared in the community, but are still running into permission issues. I'll keep an eye on that topic and help out if I can!

4

Have you had a chance to revisit this, @soph? Let me know if you have any additional questions!