領収書カメラアプリ

<!DOCTYPE html>
<html>
<head>
    <title>領収書カメラアプリ</title>
    <style>
        #camera {
            width: 100%;
            height: auto;
        }
        #result {
            text-align: center;
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>領収書カメラアプリ</h1>
    <video id="camera" autoplay></video>
    <div id="result"></div>

    <script>
        // カメラを開く
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                var camera = document.getElementById("camera");
                camera.srcObject = stream;
            })
            .catch(function (error) {
                console.log("カメラにアクセスできませんでした: " + error.message);
            });

        // 領収書撮影と処理
        var camera = document.getElementById("camera");
        camera.addEventListener('click', function () {
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            canvas.width = camera.videoWidth;
            canvas.height = camera.videoHeight;
            context.drawImage(camera, 0, 0, canvas.width, canvas.height);
            var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

            // ここで領収書画像の処理を行う（OCRや合計金額の検出など）

            // 仮の合計金額をランダムに生成
            var totalAmount = Math.floor(Math.random() * 10000);
            
            // ウェブに合計金額を表示
            var result = document.getElementById('result');
            result.innerText = '合計金額: ' + totalAmount + '円';

            // ジョークの表示（ランダムに選択）
            var jokes = ["領収書: お金をペーパーに変える魔法",
                 "領収書: 公式な証拠と相場できる紙切れ",
                 "領収書: 財布に穴を開ける魔法の呪文",
                 "領収書: お金を遊びに派遣する伝票"];
            var randomIndex = Math.floor(Math.random() * jokes.length);
            var joke = jokes[randomIndex];
            result.innerText += '\n' + joke;
        });
    </script>
</body>
</html>