#はじめに
アロハ！
今回は、ネイティブアプリを使わずに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',
に変更してください。
<!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>
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");
}
#video{
width: 100%;
}
これら3つのファイルをウェブサーバーにおいて、iPhoneのSafariでアクセスすると動画が表示されます。
「撮影」ボタンを押すと、動画の下に静止画が描画されます。
この静止画は、jpeg形式でimageDataに入れていますので、もしサーバーへ送りたければformに入れてPOSTすればいいです。
httpsにしないと動かないかもしれないのでその場合は、Let’s Encryptなどを使ってください。
#おわりに
そもそも、なぜHTML5でカメラが使えるのか？不思議に思われたかもしれません。一つの理由としては、WebRTC（Web Real-Time Communication）というリアルタイム通信（テレビ会議）を実現しようとして開発されたからです。ですので、そういう用途でも使えます。NAT越えとか大変そうですが・・・。
よいクリスマス＆新年をお迎えください。
マハロ！