2020年12月15日

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

目次

  1. はじめに
  2. iOS14.3のリリース内容
  3. WKWebViewのgetUserMedia対応
  4. まとめ

はじめに

新しい技術にチャレンジし続ける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にお問い合わせください。

WebAR/VRのお仕事に関するご相談

Bageleeの運営会社、palanではWebAR/VRに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

3

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

きうち

きうち

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP