Build a React.js Project to Get User Webcam Feed and Video Recording Using react-vision-camera in JS

index.css

.container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.barcode-scanner {
  padding:20px;
}

.vision-camera {
  width: 100%;
  height: 70vh;
}

.container {

top: 0;

left: 0;

width: 100%;

height: 100%;

position: absolute;

}

.barcode-scanner {

padding:20px;

}

.vision-camera {

width: 100%;

height: 70vh;

}

App.jsx

import React from "react";
import { VisionCamera } from "react-vision-camera";
import "./App.css";

const presetResolutions = [
  { label: "ask 1920x1080", value: { width: 1920, height: 1080 } },
  { label: "ask 1280x720", value: { width: 1280, height: 720 } },
  { label: "ask 640x480", value: { width: 640, height: 480 } },
];

function App() {

  const [isActive, setIsActive] = React.useState(true);
  const [isPause, setIsPause] = React.useState(false);
  const [cameras, setCameras] = React.useState([]);
  const [selectedCameraLabel, setSelectedCameraLabel] = React.useState("");
  const [desiredCamera, setDesiredCamera] = React.useState("founder");

  const [desiredResolution, setDesiredResolution] = React.useState({
    width: 1280,
    height: 720,
  });

  const [currentResolution, setCurrentResolution] = React.useState("");

  const resSel = React.useRef(null);
  const camSel = React.useRef(null);
  
  const onOpened = (cam, camLabel) => {
    console.log("opened");
    console.log(camLabel);
    setCurrentResolution(cam.videoWidth + "x" + cam.videoHeight);
    setSelectedCameraLabel(camLabel);
  };

  const onClosed = () => {
    console.log("closed");
  };

  const onDeviceListLoaded = (devices) => {
    console.log(devices);
    setCameras(devices);
  };

  const onCameraSelected = (e) => {
    setDesiredCamera(e.target.value);
    setSelectedCameraLabel(e.target.value);
  };

  const onResolutionSelected = (e) => {
    const width = e.target.value.split("x")[0];
    const height = e.target.value.split("x")[1];
    setDesiredResolution({ width: width, height: height });
  };

  return (
    <div className="container">
      <div className="barcode-scanner">
        <div className="vision-camera">
          <VisionCamera
            isActive={isActive}
            isPause={isPause}
            desiredCamera={desiredCamera}
            desiredResolution={desiredResolution}
            onOpened={onOpened}
            onClosed={onClosed}
            onDeviceListLoaded={onDeviceListLoaded}
          ></VisionCamera>
        </div>
        <div>
          <div>
            <select
              ref={resSel}
              value={currentResolution}
              onChange={(e) => onResolutionSelected(e)}
            >
              <option value={currentResolution}>
                {"got " + currentResolution}
              </option>
              {presetResolutions.map((res, idx) => (
                <option
                  key={idx}
                  value={res.value.width + "x" + res.value.height}
                >
                  {res.label}
                </option>
              ))}
            </select>
          </div>
          <div>
            <select
              ref={camSel}
              value={selectedCameraLabel}
              onChange={(e) => onCameraSelected(e)}
            >
              {cameras.map((camera, idx) => (
                <option key={idx} value={camera.label}>
                  {camera.label}
                </option>
              ))}
            </select>
          </div>
          <button onClick={() => setIsActive(!isActive)}>
            {isActive ? "Stop" : "Start"}
          </button>
          <button onClick={() => setIsPause(!isPause)}>
            {isPause ? "Play" : "Pause"}
          </button>
        </div>
      </div>
    </div>
  );
}

export default App;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

import React from "react";

import { VisionCamera } from "react-vision-camera";

import "./App.css";

const presetResolutions = [

{ label: "ask 1920x1080", value: { width: 1920, height: 1080 } },

{ label: "ask 1280x720", value: { width: 1280, height: 720 } },

{ label: "ask 640x480", value: { width: 640, height: 480 } },

];

function App() {

const [isActive, setIsActive] = React.useState(true);

const [isPause, setIsPause] = React.useState(false);

const [cameras, setCameras] = React.useState([]);

const [selectedCameraLabel, setSelectedCameraLabel] = React.useState("");

const [desiredCamera, setDesiredCamera] = React.useState("founder");

const [desiredResolution, setDesiredResolution] = React.useState({

width: 1280,

height: 720,

});

const [currentResolution, setCurrentResolution] = React.useState("");

const resSel = React.useRef(null);

const camSel = React.useRef(null);

const onOpened = (cam, camLabel) => {

console.log("opened");

console.log(camLabel);

setCurrentResolution(cam.videoWidth + "x" + cam.videoHeight);

setSelectedCameraLabel(camLabel);

};

const onClosed = () => {

console.log("closed");

};

const onDeviceListLoaded = (devices) => {

console.log(devices);

setCameras(devices);

};

const onCameraSelected = (e) => {

setDesiredCamera(e.target.value);

setSelectedCameraLabel(e.target.value);

};

const onResolutionSelected = (e) => {

const width = e.target.value.split("x")[0];

const height = e.target.value.split("x")[1];

setDesiredResolution({ width: width, height: height });

};

return (

<VisionCamera

isActive={isActive}

isPause={isPause}

desiredCamera={desiredCamera}

desiredResolution={desiredResolution}

onOpened={onOpened}

onClosed={onClosed}

onDeviceListLoaded={onDeviceListLoaded}

></VisionCamera>

</div>

<div>

<select

ref={resSel}

value={currentResolution}

onChange={(e) => onResolutionSelected(e)}

{"got " + currentResolution}

</option>

{presetResolutions.map((res, idx) => (

<option

key={idx}

value={res.value.width + "x" + res.value.height}

{res.label}

</option>

))}

</select>

</div>

<div>

<select

ref={camSel}

value={selectedCameraLabel}

onChange={(e) => onCameraSelected(e)}

{cameras.map((camera, idx) => (

{camera.label}

</option>

))}

</select>

</div>

<button onClick={() => setIsActive(!isActive)}>

{isActive ? "Stop" : "Start"}

</button>

<button onClick={() => setIsPause(!isPause)}>

{isPause ? "Play" : "Pause"}

</button>

</div>

);

}

export default App;

Build a React.js Project to Get User Webcam Feed and Video Recording Using react-vision-camera in JS

Comments

Leave a Reply Cancel reply

Archives