test/index.html at main · TokenPocket/test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QRコードスキャナー</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 80vh; /* 高さを80%に調整 */
            margin: 0;
            background-color: #f7f9fc;
        }
        h1 {
            color: #333;
            margin-bottom: 10px;
        }
        #video {
            width: 90%;
            height: 70%; /* 高さを70%に調整 */
            border: 2px solid #333;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        #output {
            margin-top: 10px;
            font-size: 1.2em;
            color: #333;
            text-align: center;
        }
    </style>
    <!-- jsQRライブラリをCDNから読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js" defer></script>
</head>
<body>
    <h1>QRコードスキャナー</h1>
    <video id="video"></video>
    <canvas id="canvas" style="display:none;"></canvas>
    <div id="output">QRコードをスキャン中...</div>

    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const video = document.getElementById('video');
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            const output = document.getElementById('output');

            // カメラの起動
            navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
                .then(function(stream) {
                    video.srcObject = stream;
                    video.setAttribute('playsinline', true); // iOS Safariで必要
                    video.play();
                    requestAnimationFrame(tick);
                })
                .catch(function(err) {
                    console.error("Error accessing the camera: ", err);
                    output.innerText = "カメラにアクセスできませんでした: " + err.message;
                });

            function tick() {
                if (video.readyState === video.HAVE_ENOUGH_DATA) {
                    canvas.height = video.videoHeight;
                    canvas.width = video.videoWidth;
                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    var code = jsQR(imageData.data, imageData.width, imageData.height, {
                        inversionAttempts: "dontInvert",
                    });
                    if (code) {
                        output.innerText = "QRコードが見つかりました: " + code.data;
                        window.location.href = "https://www.figma.com/proto/NsOdjwScyO1EGn2EVCtdta/%E5%BB%A3%E4%BA%95-%E5%A4%8F%E8%BC%9D?node-id=1-13&t=aVOinJve9BNmDcwe-1&starting-point-node-id=1%3A13";
                    } else {
                        output.innerText = "QRコードをスキャン中...";
                    }
                }
                requestAnimationFrame(tick);
            }
        });
    </script>
</body>
</html>