index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">


    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script> -->
    <script type="text/javascript">

        //some mysterious code to get device ids
        navigator.mediaDevices.enumerateDevices()
            .then(function (devices) {
                devices.forEach(function (device) {
                    console.log(device.kind + ": " + device.label +
                        " id = " + device.deviceId);
                });
            })
            .catch(function (err) {
                console.log(err.name + ": " + err.message);
            });
    </script>
    <script src="./js/camera_utils.js"></script>
    <script src="./js/control_utils.js"></script>
    <script src="./js/hands.js"></script>
    <title>handable</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            overflow-x: hidden;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <div id="p5Canvas">

    </div>
</body>
<button id="startCamera" onclick="startCamera();" style="position:absolute;left:10px;top:10px;" hidden>start Camera
    Manually</button>
<script src="./p5.min.js"></script>
<script src="./js/dollar.js"></script>
<script src="./js/effects.js"></script>
<script src="./sketch.js"></script>

</html>