[JS]MediaTrackConstraints - 웹캠 프레임 이슈 해결

웹캠을 이용해 웹에 영상을 제공할때 width, height 등의 속성을 지정할 수 있다.

const constratins = {
audio: false,
    facingMode: 'user',
    video: {
	width: 1280,
        height: 720
    }
};

 

 

이렇게 잘 사용하는 와중 웹캠이 구현되는 디바이스 성능에 따라 frame이 버벅...이게 되는 경우가 종종 발생하는 현상이 있었다.

 

그래서 또 열심히 서칭한 결과 프레임을 어느정도 보장할 수 있는 속성을 발견했다.

const constratins = {
	audio: false,
    facingMode: 'user',
    video: {
	width: 1280,
        height: 720,
        frameRate: {
        idea: 60,
            min: 20
        }
    }
}

frameRate라는 설정을 통해서 최소한의 프레임을 보장할 수 있었다.

 

const constraints = {
	audio: false,
    facingMode: 'user',
    video: {
	width: 1280,
        height: 720,
        frameRate: {
        idea: 60,
            min: 20
        }
    }
}

const stream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = stream;

웹캠 서비스를 위해서는 MediaTrackConstraints 뿐만 아니라

• MediaStreamTrack.getSeetings()
• MediaStreamTrack: applyConstraints()
• MediaDevices.getSupportedConstraints()

이러한 메서드들도 찾아보길 바랍니다.