/* <!--
    webcam.html is a small Node.js script and an HTML page.

    It will stream your webcam feed to a video element.

    You can crop the image using the controls on the page.
    You can then use picture-in-picture mode
        to show your webcam above other windows.

    Run it with: `node webcam.html`
*/

const fs = require('fs');

require('http').createServer(async (_, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(fs.readFileSync(__filename, 'utf8'));
}).listen(6942, () => {
    console.log('View Cam on http://localhost:6942');
});

/* -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webcam</title>

<button id="stopWebcam">Stop</button>
<span id="display"></span>
<br>
X:
<input type="range" id="xEnd" min="50" max="100" style="direction: rtl">
<input type="range" id="xStart" min="0" max="50">
<br>
Y:
<input type="range" id="yStart" min="0" max="50" style="direction: rtl">
<input type="range" id="yEnd" min="50" max="100">
<br>
Scale X:
<input type="range" id="scaleX" min="0.5" max="2" step="0.1" value="1">
<br>
Scale Y:
<input type="range" id="scaleY" min="0.5" max="2" step="0.1" value="1">
<br>
<video id="videoIn" width="640" height="480" style="display: none"></video>
<video id="videoOut" width="640" height="480" controls autoplay></video>
<canvas id="videoTransform" width="640" height="480" style="display: none"></canvas>

<script type="module">
    const state = {
        xStart: 0,
        xEnd: 100,
        yStart: 0,
        yEnd: 100,
        scaleX: 1,
        scaleY: 1,
    };

    const ui = {
        stopWebcam: document.querySelector("#stopWebcam"),
        xStart: document.querySelector("#xStart"),
        xEnd: document.querySelector("#xEnd"),
        yStart: document.querySelector("#yStart"),
        yEnd: document.querySelector("#yEnd"),
        scaleX: document.querySelector("#scaleX"),
        scaleY: document.querySelector("#scaleY"),
        display: document.querySelector("#display"),

        videoIn: document.querySelector('#videoIn'),
        videoOut: document.querySelector('#videoOut'),
        videoTransform: document.querySelector('#videoTransform'),
    };

    function updateState(updatedFields) {
        Object.assign(state, updatedFields);
        localStorage.setItem('state', JSON.stringify(state));

        ui.display.textContent = `X: ${state.xStart}..${state.xEnd}`
            + ` | Scale X: ${state.scaleX}`
            + ` | Y: ${state.yStart}..${state.yEnd}`
            + ` | Scale Y: ${state.scaleY}`;

        ui.xStart.value = 50 - state.xStart;
        ui.xEnd.value = state.xEnd;

        ui.yStart.value = 50 - state.yStart;
        ui.yEnd.value = state.yEnd;

        ui.scaleX.value = state.scaleX;
        ui.scaleY.value = state.scaleY;
    };

    updateState(
        JSON.parse(localStorage.getItem('state') ?? "{}")
    );

    ui.stopWebcam.addEventListener('click', () => {
        stream.getVideoTracks()[0].stop();
    });

    ui.xStart.addEventListener('input', (e) => updateState({ xStart: 50 - e.target.value }));
    ui.yStart.addEventListener('input', (e) => updateState({ yStart: 50 - e.target.value }));
    ui.xEnd.addEventListener('input', (e) => updateState({ xEnd: e.target.value }));
    ui.yEnd.addEventListener('input', (e) => updateState({ yEnd: e.target.value }));
    ui.scaleX.addEventListener('input', (e) => updateState({ scaleX: e.target.value }));
    ui.scaleY.addEventListener('input', (e) => updateState({ scaleY: e.target.value }));

    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    ui.videoIn.srcObject = stream;
    ui.videoIn.play();

    ui.videoIn.onloadedmetadata = () => {
        ui.videoTransform.width = ui.videoIn.videoWidth;
        ui.videoTransform.height = ui.videoIn.videoHeight;

        ui.videoOut.srcObject = ui.videoTransform.captureStream();

        renderWebcamFeed();
    };

    const ctx = ui.videoTransform.getContext('2d');

    function renderWebcamFeed() {
        const cropXStart = (state.xStart / 100) * ui.videoIn.videoWidth;
        const cropXEnd = (state.xEnd / 100) * ui.videoIn.videoWidth;
        const cropYStart = (state.yStart / 100) * ui.videoIn.videoHeight;
        const cropYEnd = (state.yEnd / 100) * ui.videoIn.videoHeight;

        const newWidth = cropXEnd - cropXStart;
        const newHeight = cropYEnd - cropYStart;

        ui.videoOut.width = newWidth * state.scaleX;
        ui.videoOut.height = newHeight * state.scaleY;
        ui.videoTransform.width = newWidth * state.scaleX;
        ui.videoTransform.height = newHeight * state.scaleY;

        ctx.clearRect(0, 0, ctx.width, ctx.height);
        ctx.scale(-state.scaleX, state.scaleY);
        ctx.drawImage(ui.videoIn,
            cropXStart, cropYStart, newWidth, newHeight,
            0, 0, -newWidth, newHeight,
        );

        requestAnimationFrame(renderWebcamFeed);
    }
</script>
*/