PinP機能をWebRTCで実現できるか検証してみた
1 like468 views
Media StreamはPicture-in-Pictureに対応しているのか？を検証したスライドです
![・✗ FF62/FF63: document.pictureInPictureEnabled = false;
・✗ Safari12: document.pictureInPictureEnabled = false;
・✗ M70: NotSupportedError
・✔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
・✔ M72
検証結果(まとめ)](https://image.slidesharecdn.com/pinponwebrtc-181029234545/85/PinP-WebRTC-19-320.jpg)
PinP機能をWebRTCで実現できるか検証してみた
- 2. $ whoami 本名: 西川裕登（にしかわゆうと） GitHub: https://github.com/monmee Twitter: @monmi_monmi Organization: NTTコミュニケーションズ
- 9. ・実はPinPについて知らなかった ・ITmediaの記事でPinPを知った ・どうやらM70 Desktopから使えるように なったらしい ・ほー、なんか便利そう ・ここで素朴な疑問が浮かんだ PinP on WebRTCを調べようと思ったきっかけ http://www.itmedia.co.jp/news/articles/1810/21/news008.html
- 11. 調査してみた
- 12. ・2016/06にios9.0で AVPictureInPictureControllerが追加されたよ ・2016/09にsafari9.0でブラウザ実装されたよ https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html ・その6ヶ月後にAndroid 8.0のリリース時に実装されたよ https://developer.android.com/about/versions/oreo/android-8.0#opip ・Chrome M68 for Desktopから実験的に実装されたよ https://twitter.com/KevinCTofel/status/996040615648485376 ・2018/10/19にM70でデフォルトで有効になったよ https://plus.google.com/+FrancoisBeaufort/posts/CmhhqTpbC1b ・ChromiumからMedia Streamに対応したとの報告あり https://chromium-review.googlesource.com/c/chromium/src/+/1196515 PinPの背景
- 13. ・2016/06にios9.0で AVPictureInPictureControllerが追加されたよ ・2016/09にsafari9.0でブラウザ実装されたよ https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html ・その6ヶ月後にAndroid 8.0のリリース時に実装されたよ https://developer.android.com/about/versions/oreo/android-8.0#opip ・Chrome M68 for Desktopから実験的に実装されたよ https://twitter.com/KevinCTofel/status/996040615648485376 ・2018/10/19にM70でデフォルトで有効になったよ https://plus.google.com/+FrancoisBeaufort/posts/CmhhqTpbC1b ・ChromiumからMedia Streamに対応したとの報告あり https://chromium-review.googlesource.com/c/chromium/src/+/1196515 PinPの背景 なんか使えそう！
- 14. ・WICGという標準化団体がPicture-in-Picture Web APIを絶賛作成中 https://wicg.github.io/picture-in-picture/ ・video.requestPictureInPicture(); PinPモードを開始 ・document.exitPictureInPicture(); PinPモードを終了 PinP API
- 16. ・各ブラウザアプリ、各バージョンでPinP on WebRTCが動くか検証 ・M70, M71, M72 ・FF62, FF63 ・Safari 12 ・サンプルアプリはSkyWayのp2p-videochat exampleをベースに作成 https://github.com/skyway/skyway-js-sdk/tree/master/examples/p2p-videochat 検証内容
- 17. 検証結果(M70)
- 18. 検証結果(M72)
- 19. ・✗ FF62/FF63: document.pictureInPictureEnabled = false; ・✗ Safari12: document.pictureInPictureEnabled = false; ・✗ M70: NotSupportedError ・✔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 ・✔ M72 検証結果(まとめ)
- 20. ・Safari12はAVKit使うとPinP on WebRTCできる 検証結果(ちなみに) video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
- 21. DEMO
- 24. おしまい