前提条件
・httpsが必要なので、自己証明をつけるか毎回警告を無視するか選択が必要
・Windwosとandroid共通
・windowsではそれなりに早いが、androidは遅いのでtype=”file”の方法で
画像の解像度は
canvasサイズによるのでcanvasを2種類表示しCSSで大きなサイズは
#picture2{
display: none !important;
}
で隠しておく
動作は
・navigator.mediaDevices.getUserMediaでカメラから読込
・streamをcanvasに同期
・シャッターで
const ctx = canvas.getContext(“2d”);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
・saveで
var img_url = cnvs.toDataURL(“image/png”);をつかって
input文upload_dataにセット
document.getElementById(‘upload_data’).value = img_urlに
document.form1.submit();でconntrollerに送信
/** カメラ設定 */
const constraints = {
audio: false,
video: {
width: 2304,
height: 3072,
//facingMode: “user” // フロントカメラを利用する
//facingMode: { exact: “environment” } // リアカメラを利用する場合
facingMode: “environment”
}
};
書き込みは
// データが送られてきた場合
$upload_data = $_POST[‘upload_data’];
// デコード
$upload_data = base64_decode($upload_data);
// test.pngに保存
$fp = fopen($directory_path.’/’.’test.jpg’, ‘w’);
fwrite($fp, $upload_data);
fclose($fp);