HTMLVideoElement WRTC Camera Zoom Update

문제 : video태그를 통해서 웹캠 혹은 핸드폰 카메라를 출력할때 간혹 zoom을 변경하고 싶을 수 있다.

결론: 웹캠이 하드웨어적으로 zoom 변경 기능이 있다면 사용할 수 있다. (핸드폰으로 가능)

 

예시코드

let minZoom, maxZoom;
const zoom = 1;

// 하드웨어 zoom 정보
// undefined가 아니라면, {min:1, max:8} 이런식의 Object를 반환함
const zoomObj  = videoElement.srcObject.getVideoTracks()[0].getCapabilities().zoom;

if (zoomObj) {
	{minZoom, maxZoom} = zoomObj;
   	console.log(`minZoom: ${minZoom}, maxZoom: ${maxZoom});
}

// zoom 변경
videoElement
	.srcObject
	.getVideoTracks()[0]
	.applyConstraints({advanced: [{zoom: ++zoom]});

 

maxZoom은 디바이스별로 상이하다.

 

ios, android 둘다 테스트 해본결과 가능하다.