実現したいこと
ブラウザで動かすWebカメラを用いて写真を撮影し、サーバに保存するようなプログラムを作成しています。
スマホで動作させることを想定しています。
撮影の際はスマホを縦向きにした状態で、横長の長方形の写真を撮影することを実現したいです。
現在、AWSにデプロイしてHTTPS化し、スマホで動作確認をしているのですが、幅と高さを指定しても、指定通りの画像サイズにならず、スマホの標準カメラと同じ幅・高さの画像が撮影されてしまいます。
前提
・Laravel ver. : 7.12.0
・Android OS : EMUI 9.1.0
・端末名 : HUAWEI P20 lite
・ブラウザ : Chrome
・getUserMedia の設定は、resources/js/script.js に保存し、npm run dev でコンパイルしています。
発生している問題・エラーメッセージ
エラーメッセージは特にないです。
後述する script.js のコードにて、アスペクト比=1.2、幅=300、高さ=200 で横長に指定しているのですが、以下の画像のように縦長(多分、スマホの標準カメラサイズ)で表示されてしまい、うまくいきません。
実際に撮影した画像を見てみても、やはり縦長になっています(送信ボタンより下に写っている画像が、撮影した結果です)。
該当のソースコード
// root/resources/js/script.js // このファイルを、npm run dev コマンドでコンパイルしてから動作確認します。 'use strict'; var video_area = document.getElementById('video_area'); var start = document.getElementById('start'); var capture = document.getElementById('capture'); start.addEventListener('click', () => { navigator.mediaDevices.getUserMedia({ video: { aspectRatio: {exact: 1.2}, width: {exact: 300}, height: {exact: 200}, facingMode: "environment" }, audio: false }) .then(stream => video_area.srcObject = stream) .catch(err => alert(`${err.name} ${err.message}`)); }, false); capture.addEventListener('click', () => { var ci = document.getElementById('captured_image'); var ci_context = ci.getContext('2d'); var va = document.getElementById('video_area'); ci.width = va.videoWidth; ci.height = va.videoHeight; ci_context.drawImage(va, 0, 0); document.getElementById('image').value = ci.toDataURL('image/png'); }, false);
// root/resources/view/camera-sample.blade.php // localhost以外で getUserMedia を使う場合は、HTTPSを使う必要があるので、secure_url() ヘルパを使用しています。localhostで使用する際は、url()ヘルパに置き換える必要があります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="{{ secure_asset('css/style.css') }}"> <title>カメラ サンプル</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <body> <h2>Video</h2> <video id="video_area" width="300" height="200" style="background-color: #000" autoplay></video> <button id="start">映像表示開始</button> <button id="capture">撮影</button> <form id="image_form" action="{{ secure_url('/') }}" method="post"> @csrf <input id="image" type="hidden" name="image" value=""> <input id="submit_image" type="submit" name="submit" value="送信"> </form> <canvas id="captured_image"></canvas> <script src="{{ secure_asset('js/script.js') }}"></script> </body> </html>
試したこと
・root/public/js/script.js がコンパイル結果なので確認してみましたが、きちんと書いたとおりに記述されていました。
・「スマホだと width と height が逆で認識されるのか」と仮説を立て、width=200, height=300 に指定して試してみましたが、特に変わりなく、ダメでした。
・逆に、aspectRaitio, width, height を何も指定せずに試してみましたが、これも特に変わりなく、ダメでした。ということは、つまり設定が反映されていないということなのでしょうか?
・実際にコンパイルされたjsのソースコードと、スマホ上でのデベロッパーツールで確認したjsのソースコードを確認してみました。
以下が、コンパイルされたソースの結果で、ちゃんとwidthなどが設定されていることが確認できます。
また、スマホをMacに接続して、スマホ上でのデベロッパーツールでもソースを確認してみました。
すると、設定していたはずのaspectRatioやwidthが読み込まれていないことが確認できました。
(ちなみに、上の画像にある、新たに追加した変数 constraints と、デバッグ用に追加した一文 console.log('constraints'); も、なぜか読み込まれていません。)
つまり、今回使用しているスマホでは、widthやaspectRatioは指定できないということなのでしょうか?
参考URL
・https://www.html5rocks.com/en/tutorials/getusermedia/intro/
上記URLの「Setting media constraints (resolution, height, width)」の項目
・https://houwa-js.co.jp/blog/2019/06/20190604/#details
・https://w3c.github.io/mediacapture-main/getusermedia.html#dictionary-mediatracksettings-members
以上、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー