ARでトレース＆スケッチを自作してみた

2025-04-26

AR Drowingアプリを見つけて

拡張現実を利用してお絵描きするためのツールがいくつかありますが、これ技術的には難しくないんではないかと思って、自作してみました。過去の経験から言わせていただくと、Androidスマホの中にはインカメラが起動してしまうものがあったような気がしますが、今回はそこまで気にせず実装していますのでご了承ください。

https://s-okada.org/arOekaki

カメラを起動する(サンプルコード)

「dispImg」は画像ファイルのIDです。画像ファイルと同じ大きさにするため、大きさを取得しています。

const video = document.getElementById("camera");
var cameraWidth = document.getElementById('dispImg').clientWidth;;
var cameraHeight = document.getElementById('dispImg').clientHeight;

const cameraSetting = {
    audio: false,
    video: {
        width: cameraWidth,
        height: cameraHeight,
        facingMode: "environment",
    }
}

navigator.mediaDevices.getUserMedia(cameraSetting)
    .then((mediaStream) => {
        video.srcObject = mediaStream;
    })
    .catch((err) => {
        console.log(err.toString());
    });

画像ファイルをBase64変換する（サンプルコード）

アップロードされたファイルを、サーバに保存したくはないので一時ファイルからBase64変換してHTML上に表示します。

$temporary_file  = $_FILES['file']['tmp_name'];
$true_file = $_FILES['file']['name']; # 本来のファイル名
if (is_uploaded_file($temporary_file)) {
    $data = base64_encode(file_get_contents($temporary_file));

    // ファイル情報
    $path_parts = pathinfo($true_file);

    // 拡張子を小文字置換
    $file_ext = strtolower($path_parts['extension']);
    if ($file_ext == 'jpeg') {
        $file_ext = 'jpg';
    }
    $src = 'data: ' . $file_ext . ';base64,' . $data;
    echo '<img id="dispImg" src="' . htmlspecialchars($src) . '">';

} else {
    echo "ファイルが選択されていません。";
}