webRTCでカメラにオートフォーカスを指定する方法

Question

https://blog.katsubemakito.net/html5/qrcode-reader

上記サイトを参考に、navigator.mediaDevices.getUserMedia を使用してカメラによりQRコードを読み込むscriptを作成しました。

処理は動いているのですが、少し小さいQRコードになると読み込めません。

スマホのカメラにはオートフォーカス機能がありますので、オートフォーカスを実装したいと考えていますがオートフォーカスに関する情報が見つかりません。

webRTCの規格ではカメラを制御（オートフォーカスを有効にしたり）する事は規定されていないのでしょうか。

詳しい方がおられたら、伺ってみたいです。

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

Answer 1

実際に作ったことはないので参考程度に。

MediaDevices.getUserMedia()の引数で、MediaStreamConstraintsを指定します。

MediaStreamConstraintsでVideo側の指定の時、
静止画ならfocusModeを指定すればAutoFocusを指定できそうです。
またzoomプロパティーもありますね。

Properties of image tracks
(略)
focusMode
A String specifying one of "none", "manual", "single-shot", or "continuous".

...動画の時は有効にならない気がしますが、一度試してみて結果を教えて下さい。

Comments

[hayash-dev]

oikashinoa様

御回答ありがとうございます。
MediaStreamConstraints ではなく MediaTrackConstraints ですね。

ここも参照はしていたのですが、Videoなのでオートフォーカスは関係無いかなぁと読み飛ばしてたのですが、冷静に考えると、QRコードリーダーの処理は動画ではなく、500ms間隔にVideo Streamの内容をcanvasに描画してそこからQR解析処理を呼び出しているので、Image Media として扱えると気づけました。
MediaTrackConstraints については、初回に一回だけ focusMode を指定すればよいのか 500ms間隔でTrack に指定するものなのか試してみたいと思います。

現在、リモートワークで実機確認が行えません。明日、確認してみます。

[hayash-dev]

oikashinoa様

Android ASUS Zenfone6 で試した結果ですが、
MediaTrackSupportedConstraints() で返ってきた制約が、width　height　facingMode　だけでした。

試しに無理矢理、設定してみました。
navigator.mediaDevices.getUserMedia(constraints)の引数で、focusMode に 'continuous' 、 zoom に 2.0 などを指定した場合は、指定は無視されたようです。

trackObj.applyConstraints({advanced : [{zoom: 2.0}] })などとした場合は、promise が error を起こしました。

デバイスとしてはオートフォーカス機能のついているカメラでも、仲介するJavaScriptで指定できないと（サポートされていないと）無理なようです。

[oikashinoa]

スマホからなので簡単に。

インカメラでズームするサンプル見つけました。こちらでも動きました。
https://googlechrome.github.io/samples/image-capture/update-camera-zoom.html

[hayash-dev]

oikashinoa様

返信が遅くなり申し訳ありません。
ページ自体をスマホでアクセスして試したところ確かにズーム出来ています。
実装を見ると、私の作りと殆ど変わり無いようなので、詳細を確認したいと思います。

[oikashinoa]

違いや問題点が分かったら簡単で良いのでレポートして頂けると、コチラも調べたかいが有りますのでお時間有るときに記載お願いします。

[hayash-dev]

違いを確認しました。コード上のキモは、 await sleep(1000)です。
このsleepは、自分で定義したUtility functionです。

function sleep(ms = 0) {
return new Promise(r => setTimeout(r, ms));
}

これを実行してからでないと、VideoTrackの取得が失敗していました。
恐らくデバイスが起動してstreamingを始めてから取得しないといけない類の制御のようです。

[oikashinoa]

なるほど!調査ありがとうございました。

Answer 2

私のうろ覚えな知識ですが、webRTCの規格としてはそのあたりの内容は含まれていないと思います。
確かにセッション確立時（SDP生成し、相手に送信する）に映像は音声周りの情報も渡していますが
利用可能なコーデックを相手に教えるための情報しかないため、そのあたりの情報は存在しないかと思います。
（音声系のノイズ除去設定は共有していたかもしれませんが）

よって、そのあたりのカメラ制御はwebRTCのカメラコンポーネントに拡張設定があるかどうか、という事になるかと。
（私がずっと前にiOSのwebRTCクライアントを実装したときはそのあたりの設定があったような記憶がありますが、JavaScript APIは無いのですかね？）

Comments

[hayash-dev]

清水様

ご回答ありがとうございます。
Javascriptでカメラ制御に関する情報を探しておりますが、見つかっておりません。

清水様がwebRTCクライアントを作成されたのは、Kotlinやswiftによるnative iOSアプリと理解しました。
今回は特にサーバーと接続することなくクライアント(webブラウザ)内で完結する仕組みです。

大雑把ですが想定として、↓のようになると思うのですが、最初のjavascriptの記述が見つけられません。
javascript→scriptエンジン→ブラウザ→OS→ドライバ→ハード（カメラ）