HTML5 VIDEO on Chromecast

4,803 views

Published on

HTML5 VIDEO (Smooth Streaming) on Chromecast について調べてみた

Published in: Technology, News & Politics

HTML5 VIDEO on Chromecast

  1. 1. HTML5 VIDEO on Chromecast HTML5 VIDEO(Smooth Streaming) について調べてみた
  2. 2. About me Katsumi Onishi (@KatzMii) Android Developer HTML5 Beginner 動画配信サービスでMicrosoft Smooth StreamingのChromecast対応の調査中
  3. 3. Chromecast • 2013/7 Googleから発売されたドングルデバイス • TV接続するHDMIスティック • Android/iPhone/iPad/PCから、動画・音楽をテ レビ画面で再生することが出来る。
  4. 4. 対応しているサービス • Google Play (Movie/Music) • YouTube • Netflix • Hulu • Pandora
  5. 5. Supported Media Types Video Audio Container H.264 High Profile Level 4.1, 4.2 and 5, VP8 HE-AAC, LC-AAC, CELT/Opus, MP3, Vorbis MP4/CENC, WebM, MPEG-DASH, SmoothStreaming 非対応:HTTP Live Streaming DRM Widevine, PlayReady Subtitle TTML - Timed Text Markup Language WebVTT - Web Video Text Tracks
  6. 6. Casting Your Content to the Big Screen Sender Receiver
  7. 7. Sender and Receiver sender application Sender DIAL Receiver Discovery Launch receiver application running (HTML5) Connection RAMP WebSocket LoadMedia Play/Pause/Volume/Muted status DIAL - UPnPに定義されているSSDPに基づいたディスカバー&ランチのプロトコル - http://www.dial-multiscreen.org/ RAMP - GoogleCast用のメッセージ送受信プロトコル (on WebSocket) - https://github.com/dz0ny/leapcast/wiki/RAMP-protocol
  8. 8. First Sample Application Build and Launch Sender(Android)はライブラリを色々設定しなければな らないので少し手間が掛かるが、 Receiver(HTML5)は、HTMLファイル1つだけ MP4は簡単に再生! https://github.com/googlecast/cast-android-sample
  9. 9. Sender Application ~ 省略 ~
  10. 10. Receiver Application 1.Receiver 2.RAMP 3.Channel 4.bind <video>
  11. 11. Google Cast Receiver API • • • • • • • • • cast.receiver.Channel cast.receiver.ChannelFactory cast.receiver.ChannelFactoryEvent cast.receiver.ChannelHandler cast.receiver.ConnectionService cast.receiver.MessageEvent cast.receiver.Platform cast.receiver.Receiver cast.receiver.RemoteMedia
  12. 12. Google Cast Receiver API • • • • • • • • • cast.receiver.Channel cast.receiver.ChannelFactory cast.receiver.ChannelFactoryEvent cast.receiver.ChannelHandler cast.receiver.ConnectionService cast.receiver.MessageEvent cast.receiver.Platform cast.receiver.Receiver cast.receiver.RemoteMedia これだけ?
  13. 13. Google Cast Receiver API • • • • • • • • • cast.receiver.Channel cast.receiver.ChannelFactory cast.receiver.ChannelFactoryEvent cast.receiver.ChannelHandler cast.receiver.ConnectionService cast.receiver.MessageEvent cast.receiver.Platform cast.receiver.Receiver cast.receiver.RemoteMedia これだけ? 通信系ばかり
  14. 14. Google Cast Receiver API • • • • • • • • • cast.receiver.Channel これだけ? cast.receiver.ChannelFactory cast.receiver.ChannelFactoryEvent cast.receiver.ChannelHandler cast.receiver.ConnectionService cast.receiver.MessageEvent 通信系ばかり cast.receiver.Platform cast.receiver.Receiver cast.receiver.RemoteMedia Adaptive は?
  15. 15. Google Cast Receiver API • • • • • • • • • cast.receiver.Channel これだけ? cast.receiver.ChannelFactory cast.receiver.ChannelFactoryEvent cast.receiver.ChannelHandler cast.receiver.ConnectionService cast.receiver.MessageEvent 通信系ばかり cast.receiver.Platform cast.receiver.Receiver cast.receiver.RemoteMedia Adaptive は? DRMは?
  16. 16. Support or Group ....
  17. 17. Google Goolge Google
  18. 18. Google Goolge Google EME
  19. 19. Google Goolge Google EME CDM
  20. 20. Google Goolge Google EME CDM MSE
  21. 21. Google Goolge Google EME CDM WTF MSE
  22. 22. Google Goolge Google EME CDM MSE WTF Google, Microsoft and Netflix in W3C
  23. 23. Extends HTMLMediaElement • Media Source Extensions (MSE) • アダプティブ ストリーミングのサポートの定義 • Encrypted Media Extensions (EME) • コンテンツ保護システムをサポートするため定義 • CDMへアクセスする為のAPI定義 • Content Decryption Model (CDM) • コンテンツ暗号解除モジュール • 実装はプラットフォーム側
  24. 24. Encrypted Media Extensions - W3C
  25. 25. dash.js • dash.js • MPEG-DASHの Media Source Extensions API の http://dashif.org/reference/players/javascript/index.html JavaScript ライブラリ • Microsoft Smooth Streaming 対応? • MPEG-DASH(Dynamic Adaptive Streaming over HTTP) • HTTPプロトコルを使った動画配信プロトコルの国 際標準規格 http://dashif.org/
  26. 26. Receiver Application 1.Receiver 2.Custom MessageStream 3.Channel
  27. 27. 2.Custom MessageStream Message 処理 Event Bind
  28. 28. Format? Format URL strings MPEG DASH /Manifest(format=mpd-time-csf) (live profile) Smooth Streaming /Manifest OK NG Windows Azure Media Services 側で対応が必要?
  29. 29. DRM - EME/CDM Developer Programs Engineer for Chromecast
  30. 30. DRM - EME/CDM スクラッチ!? Developer Programs Engineer for Chromecast
  31. 31. 中間 まとめ • Chromecast(HTML5)上でアダプティブ ストリーミン グをするには、dash.jsを使用する必要がある。 • MPEG-DASHがSmooth Streaming包括してるのか調 査が必要 • EMEはサポートされているので、CDMを使用して復 号化の仕組みは作れるぽい。スクラッチでね♥
  32. 32. つづく...!!
  33. 33. 参考 • • • • • • • • • • • • • • • • Casting Your Content to the Big Screen - Google Cast — Google Developers https://developers.google.com/ cast/ Stack Overflow http://stackoverflow.com/questions/tagged/chromecast Stack Overflow http://stackoverflow.com/questions/tagged/google-cast EME・DRMの行方 - http://furoshiki.hatenadiary.jp/entry/2013/06/07/040209 HTML5でDRMってアリなの? - https://www.slideshare.net/otachan/html5drm DRM in HTML5 - https://luv.asn.au/files/20130604-drm_in_html.pdf DRM in HTML5 | The Beautiful, Tormented Machine http://manu.sporny.org/2013/drm-in-html5/ EME WTF?: An introduction to Encrypted Media Extensions - HTML5 Rocks http://www.html5rocks.com/en/ tutorials/eme/basics/ Microsoft PlayReady DRM を使った Web ブラウザーでの Encrypted Media Extensions のサポート (Windows) http://msdn.microsoft.com/ja-jp/library/windows/apps/dn466732.aspx The Netflix Tech Blog: HTML5 Video at Netflix http://techblog.netflix.com/2013/04/html5-video-at-netflix.html MPEG-DASH http://dashif.org/ DASH-264 JavaScript Reference Client Landing Page http://dashif.org/reference/players/javascript/ index.html Dash-Industry-Forum/dash.js Wiki https://github.com/Dash-Industry-Forum/dash.js/wiki Media Source Extensions http://www.w3.org/TR/media-source/ Encrypted Media Extensions http://www.w3.org/TR/encrypted-media/

×