JavaScript
WebRTC

Picture-in-Picture on WebRTCが実現できるのか試してみた


この記事はなに?

Chrome 70からデフォルトで有効になったらしいPicture-in-Picture(以降PinPと呼ぶ)がWebRTC MediaStreamでも実現できるのか調査&試してみたまとめ記事。


そもそもPinPってなに?

ひとつの画面の隅などに小さく別の画面の表示領域を設け、両方の画面を同時に表示させておけるようにする表示法のこと。

スマホでYouTube動画を見たあとに戻ると右下に動画ウィンドウができると思うが、あれ。video要素に対してPinP機能が使える。


調査した内容


PinPの背景


PinP on WebRTCのブラウザ対応調査

WICGが以下でPinP APIを提案している。標準化に向けて頑張っている。

https://wicg.github.io/picture-in-picture

SkyWay P2P-videochatのサンプルアプリにPinP機能を付け加えてPinP on WebRTCが対応しているかブラウザ検証してみた。(書いたコードは省略。index.htmlとscript.jsをここと全く同じコードを追加した)


  • :x: FF62, FF63

    PinP APIに対応していない。(document.pictureInPictureEnabled = false)


  • :x:(注) Safari12

    PinP APIに対応していない。(document.pictureInPictureEnabled = false)

    しかし、実際PinP on WebRTCは実現可能。詳しくは(注)で後述。


  • :x: M70

    NotSupportedError が出力されておりフォーマット未対応で使えない。


  • :o: M71

    デフォルトではThe use of VideoLayer for video Picture-in-Picture is not supported と出力され使えない。

    しかし、 chrome://flags/#enable-surfaces-for-videos からEnable the use of SurfaceLayer objects for videos. をEnabledにするとPinP on WebRTCが実現できる。


  • :o: M72

    デフォルトで対応しており実現可能である。



(注)

後から試してみたが、SafariはWICG提供のAPIには対応していないがSafari APIを使うとPinP on WebRTCは実現できる。

https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html


ちょっと試してみた

SkyWayが提供している SkyWay Conference の開発版をちょっといじって動作を試してみた。

以下はM72で試してみたときの図。メインスクリーン一番右上のメニューをクリックするとPinPモードに入れる。

スクリーンショット 2018-10-27 11.07.44.png


おわりに

ざっくりまとめると、ブラウザアプリやそのバージョンにもよるが、WebRTC MediaStreamでもPicture-in-Picture機能は使える。

今後やりたいことは、PinPウィンドウ内のカスタマイズ。

例えば今回サンプルで使ったSkyWay Conferenceだと接続相手の名前表示とか、他の接続相手にウィンドウを切り替えるなどのメニューを作るとか。

(PinPウィンドウのカスタマイズ方法についてまでは未リサーチなので、もし知見がある方がいらっしゃればぜひご教授お願いします。)