목 차
1. 서론
2. 본론
2.1. Tweakpane
2.2. 적용 코드
2.3. 실행 화면
2.4. Comment
3. 결론
1. 서론
WebRTC는 클라이언트의 카메라를 이용합니다. 즉, 접속하는 기기에 따라 적용할 수 있는 해상도가 다른데, Tweakpane을 이용해 해상도를 변경할 수 있는 코드를 작성했습니다.
※이전 글과의 차이점
- dat.gui 라이브러리를 Tweakpane 으로 변경함.
- 전/후면 카메라 전환기능을 추가함. (카메라가 있는 경우)
2021.04.13 - [자바스크립트] - [자바스크립트] WebRTC 카메라 해상도 변경하기 (dat.gui 응용)
[자바스크립트] WebRTC 카메라 해상도 변경하기 (dat.gui 응용)
목 차 1. 서론 2. 본론 2.1. 적용 코드 2.2. 메모 3. 결론 1. 서론 WebRTC는 클라이언트의 카메라를 이용합니다. 즉, 접속하는 기기에 따라 적용할 수 있는 해상도가 다른데, dat.gui를 이용해 해상도를 변
mandloh.tistory.com
2. 본론
2.1. Tweakpane
dat.gui와 유사한 자바스크립트 GUI용 라이브러리이고, 사용 방법도 유사합니다. 깔끔하고, 그래프와 좌표 기능이 마음에 들어 사용해 보았습니다.
2.2. 적용 코드
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--tp-base-background-color: hsla(230, 20%, 11%, 1.00);
--tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
--tp-button-background-color: hsla(230, 10%, 80%, 1.00);
--tp-button-background-color-active: hsla(230, 10%, 95%, 1.00);
--tp-button-background-color-focus: hsla(230, 10%, 90%, 1.00);
--tp-button-background-color-hover: hsla(230, 10%, 85%, 1.00);
--tp-button-foreground-color: hsla(230, 20%, 11%, 1.00);
--tp-folder-background-color: hsla(230, 25%, 16%, 1.00);
--tp-folder-background-color-active: hsla(230, 25%, 31%, 1.00);
--tp-folder-background-color-focus: hsla(230, 25%, 26%, 1.00);
--tp-folder-background-color-hover: hsla(230, 25%, 21%, 1.00);
--tp-folder-foreground-color: hsla(230, 10%, 80%, 1.00);
--tp-input-background-color: hsla(230, 20%, 8%, 1.00);
--tp-input-background-color-active: hsla(230, 28%, 23%, 1.00);
--tp-input-background-color-focus: hsla(230, 28%, 18%, 1.00);
--tp-input-background-color-hover: hsla(230, 20%, 13%, 1.00);
--tp-input-foreground-color: hsla(230, 10%, 80%, 1.00);
--tp-monitor-background-color: hsla(230, 20%, 8%, 1.00);
--tp-monitor-foreground-color: hsla(230, 12%, 48%, 1.00);
--tp-label-foreground-color: hsla(230, 12%, 48%, 1.00);
--tp-separator-color: hsla(230, 20%, 8%, 1.00);
}
</style>
</head>
<body>
<video id="video"></video>
<div id="container"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/tweakpane@2.3.0/dist/tweakpane.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, camera_dir) => {
const constraints = {
audio: false,
video: {
facingMode: { exact: camera_dir },
width: { exact: w },
height: { exact: h },
}
};
return constraints;
}
const params = {
joystick: { x: 0, y: 0 },
rtcWidth: 300,
rtcHeight: 300,
rtcResolution: "",
rtcCamera: "",
};
const pane = new Tweakpane();
const videoFolder = pane.addFolder({ title: "Video Setting" });
const rtcFolder = videoFolder.addFolder({ title: "WebRTC" });
const rtcCustomFolder = rtcFolder.addFolder({ title: "Custom Setting" });
rtcCustomFolder.addInput(params, "rtcWidth", { min: 300, max: 1200, step: 10, label: "Width" });
rtcCustomFolder.addInput(params, "rtcHeight", { min: 300, max: 1200, step: 10, label: "Height" });
rtcCustomFolder.hidden = true;
rtcFolder.addInput(params, "rtcResolution", {
label: "Resolution",
options: {
QVGA: "320X240",
VGA: "640X480",
CUSTOM: "CUSTOM",
},
}).on("change", () => {
params.rtcResolution == "CUSTOM" ? rtcCustomFolder.hidden = false : rtcCustomFolder.hidden = true;
});
rtcFolder.addInput(params, "rtcCamera", {
label: "Camera",
options: {
Front: "user",
Rear: "environment",
}
})
rtcFolder.addButton({ title: "Run Selected Option" }).on("click", () => {
if (params.rtcResolution == "320X240") runRtc(setConstraints(320, 240, params.rtcCamera));
else if (params.rtcResolution == "640X480") runRtc(setConstraints(640, 480, params.rtcCamera));
else if (params.rtcResolution == "CUSTOM") runRtc(setConstraints(params.rtcWidth, params.rtcHeight, params.rtcCamera));
});
rtcFolder.addButton({ title: "Stop Streaming" }).on("click", () => stopRtc());
const joystick = pane.addInput(params, "joystick", {
label: "Joystick",
x: { min: -10, max: 10, step: 1 },
y: { min: -10, max: 10, step: 1 },
}).on("change", () => {
console.log(params.joystick);
});
window.addEventListener("mouseup", evt => {
params.joystick.x = 0;
params.joystick.y = 0;
pane.refresh();
});
window.addEventListener("touchend", evt => {
params.joystick.x = 0;
params.joystick.y = 0;
pane.refresh();
});
</script>
</html>
2.3. 실행 화면
2.4. Comment
dat.gui도 리스트같은 기능을 활용할 수 있지만, Tweakpane의 UI가 세련된 느낌을 줍니다. 테마도 쉽게 변경 적용이 가능합니다. 스마트폰처럼 카메라가 여러개인 경우, 전/후면 카메라로 전환하는 메뉴를 추가했습니다.
3. 결론
인공지능 RC카 프로젝트의 일환으로, GUI를 구성하고 있습니다. 기존 dat.gui 구성에서 Tweakpane으로 변경 적용하려 합니다. 디자인도 한몫 하지만, Joystick을 만들 수 있는 것이 가장 크게 작용했습니다.
[끝].
728x90
'소프트웨어 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 윈도우 화면 캡처 (0) | 2022.02.17 |
|---|---|
| [자바스크립트] WebRTC 카메라 설정 변경하기 Ver.2 (tweakpane) (0) | 2021.06.25 |
| [자바스크립트] WebRTC 카메라 해상도 변경하기 (dat.gui 응용) (0) | 2021.04.13 |
| [자바스크립트] dat.GUI - GUI 응용 #1 (0) | 2021.03.30 |
| [자바스크립트] dat.GUI - GUI 만들기 (0) | 2021.03.24 |
댓글