1. 라이브러리 설치
2. App.js
import React, { useRef, useState, useCallback, useEffect } from 'react';
import Webcam from "react-webcam";
function App() {
const webcamRef = useRef(null);
const [imgSrc, setImgSrc] = useState(null);
const [hasPermission, setHasPermission] = useState(null);
useEffect(() => {
navigator.mediaDevices.getUserMedia({ video: true })
.then(() => setHasPermission(true))
.catch(() => setHasPermission(false));
}, []);
const capture = useCallback(() => {
const imageSrc = webcamRef.current?.getScreenshot();
setImgSrc(imageSrc);
}, [webcamRef]);
if (hasPermission === null) {
return <div>카메라 권한을 요청 중입니다...</div>;
}
if (hasPermission === false) {
return <div>카메라 접근 권한이 거부되었습니다. 브라우저 설정에서 권한을 허용해주세요.</div>;
}
return (
<div className="App">
<h1>Webcam Capture</h1>
<Webcam
audio={false}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={640}
height={480}
videoConstraints={{ facingMode: 'user' }}
/>
<button onClick={capture}>Capture photo</button>
{imgSrc && (
<div>
<h2>Captured Photo:</h2>
<img src={imgSrc} alt="captured" />
</div>
)}
</div>
);
}
export default App;
3. power shell 관리자 권한으로 실행
가. cd react 파일설치디렉토리 로 이동
나. Chocolatey 설치 ( 그대로 복붙해서 실행 )
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
다. OpenSSL 설치 및 PATH 설정
보통 C:\Program Files\OpenSSL-Win64\bin 여기에 설치가 됌
여기에 들어가서
환경변수 - 시스템변수(Path) - 편집 - 새로만들기 - C:\Program Files\OpenSSL-Win64\bin 추가
라. Openssl 인증서 생성
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout cert.key -out cert.crt
마. 인증서 생성하면 필요한 정보 입력하라고 뜸
예시
바. .env 생성
사. package.json 수정
"scripts": {
"start": "react-scripts start",
"start-lan": "set HTTPS=true&&set SSL_CRT_FILE=cert.crt&&set SSL_KEY_FILE=cert.key&&react-scripts start --host 192.168.0.4",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
host 뒤에는 본인 컴퓨터 ip주소
cmd에서 ipconfig로 확인 가능
아. VSC 터미널에서 cmd 켜서 실행
cmd와 powershell 둘다 가능하지만
내가 설정한 방법은 cmd에서 실행 가능한 방법
powershell 방법은 따로 있다
자. 실행
VSC 실행 후 모바일에서 https://192.168.0.4:3000에 접속 <- 이건 내 ip 주소
카메라가 안뜬다면 카메라 허용 해줘야함
주의사항 : 컴퓨터와 모바일 동일한 와이파이 사용해야함
컴퓨터가 랜선을 쓸때는 ip주소가 같은 공유기에서 나오는 와이파이를 사용하면 됌
캡쳐버튼도 만들어봤고 캡쳐이미지를 사용할려면 백엔드 연동하고 저장 후 사용해야한다
나는 안했음