🤍 은지log 🤍

[REACT] React-webcam 구현하기 본문

💙 React

[REACT] React-webcam 구현하기

Eun_zii 2023. 10. 19. 14:25

 

import { useCallback, useRef, useState } from "react";
import Webcam from "react-webcam";
import styled from "styled-components";

const CustomWebcam = () => {
  const webcamRef = useRef<Webcam | null>(null);
  const [imgSrc, setImgSrc] = useState<string | null>(null);
  const [mirrored, setMirrored] = useState(true);

  const capture = useCallback(() => {
    if (webcamRef.current) {
      const imageSrc = webcamRef.current.getScreenshot();
      setImgSrc(imageSrc);
    }
  }, [webcamRef]);

  const retake = () => {
    setImgSrc(null);
  };

  return (
    <div>
      {imgSrc ? (
        <img src={imgSrc} alt="webcam" />
      ) : (
        <Webcam
          height={600}
          width={600}
          ref={webcamRef}
          mirrored={mirrored}
          screenshotFormat="image/jpeg"
          screenshotQuality={0.8}
        />
      )}
      <div>
        {imgSrc ? (
          <RetakeBtn onClick={retake}>↺</RetakeBtn>
        ) : (
          <CaptureBtn onClick={capture}>📸</CaptureBtn>
        )}
      </div>
    </div>
  );
};

const CaptureBtn = styled.button`
  width: 600px;
  font-size: 30px;
  border: 3px solid green;
  border-radius: 8px;
`;

const RetakeBtn = styled.button`
  width: 600px;
  font-size: 30px;
  border: 3px solid red;
  border-radius: 8px;
`;

export default CustomWebcam;

 

❤️ 도움주신분 :

728x90
저작자표시 동일조건

'💙 React' 카테고리의 다른 글

[REACT] 프론트엔드 기술면접 개념 정리  (1) 2023.11.02
[REACT] react-daum-postcode를 이용하여 우편번호 검색 구현하기  (1) 2023.10.30
[REACT] Infinite scroll (무한스크롤) 구현하기  (0) 2023.10.13
[REACT] QueryClient , Query Invalidation  (0) 2023.09.25
[REACT] NodeJS 로 만든 API를 이용해 CRUD 구현하기  (0) 2023.09.22
'💙 React' Related Articles more