[CSS] 스마트폰에서 AR 카메라 꽉찬 화면으로 보기!

1. 노트북 화면에서는 꽉 찬 화면인데 스마트폰에서는 왜 이러지?!

노트북에 기본으로 달려있는 카메라로 테스트해 가며 웹 AR을 이용한 프로젝트를 개발하고 있다. 프레임워크는 Next.js를 사용했다. mind-ar 라이브러리를 이용해서 웹 AR을 구현하였고 프로젝트를 실행해 노트북에서 꽉 찬 카메라 화면을 확인했다. https-단말기 카메라 제어는 http에서는 불가하다-가 기본으로 적용되는 Vercel에 배포해 스마트폰에서 테스트해 봤는데 기대했던 꽉 찬 화면으로 카메라가 작동하지 않았다! ㅠ_ㅠ

 

2. object-fit 적용

video 선택자에 object-fit을 cover로 적용하면 카메라로 촬영 중인 화면이 꽉 차게 보이게 된다. 이미지의 왜곡 없이 화면에 꽉 차게 보이기 때문에 가로가 세로보다 짧은 스마트폰의 경우 가로화면이 잘려나간다고 보면 된다. 개발 중인 프로젝트의 경우 ar-container라는 클래스 속성을 가진 div 요소의 자식으로 video 요소가 mind-ar에 의해 런타임 때 생성되기 때문에 선택자를 .ar-container video로 작성하였다.

 

.ar-container video {
  left: auto !important;
  object-fit: cover;
}