1. 첫번째 시도!
초기 코드는 아래와 같았다!
배포까지 해서 아이폰 safari에서 테스트를 해보니, imageCapture를 찾을 수 없다는 에러가 계속 났다.
문제 원인을 계속 찾아서 시도해봤지만, 그런데 정말 간과하고 있던게 있었다.
아이폰 사파리에서는 브라우저 호환이 안되었던거였다..
이것도 모르고 시간을 엄청 할애했다 ㅜㅜ
2. 두번째 시도!
모바일에서 이용할 수 있도록,
react-webcam을 이용해서 만들었다!
먼저 Can I use를 통해서 모바일 대응이 가능한지 확인했다!
설치
npm install react-webcam
코드가 한결 간결하고 쉽다!
첫번째 시도에서는 canvas를 통해 이미지를 그리다보니 프레임에 그려지는데 좀 시간이 걸렸다.
그러나 수정한 코드는 느리지 않았다!
사진 촬영하기
const [url, setUrl] = useState([]);
const videoConstraints = {
width: 320,
height: 240,
facingMode: 'user',
};
const WebcamCapture = () => {
const webcamRef = useRef(null);
const capture = useCallback(() => {
const imageSrc = webcamRef.current.getScreenshot();
if (url.length > 2) { // 3장만 찍을 수 있도록 하기
return;
}
if (imageSrc) {
setUrl((prevUrls) => [...prevUrls, imageSrc]); // 촬영한 이미지 배열에 추가
}
}, [webcamRef]);
return (
<>
<Webcam
audio={false}
height={240}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={320}
videoConstraints={videoConstraints}
/>
<div className="flex gap-10 justify-center my-5">
<button
className="min-w-32 bg-red-300 py-3 px-2 rounded-md"
onClick={capture}
>
Capture photo
</button>
<button
className="min-w-32 bg-red-300 py-3 px-2 rounded-md"
onClick={dowonload}
>
dowonload
</button>
</div>
<div className="m-auto">
<button
onClick={reset}
className="mb-3 bg-red-300 py-3 px-2 rounded-md"
>
다시찍기
</button>
</div>
</>
);
};
촬영한 순서대로 이미지 넣기
가독성이 떨어져서 css는 제거했다.
<div>
{url[1] && ( // 촬영한 순서대로 프레임에 이미지 보여주기
<img
src={url[1]}
alt="Screenshot"
style={{
height: '320px',
width: '320px',
}}
/>
)}
</div>
<div>
<Image
src={ShipImage}
width={150}
/>
{url[2] && (
<img
src={url[2]}
alt="Screenshot"
/>
)}
</div>
html2canvas를 이용해서 선택한 영역 다운로드
const dowonload = () => {
var divToCapture = container.current; // 프레임을 감싸고 있는 컨테이너
// Use html2canvas to capture the div as an image
html2canvas(divToCapture)
.then(function (canvas) {
// canvas를 data URL로 전환하기
var imageData = canvas.toDataURL('image/jpeg');
// a 태그의 href를 통해 다운로드 트리거 하기
var link = document.createElement('a');
link.href = imageData;
link.download = 'output.jpg';
link.click();
});
};
촬영 초기화
마지막으로, 다시 촬영할 수 있도록 reset함수를 만들었다!
이미지관리 배열을 빈배열로 변경했다.
const reset = () => {
setUrl([]);
};
초기 버전
이 상태로 배포하고 배포링크를 주변에 뿌렸다...
비디오 좌우반전으로 진짜 못생겨보이고,
촬영된 사진에서 얼굴이 압축 프레스로 누른 것 같이 나와버리는 것이였다..! ㅋㅋㅋㅋㅋ
얼굴이 오이가 되고, 사고가 되는 Magic!
그리고 이런저런 피드백이 쏟아졌다 ㅎ
알고 있었지만, 이렇게 말해주니까 다들 감사했다 ㅎㅎ
3. 세번째 시도!!!
좌우반전 해결하기
css 속성으로 거울모드로 변경했다!
<Webcam
audio={false}
height={240}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={320}
videoConstraints={videoConstraints}
style={{
transform: 'rotate(0, 180deg)',
'-webkit-transform': 'rotateY(180deg)', // Safari and Chrome
'-moz-transform': 'rotateY(180deg)', // Firefox
}}
/>
실제 포토부스처럼 각 프레임 안에서 비디오를 실행시켜서 촬영할 수 있도록 변경
{!url[0] && <WebcamCapture />}
{!url[1] && url[0] && <WebcamCapture />}
{!url[2] && url[1] && <WebcamCapture />}
react-spring, use-gesture 라이브러리를 이용해 스티커 추가
'use client';
import { useSpring, animated, useTransition } from '@react-spring/web';
import { useDrag } from '@use-gesture/react';
export default function Drag(props: any) {
const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }));
const bind = useDrag(({ event, offset: [x, y] }) => {
api.start({ x, y });
});
const data = [1];
const transitions = useTransition(data, {
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 1 },
});
return transitions((style, item) => (
<animated.div
className={`bg-contain z-100 absolute`}
{...bind()}
style={{
x,
y,
width: '100px',
height: '100px',
borderRadius: 8,
touchAction: 'none',
zIndex: 1000,
top: `${props.top}px`,
left: `${props.left}px`,
background: `url(${props.props})`,
backgroundRepeat: 'no-repeat',
backgroundSize: '100%',
...style,
}}
/>
));
}
function MyComponent({ data = [1, 2, 3] }) {
const transitions = useTransition(data, {
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 1 },
});
return transitions((style, item) => (
<animated.div style={style}>{item}</animated.div>
));
}
완성본..!
