日常技術簿

生きていく中で気になったことを、自分で作って確かめるブログです。

ブラウザでカメラを使う

ブラウザで写真を撮影する機会の増加

ブラウザで本人確認書類を送付 社会人になり、給料と生活費を管理するために、いくつかネット銀行を作った。

最近は、銀行口座の開設もWeb上で行えるので非常に助かる。

 

口座の開設には、本人書類を写真で送付する必要がある。

ここで、スマホのカメラを用いて、免許証などを撮影する。

ここで、いくつか技術的に気になる点があったのでまとめておこう。

 

気になる技術

  1. ブラウザ側から端末のカメラを操作することが可能か?

  2. カードを置いた面(床)を認識する方法は?

  3. 撮影した画像をアップロードする方法は?  

今回は1を調べてみる。今はブラウザ万能時代。

きっとカメラの操作なんかも可能なんだろう。次のような記事を見つけた。

blog.katsubemakito.net

やはり、JavaScrioptで実現可能なようだ。

以下、写経したコード

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>PC In-Camera Test</title>
    <style>
        canvas,
        video {
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <h1>HTML5 カメラテスト</h1>
    <video id="camera" width="300" height="200"></video>
    <canvas id="picture" width="300" height="200"></canvas>
    <form>
        <button type="button" id="shutter">シャッター

        </button>
    </form>
</body>

<script>
    window.onload = () => {
        const video = document.querySelector("#camera");
        const canvas = document.querySelector("#picture");
        /**カメラ設定**/
        const conctraints = {
            audio: false,
            video: {
                width: 300,
                height: 200,
                faceingMode: "user" //フロントカメラを使用する
                //faceingMode: {exact: "environment"} //リアカメラを使用する
            }
        };
        //**カメラと<video>を同期する**/
        navigator.mediaDevices.getUserMedia(conctraints)
            .then((stream) => {
                video.srcObject = stream;
                video.onloadedmetadata = (e) => {
                    video.play();
                };
            })
            .catch((err) => {
                console.log(err.name + ": " + err.message);
            });

        /**シャッターボタン**/
        document.querySelector("#shutter").addEventListener("click", ()=> {
            const ctx = canvas.getContext("2d");
            //canvasに画像を貼り付ける
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        });
    };
</script>
</html>

シャッター音など、必要のない機能は削いである。 実際にこのHTMLをブラウザで開くと、

f:id:yuhanaoka:20210519231008p:plain
PCのインカメによる撮影

こんな感じでPCのインカメを動作させることができた。

しかしながら、このコード、スマートフォン(iPhone)では動かない。

参照ブログによれば、

iOS版のChromeはWKWebView(要はSafariの機能限定版です)という機能を利用しているのですが、こいつがgetUserMedia()に対応していないため利用できないようです。iOSは独自の仕組みでWebページを表示することを禁止していますので、Appleが対応するまでは難しそうですね。

とのこと。

次の課題

スマホのカメラをブラウザから動かすこと。