View
2.447
Download
3
Category
Preview:
DESCRIPTION
HTML5 VIDEO (Smooth Streaming) on Chromecast について調べてみた
Citation preview
HTML5 VIDEOon Chromecast
HTML5 VIDEO(Smooth Streaming) について調べてみた
About me
Katsumi Onishi
(@KatzMii)
Android Developer
HTML5 Beginner
動画配信サービスでMicrosoft Smooth StreamingのChromecast対応の調査中
Chromecast
• 2013/7 Googleから発売されたドングルデバイス
• TV接続するHDMIスティック
• Android/iPhone/iPad/PCから、動画・音楽をテレビ画面で再生することが出来る。
対応しているサービス
• Google Play (Movie/Music)
• YouTube
• Netflix
• Hulu
• Pandora
Supported Media Types
Video H.264 High Profile Level 4.1, 4.2 and 5, VP8
Audio HE-AAC, LC-AAC, CELT/Opus, MP3, Vorbis
ContainerMP4/CENC, WebM, MPEG-DASH,
SmoothStreaming非対応:HTTP Live Streaming
DRM Widevine, PlayReady
Subtitle TTML - Timed Text Markup LanguageWebVTT - Web Video Text Tracks
Casting Your Content to the Big Screen
Sender Receiver
Sender and Receiver
Sender ReceiverDiscovery
DIAL - UPnPに定義されているSSDPに基づいたディスカバー&ランチのプロトコル - http://www.dial-multiscreen.org/RAMP - GoogleCast用のメッセージ送受信プロトコル (on WebSocket) - https://github.com/dz0ny/leapcast/wiki/RAMP-protocol
Launch
Connection
receiver application
running
sender application
(HTML5)
LoadMedia
Play/Pause/Volume/Muted
status
DIAL
RAMPWebSocket
Sender(Android)はライブラリを色々設定しなければならないので少し手間が掛かるが、Receiver(HTML5)は、HTMLファイル1つだけ
First Sample Application Build and Launch
https://github.com/googlecast/cast-android-sample
MP4は簡単に再生!
Sender Application
~ 省略 ~
Receiver Application
1.Receiver
2.RAMP
3.Channel
4.bind <video>
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
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
これだけ?
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
これだけ?
通信系ばかり
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は?
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
これだけ?
通信系ばかり
DRMは?
Adaptiveは?
Support or Group ....
Google Goolge Google
Google Goolge Google
EME
Google Goolge Google
EME CDM
Google Goolge Google
EME CDM MSE
Google Goolge Google
EME CDM MSE
WTF
Google Goolge Google
EME CDM MSE
WTF
Google, Microsoft and Netflix in W3C
Extends HTMLMediaElement
• Media Source Extensions (MSE)
• アダプティブ ストリーミングのサポートの定義
• Encrypted Media Extensions (EME)
• コンテンツ保護システムをサポートするため定義• CDMへアクセスする為のAPI定義
• Content Decryption Model (CDM)
• コンテンツ暗号解除モジュール• 実装はプラットフォーム側
Encrypted Media Extensions - W3C
dash.js
• dash.js - http://dashif.org/reference/players/javascript/index.html
• MPEG-DASHの Media Source Extensions API のJavaScript ライブラリ• Microsoft Smooth Streaming 対応?
• MPEG-DASH(Dynamic Adaptive Streaming over HTTP)
• HTTPプロトコルを使った動画配信プロトコルの国際標準規格
http://dashif.org/
Receiver Application
1.Receiver
2.Custom MessageStream
3.Channel
Message 処理
2.Custom MessageStream
Event Bind
Format?
Format URL strings
MPEG DASH (live profile) /Manifest(format=mpd-time-csf) OK
Smooth Streaming /Manifest NG
Windows Azure Media Services 側で対応が必要?
DRM - EME/CDM
Developer Programs Engineer for Chromecast
DRM - EME/CDM
スクラッチ!?
Developer Programs Engineer for Chromecast
中間 まとめ
• Chromecast(HTML5)上でアダプティブ ストリーミングをするには、dash.jsを使用する必要がある。
• MPEG-DASHがSmooth Streaming包括してるのか調査が必要
• EMEはサポートされているので、CDMを使用して復号化の仕組みは作れるぽい。スクラッチでね♥
つづく...!!
参考• 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/
•
Recommended