はじめに

アロハ！
　今回は、ネイティブアプリを使わずにiPhoneで写真を撮る方法を書きます。
一般的にiPhoneで写真を撮る方法は、おそらく３つあります。
１つ目は、Appleがプレインストールしている「カメラ」アプリ。
２つ目は、誰かが作ったカメラ系アプリ。Swiftで書いたり、Objective-Cで書いたり。私も以前、「お天気カメラ」というアプリをAppStoreでリリースしていました。（数年前に公開停止しました。）
お天気カメラで写真を撮ると、位置情報からopenweathermap.orgのAPIを叩いて、気象情報を取得して、写真にオーバーレイして保存できるものでした。懐かしい・・・。
３つ目は、Safariを使う方法です。今回は、このお話です。
アプリを入れずに写真を撮って、サーバーへ送ったりできるので、いろんな使い道があります。例えば、文字が書かれた看板を撮影し、OCRで読み込んで、翻訳するといったことにも使っています。東京都内の某店舗にご協力いただいて、絶賛実験中（NFCやQRも対応）です。インバウンド旅行者の方に商品を深く理解してもらいつつ、スタッフの方の働き方改革に役立てようというものです。

ご注意

　動画を静止画にする方法なので、期待するほど美しくない場合があります。手振れの影響も大きいかもしれません。OCRには十分使えますが。

大きな方針

・HTML5+Javascript+CSSでコーディング
・iPhone版Safariを使用（ChromeなどSafari以外のブラウザでは動かないようです。）
・少なくともiOS13系で動かす

具体的にどうするの？

ずばり、HTML5のgetUserMedia()を使います。iPhoneのメインカメラで撮影する場合の例です。
インカメラを使いたい場合は、camera.jsの設定を
facingMode: 'environment',から
facingMode: 'user',
に変更してください。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CAMERA</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
  <link rel="stylesheet" type="text/css" href="camera.css" />
</head>
<body>
  <div id="main">
    <button id="btn_shot" onclick="func_shot()">撮影</button>
    <div id="video_frame">
      <video id="video" autoplay playsinline></video>
      <script src="camera.js"></script>
      <canvas id="myCanvas"></canvas>
    </div>
  </div>
</body>
</html>

camera.js

const medias = {
    audio: false,
    video: {
        facingMode: 'environment', //メインカメラ
        width: { min: 1024, ideal: 1920, max: 2436 },
        height: { min: 776, ideal: 1080, max: 1125 }
    }
};
const video = document.getElementById("video");
const promise = navigator.mediaDevices.getUserMedia(medias);

promise.then(function(stream){
    /* 成功 */
    video.srcObject = stream;
})
.catch(function(err) {
    /* エラーをハンドル */
});

function func_shot(){
    var canvas = document.getElementById('myCanvas');
    var ctx    = canvas.getContext('2d');
    var width  = video.offsetWidth;
    var height = video.offsetHeight;
    canvas.setAttribute('width' , width);
    canvas.setAttribute('height', height);
    ctx.drawImage(video, 0, 0, width, height);
    //画像をJPEGにしたいとき（これをformでPOSTしたりすればいいです）
    var imageData = canvas.toDataURL("image/jpg");
}

camera.css

#video{
    width: 100%;
}

これら3つのファイルをウェブサーバーにおいて、iPhoneのSafariでアクセスすると動画が表示されます。
「撮影」ボタンを押すと、動画の下に静止画が描画されます。
この静止画は、jpeg形式でimageDataに入れていますので、もしサーバーへ送りたければformに入れてPOSTすればいいです。
httpsにしないと動かないかもしれないのでその場合は、Let’s Encryptなどを使ってください。

おわりに

そもそも、なぜHTML5でカメラが使えるのか？不思議に思われたかもしれません。一つの理由としては、WebRTC（Web Real-Time Communication）というリアルタイム通信（テレビ会議）を実現しようとして開発されたからです。ですので、そういう用途でも使えます。NAT越えとか大変そうですが・・・。

よいクリスマス＆新年をお迎えください。
マハロ！