focalxaiinspection/src/lib/Pages/CaptureDamageImages/CaptureDamageImages.js

Focalx AI Inspection

import React, { useRef, useState, useEffect } from 'react';
import Webcam from 'react-webcam';
import { useNavigate } from 'react-router-dom';
import './CaptureDamageImages.scss';

const CaptureDamageImages = () => {
  const webcamRef = useRef(null);
  const navigate = useNavigate();

  const handleCapturePhoto = async () => {
    const base64Data = webcamRef.current.getScreenshot();
    const blob = await (await fetch(base64Data)).blob();
    const imageUrl = window.URL.createObjectURL(blob);
    document.getElementById("damagePrevieImg").src = imageUrl;
    const damageObj = {
        img: base64Data
    }
    sessionStorage.setItem("manualDamage", JSON.stringify(damageObj));
    setTimeout(() => {
        navigate("/select-car-position")
    }, 300);    
}



  const constraints = {
    // facingMode: isRearCameraAvailable ? { exact: 'environment' } : 'user'
    facingMode: { exact: "environment" }
  };

  
  
  

  return (
    <>
    <div className='phone-rotate-message-portrait'>
          <img src={require('../../Assets/images/rotated.svg').default} alt='' />
          <h3>Please rotate your screen</h3>
        </div>
      <div className="camera-portrait-container"> 
      <Webcam 
          className='camera-portrait' 
          audio={false} 
          ref={webcamRef} 
          screenshotFormat='image/jpeg' 
          videoConstraints={constraints}
        />
        <div className='damage-preview-container d-none'>
        <img id="damagePrevieImg" alt='' />
        </div>
        
        
        <div className='camera-bottom'>
            <button className='capture-photo' onClick={handleCapturePhoto}>
                {/* <img width={52} src={require('../../Assets/images/camera.svg').default} alt='' /> */}
            </button>           
            {/* <button className='close-button' onClick={() => navigate("/damage-report")}>
                <img width={52} src={require('../../Assets/images/close-with-circle.svg').default} alt='' />
            </button> */}
        </div>
      </div>
    </>
  );
};

export default CaptureDamageImages;