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.