Download as PDF, PPTX
Uploaded byKatsumi Onishi
HTML5 VIDEO on Chromecast
HTML5 VIDEO (Smooth Streaming) on Chromecast について調べてみた
HTML5 VIDEO on Chromecast
- 1. HTML5 VIDEO on Chromecast HTML5VIDEO(Smooth Streaming) について調べてみた
- 2. About me Katsumi Onishi (@KatzMii) AndroidDeveloper HTML5 Beginner 動画配信サービスでMicrosoft Smooth StreamingのChromecast対応の調査中
- 3. Chromecast • 2013/7 Googleから発売されたドングルデバイス •TV接続するHDMIスティック • Android/iPhone/iPad/PCから、動画・音楽をテ レビ画面で再生することが出来る。
- 4. 対応しているサービス • Google Play(Movie/Music) • YouTube • Netflix • Hulu • Pandora
- 5. Supported Media Types Video Audio Container H.264High 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. Casting Your Contentto the Big Screen Sender Receiver
- 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. First Sample ApplicationBuild and Launch Sender(Android)はライブラリを色々設定しなければな らないので少し手間が掛かるが、 Receiver(HTML5)は、HTMLファイル１つだけ MP4は簡単に再生! https://github.com/googlecast/cast-android-sample
- 9.
- 10.
- 11. Google Cast ReceiverAPI • • • • • • • • • 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. Google Cast ReceiverAPI • • • • • • • • • 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. Google Cast ReceiverAPI • • • • • • • • • 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. Google Cast ReceiverAPI • • • • • • • • • 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. Google Cast ReceiverAPI • • • • • • • • • 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. Support or Group....
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. Google Goolge Google EME CDM MSE WTF Google,Microsoft and Netflix in W3C
- 23. Extends HTMLMediaElement • MediaSource Extensions (MSE) • アダプティブ ストリーミングのサポートの定義 • Encrypted Media Extensions (EME) • コンテンツ保護システムをサポートするため定義 • CDMへアクセスする為のAPI定義 • Content Decryption Model (CDM) • コンテンツ暗号解除モジュール • 実装はプラットフォーム側
- 24.
- 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.
- 27.
- 28. Format? Format URL strings MPEG DASH /Manifest(format=mpd-time-csf) (liveprofile) Smooth Streaming /Manifest OK NG Windows Azure Media Services 側で対応が必要？
- 29. DRM - EME/CDM DeveloperPrograms Engineer for Chromecast
- 30. DRM - EME/CDM スクラッチ!? DeveloperPrograms Engineer for Chromecast
- 31. 中間 まとめ • Chromecast(HTML5)上でアダプティブストリーミン グをするには、dash.jsを使用する必要がある。 • MPEG-DASHがSmooth Streaming包括してるのか調 査が必要 • EMEはサポートされているので、CDMを使用して復 号化の仕組みは作れるぽい。スクラッチでね♥
- 32.
- 33. 参考 • • • • • • • • • • • • • • • • Casting Your Contentto 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/