WebCam 카메라 좌우반전

모바일 웹 카메라 기능을 사용하기 위해 사용하고자합니다.

기존 로직

  • MediaStream API를 활용하여 web browser에서 카메라 기능 구현

문제점

  • Native 카메라는 전면이 좌우반전으로 출력되지만, 모바일 웹 카메라는 후면이 좌우반전 출력

변경된 로직

  • user-agent 활용하여 mobile로 접근한 경우 체크

/*
    Mozilla (Gecko, Firefox): Mobile
    WebKit-based (Android, Safari): Mobile
    Blink-based (Chromium, Google Chrome, Opera 15+): Mobile
    Presto-based (Opera 12-): Mobi
*/

const isMobilePlatform = () => {
    const { userAgent } = navigator
    return userAgent.indexOf('Mobi') > -1;
}

  • 후면 video tag를 좌우반전

<style>
	video{
    	    transform: rotateY(180deg);
            -moz-transform:rotateY(180deg); /* Firefox */
            -webkit-transform:rotateY(180deg); /* Safari and Chrome */
	}
</style>

출처

Previous바닐라 JS 웹 컴포넌트 개발기NextReact - Typescript eslint, prettier 개발 환경 구축

Last updated