focalxaiinspection/src/lib/Components/Camera/Camera.js

Focalx AI Inspection

import React, { useRef, useState } from "react";
import Webcam from "react-webcam";
import {SelectImageTypeData} from '../../Data/SelectImageTypeData';
import './Camera.scss';
// import jsQR from "jsqr";
const FACING_MODE_USER = "user";
const FACING_MODE_ENVIRONMENT = "environment";
const videoConstraints = {
  width: 100+'vh',
  height: 100+'vh',
  facingMode: "user"
};

const Camera = () => {
  const webcamRef = useRef(null);
  const [url, setUrl] = React.useState(null);

  const capturePhoto = React.useCallback(async () => {
    const imageSrc = webcamRef.current.getScreenshot();
    setUrl(imageSrc);
  }, [webcamRef]);

  const onUserMedia = (e) => {
    console.log(e);
  };
  const [facingMode, setFacingMode] = React.useState(FACING_MODE_USER);
  const handleClick = React.useCallback(() => {
    setFacingMode(
      prevState =>
        prevState === FACING_MODE_USER
          ? FACING_MODE_ENVIRONMENT
          : FACING_MODE_USER
    );
  }, []);
  console.log(facingMode + videoConstraints);

  const [activeTab, setActiveTab] = useState();
  const imageClick = (index) => {
    if(activeTab === index) {
      return setActiveTab(null);
    }
    setActiveTab(index)
  }

  return (
    <>
      <div className="camera-wrap">
      <div className='select-image-type'>
          {SelectImageTypeData.map((result, index) => {
                const {photo} = result;
                return (                
                    <>
                    <div 
                      key={index}  
                      onClick={() => imageClick(index)} 
                      className={activeTab === index ? 'image-list active' : 'image-list'}
                    >
                        <img src={photo} alt=""/>
                    </div>  
                    {(activeTab === index) && (
                    <div className='selected-image'>
                      <img src={photo} alt=""/>
                    </div>
                  )}            


                </>
              );
            })}
        </div>

        <Webcam
          ref={webcamRef}
          audio={true}
          screenshotFormat="image/jpeg"
          videoConstraints={videoConstraints}
          onUserMedia={onUserMedia}
        />
        <div className="camera-action-btns">        
        <img  className="screenshot" src={url} alt="" />
        <button className="capture" onClick={capturePhoto}><img src={require('../../Assets/images/camera.svg').default} alt=''/></button>
        <button className="capture" onClick={handleClick}><img src={require('../../Assets/images/power-switch.svg').default} alt=''/></button>
        
        {/* {url && (
          <div className="screenshot">
            <img src={url} alt="Screenshot" />
          </div>
        )} */}
        </div>
      </div>
    </>
  );
};

export default Camera;