[자바스크립트] WebRTC 카메라 설정 변경하기 Ver.2 (tweakpane)

이전 글에서 일부를 수정했습니다.

2021.04.14 - [자바스크립트] - [자바스크립트] WebRTC 카메라 설정 변경하기 (tweakpane응용)

코드의 재사용성을 늘리기 위해 수정했습니다.

설명보다는 기록을 위한 글 입니다.

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <div id="videoContainer"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/tweakpane@2.3.0/dist/tweakpane.min.js"></script>
<script>
    const videoContainer = document.getElementById("videoContainer");
    const runWebRTC = (container, videoWidth, videoHeight, camera) => {
        container.style.width = videoWidth + "px";
        container.style.height = videoHeight + "px";
        const video = document.createElement("video");
        video.style.position = "absolute";
        const constraints = {
            audio: false,
            video: {
                facingMode: { exact: camera },
                width: { exact: videoWidth },
                height: { exact: videoHeight },
            }
        };
        navigator.mediaDevices.getUserMedia(constraints)
            .then(mediaStream => {
                video.srcObject = mediaStream;
                video.play();
            })
            .catch(err => console.log(err));
        stopMediaStream(); //Stop current mediastream.
        container.innerHTML = ""; //Remove inner elements.
        container.appendChild(video);
    }

    const stopMediaStream = () => {
        try {
            const tracks = document.getElementsByTagName("video")[0].srcObject.getTracks();
            tracks.forEach(track => track.stop());
            videoContainer.innerHTML = "";
        }
        catch {
            console.log("There are no existing mediastreams.");
        }
    }

    const pane = new Tweakpane();
    const params = {
        rtcWidth: 300,
        rtcHeight: 300,
        rtcResolution: "",
        rtcCamera: "",
    };
    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: {
            VGA: "640X480",
            QVGA: "320X240",
            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: "Start Streaming" }).on("click", () => {
        if (params.rtcResolution == "320X240") runWebRTC(videoContainer, 320, 240, params.rtcCamera);
        else if (params.rtcResolution == "640X480") runWebRTC(videoContainer, 640, 480, params.rtcCamera);
        else if (params.rtcResolution == "CUSTOM") runWebRTC(videoContainer, params.rtcWidth, params.rtcHeight, params.rtcCamera);
    });
    rtcFolder.addButton({ title: "Stop Streaming" }).on("click", () => stopMediaStream());

</script>

</html>

728x90

저작자표시 비영리 변경금지

'소프트웨어 > 자바스크립트' 카테고리의 다른 글

[자바스크립트] 브라우저에서 JSON 파일 불러오기 (0)	2022.08.04
[자바스크립트] 윈도우 화면 캡처 (0)	2022.02.17
[자바스크립트] WebRTC 카메라 설정 변경하기 (tweakpane응용) (0)	2021.04.14
[자바스크립트] WebRTC 카메라 해상도 변경하기 (dat.gui 응용) (0)	2021.04.13
[자바스크립트] dat.GUI - GUI 응용 #1 (0)	2021.03.30