2020年12月15日

【iOS14.3リリース🎉】アプリ内ブラウザでWebAR（Webカメラ）が使用できるようになりました

getUserMedia WebAR WebRTC

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay「15」です！
昨日は「SendGridのEvent Webhookについて調査してみた」のお話でした。

SendGridのEvent Webhookについて調査してみた

本日はiOS14.3のアプリ内ブラウザ（WKWebView）に関してのお話です。

iOSの14.3が12月14日（日本時間12月15日）リリースされました🎉
目立つリリースとしてはApple Healthのリリースなどとなりますが、実はアプリ内ブラウザなどで使用されているWKWebViewというブラウザでウェブカメラが使用できるようになっています。

詳細は後ほど解説しますが、今までSafari以外をサポートしていなかったウェブカメラが他のブラウザやアプリから使用することができるようになっています。

tw.gif (769.5 kB)
※Twitter内ブラウザで自社サービスTOBIRAを使用

iOS14.3のリリース内容

iOS14.3の主なリリース内容はこちらです。

・Apple Fitness+に対応
・AirPods Maxに対応
・iPhone12 ProおよびiPhone12 Pro MaxでApple ProRAWの写真を撮影可能に

Apple_fitness-plus-iphone11-apple-watch-series-6_09152020_big.jpg.large_2x.jpg (386.0 kB)
AppleのApple Fitness+ より

WKWebViewのgetUserMedia対応

さて、本題のウェブカメラの使用について解説します。
ウェブカメラを使用するには、WebRTCという技術のgetUserMediaというメソッドを使用します。
WebRTC自体はiOS11から使えるようになっていましたが、getUserMediaについては唯一、Safariによるブラウジングでしか使用できなくなっていました。

スクリーンショット 2020-12-15 0.02.11.png (874.1 kB)

これにはセキュリティやプライバシー的な問題などが要因としてありました。
参考：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

これに対してpalanをはじめとするWebカメラを使用する開発者は様々な工夫をしていました。

今まで行ってきた対策1：ブラウザのWebカメラがオフになった場合にはSafariを開くように案内

こちらが一番オーソドックスな方法です。
getUserMedia自体が使用できない場合、以下のような実装ができます。

if (
!navigator.mediaDevices ||
!navigator.mediaDevices.enumerateDevices ||
!navigator.mediaDevices.getUserMedia
) {
location.href = errorPath;
}

こうしてエラーのURL上でこんな表示をさせています。
Image from iOS.png (817.5 kB)

URLをコピーしてもらい、Safariで手動で開いてもらう形です。

今まで行ってきた対策2：URLスキーマを用いてSafariで開いてもらう

こちらのボタンを開いてね、という案内などもしたことがあります。
URLスキーマと呼ばれる仕組みを利用し、なんとかSafariで該当のURLを開くことができないか、というものです。
具体的には「Twitterのリンクをブラウザで開くとTwiterアプリが起動する」といった仕組みです。

こちらですが、SafariのURLスキーマを調査したものの、検索クエリとしてはジャンプすることができるものの、個別のURLにジャンプすることはできませんでした。

なんとか検索結果を出す場合はこのようなイメージです。
x-web-search://?palanAR

Image from iOS (1).png (998.7 kB)
このような形でSafariから検索し表示させることができますが、検索で1位になっていたり広告を出したりする必要がありました。

今まで行ってきた対策3：どのブラウザから開かれたかに応じて適切な案内を行う

この場合にはユーザーエージェントと呼ばれるユーザーの情報を使用し分岐することになります。
具体的にはこのような形です。

if (navigator.userAgent.toLowerCase().indexOf("分岐するユーザーエージェント") != -1){
location.href = errorPath;
}

Twitterでは右下にsafariの開くボタンがありますし、LINEでは右上といった案内となりますが、なんとか1つ1つ対応ブラウザを分岐していけばできそうですね！
ですがここで問題として、アプリ内ブラウザを行う場合にユーザーエージェントに差異が無い、という問題です。
正確には「差異をつけるかどうかはアプリ次第」となり、例えばLINE内ブラウザはこのようなユーザーエージェントが表示されます。

>Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari Line/10.20.0

このLINEで分岐し、LINEの場合のみ右上のアイコンから個別に開いてもらう案内するなどができます。

Image from iOS.png (934.5 kB)

ですが、全てのアプリがこういったユーザーエージェントにパラメータを付与していくれているわけではないので、結局難航していました。

そしてこれらの涙ぐましい努力が全て今回のiOS14.3のリリースで、14.3以降は不要となるのです🎉

まとめ

今までWebARの普及を妨げてきたものの1つとして、TwitterやLINE等のアプリ内ブラウザでのソーシャルシェア、Google Chromeなどのブラウザアプリで「ウェブカメラが起動しない」問題が大きくありました。
今回のアップデートを受け、大きくWebARの普及をはじめカメラを使用したブラウザ表現が加速しそうですね！

bageleeの運営会社palanでは、国内で最も早くWebARに取り組んできました。
今回の動きはiOSの各バージョンの開発者バージョンで入念にテストを行い、WebKitなどの開発団体の英語フォーラムから開発トピックをチェックし続けてきたことでいち早く提供できています。
国内にWebARを提供している会社は複数ありますが、ここまでできてる会社は国内では少ないのではないでしょうか。

ぜひWebARの業界を盛り上げたい、WebARで面白い企画を実現したい！そんな方は気軽にpalanにお問い合わせください。