728x90
목 차
1. 서론
2. 본론
2.1. 적용 코드
2.2. 메모
3. 결론
1. 서론
WebRTC는 클라이언트의 카메라를 이용합니다. 즉, 접속하는 기기에 따라 적용할 수 있는 해상도가 다른데, dat.gui를 이용해 해상도를 변경할 수 있는 코드를 작성했습니다.
2. 본론
2.1. 적용 코드
<!DOCTYPE html>
<html>
<body>
<video id="video"></video>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
<script>
let stream;
const video = document.getElementById("video");
const stopRtc = () => {
if (stream) stream.getTracks().forEach(track => track.stop());
video.style.display = "none";
}
const runRtc = (constraints) => {
stopRtc();
navigator.mediaDevices.getUserMedia(constraints)
.then(mediaStream => {
video.style.display = "block";
stream = window.stream = mediaStream;
video.srcObject = mediaStream;
video.play();
})
.catch(e => console.log(e));
}
const setConstraints = (w, h) => {
const constraints = {
audio: false,
video: { width: { exact: w }, height: { exact: h } }
};
return constraints;
}
const params = {
runQVGA: () => runRtc(setConstraints(320, 240)),
runVGA: () => runRtc(setConstraints(640, 480)),
width: 300,
height: 300,
runCustom: () => runRtc(setConstraints(params.width, params.height)),
stopRTC: () => stopRtc(),
}
const gui = new dat.GUI();
const rtcFolder = gui.addFolder("WebRTC");
const rtcCustom = rtcFolder.addFolder("Custom");
rtcCustom.add(params, "width");
rtcCustom.add(params, "height");
rtcCustom.add(params, "runCustom").name("Run Custom");
rtcFolder.add(params, "runQVGA").name("QVGA(320x240)");
rtcFolder.add(params, "runVGA").name("VGA(640x480)");
rtcFolder.add(params, "stopRTC").name("Stop Stream");
rtcFolder.open();
</script>
</html>
2.2. 코드 메모
gui 구성을 위해 dat.gui 라이브러리를 사용했습니다. 해상도 변경의 핵심은, 활성화된 stream을 모두 종료한 후 다시 켜는 것 입니다. 이를 위해 전역변수로 stream을 사용했습니다.
스마트폰 환경에서는 전/후면 카메라를 사용하는데, 이를 설정할 수 있도록 업데이트 할 예정입니다.
3. 결론
해상도를 변경할 수 있도록 설정을 완료했습니다. 향후 스마트폰의 전/후면 카메라 선택 기능을 추가해야 합니다.
[끝].
'소프트웨어 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] WebRTC 카메라 설정 변경하기 Ver.2 (tweakpane) (0) | 2021.06.25 |
|---|---|
| [자바스크립트] WebRTC 카메라 설정 변경하기 (tweakpane응용) (0) | 2021.04.14 |
| [자바스크립트] dat.GUI - GUI 응용 #1 (0) | 2021.03.30 |
| [자바스크립트] dat.GUI - GUI 만들기 (0) | 2021.03.24 |
| [자바스크립트] Node.js - Tensorflow.js Generator를 이용한 데이터셋 만들기 (0) | 2021.01.23 |
댓글