おはようございます。最近、長男は依然と別人のように、物事をテキパキとこなすようになってきたのですが、要領のよかった次男が逆に、ダラダラ、グズグズな状態が続いてます。@kjunichiです。

ハイパフォーマンスブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化

作者: Ilya Grigorik,和田祐一郎,株式会社プログラミングシステム社
出版社/メーカー: オライリージャパン
発売日: 2014/05/16
メディア: 大型本
この商品を含むブログ (4件) を見る

背景

数年前に、WebRTCの存在を知り、ブラウザ上でWebカメラから映像を取得できるというので、一時期ハマっていた。

WWDCあたりで、SafariがWebRTCに対応するらしいとの情報を目にしたが、懐疑的であった。どうせ、Mobile Safariでは使えないとかのオチだろうと思っていた。

以前のURLでWifiの設定画面開けたのを無効にされたことをいまだに根に持っており、この辺り、アップルを信用していないｗ。

iOS11どうでもいいと思ってたら、safariがwebrtc使えるっぽいから、早く入れて試したいが、過去に作ったjsdoitコードいくつかあるが、すっかり忘れてる
— kjunichi (@kjunichi) 2017年9月20日

やってみた

APIがプロミスベースの今どきのWebRTCを使う必要がある

折角覚えたのに、WebRTCのカメラの映像取得するAPIが変更になってて、iOS11のWebRTCは新しいAPIを使わないといけなかったことが分かった。 / “WebRTC再入門2016～カメラを使ってみよう～ | HTML…” https://t.co/PNAK03u3nI
— kjunichi (@kjunichi) 2017年9月22日

videoタグに付けなければいけない属性がある

github.com

video.setAttribute("playsinline", true);

背面カメラを使うには

facingModeはここの記述の様に{exact:"environment"}と指定することで、背面のカメラを使えて、おっさんの自撮からようやく解放されたｗ / “【お詫びと訂正】iOS11でついにSafariからカメラにアク…” https://t.co/ePLMWAFsLy
— kjunichi (@kjunichi) 2017年9月22日