質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3696閲覧

getUserMedia() を使って、スマホ上のWebカメラで撮影する画像の幅・高さを指定したい

takaoS

総合スコア9

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/28 07:06

編集2020/06/28 09:17

実現したいこと

ブラウザで動かす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

以上、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuki84web

2020/06/28 10:00

色々な端末で検証してみて、うまくいくものといかないものがあるなら、端末の仕様かもしれません
takaoS

2020/06/28 11:04

やはりそうなのですね... 試しに、ASUS_X00HD でデベロッパーツールを使って確認してみたのですが、そちらではaspectRatioなどが確認できました。 つまり、今回使用したHUAWEIだと、aspectRatioなどが指定できないということですね... ちなみに、ASUS_X00HDの方では、そもそもカメラが起動しませんでした。前途多難... ありがとうございました。
guest

回答1

0

自己解決

どうやら、デバイスで仕様が異なるようです。
ご協力いただき、ありがとうございました。

投稿2020/06/28 11:05

takaoS

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問