Reactjs webcam and mac photobooth optimization

177 Views Asked by At

This is a weird one. Currently I am using the react-webcam component(https://www.npmjs.com/package/react-webcam) in a web app to display live video from a USB 5MP camera. Here is the component code:

    import React from "react";
    import Webcam from "react-webcam";
    import null_camera from "./placeholder.jpg";
    import { CardMedia } from "@mui/material";

    export default function WebcamCapture({ cameraCode }) {
    const webcamRef = React.useRef(null);
    const video = {
    width: 900,
    height: 275,
    facingMode: "user",
    deviceId: cameraCode,
    };

    const videoImage = {
    width: 900,
    height: 275,
    facingMode: "user",
    };

    if (cameraCode != undefined) {
    return (
      <div className="webcam-container" style={{ marginBottom: -5 }}>
        <Webcam
          audio={false}
          ref={webcamRef}
          screenshotFormat="image/jpeg"
          videoConstraints={video}
        />
      </div>
    );
    } else {
    return (
      <div className="webcam-container" style={{ marginBottom: -5 }}>
        <CardMedia component="img" height="275" image={null_camera} />
      </div>
    );
    }
    }

The idea here is to display the camera feed from a robot, and if cameras are not plugged in display an image of (no detectable cameras). All this works fine when the cameras are plugged up via usb. Now the robot requires a 50ft support wire, so we had to purchase a usb 2.0 50ft cable with an amplifier/repeater halfway through the line. This is where it gets weird. Using the cable opening the web app with the component code my fps is like 1/s, BUT if I open up photobooth while the webapp code is running my fps jumps up to what would be considered normal or acceptable, after I close photobooth the behavior remains the same for some time.

I am to believe that photobooth is opening some optimizing video algorithm in the backend which is allowing for the increase in fps. And once that program dies in the backend I drop back to terrible fps.

To the question, Is there anything I can do in the react frontend or the webcam component to copy this photobooth process. I am at a lost on what I can implement to have the same behavior as photobooth in my react component.

0

There are 0 best solutions below