狠狠撸

狠狠撸Share a Scribd company logo
HTML5 VIDEO
on 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
Audio
Container

H.264 High Pro?le 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
Casting Your Content to the Big Screen

Sender

Receiver
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
First Sample Application Build and Launch
Sender(Android)はライブラリを色々設定しなければな
らないので少し手間が掛かるが、
Receiver(HTML5)は、HTMLファイル1つだけ

MP4は簡単に再生!
https://github.com/googlecast/cast-android-sample
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
Adaptive
は?
DRMは?
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

WTF

MSE
Google Goolge Google

EME

CDM

MSE

WTF
Google, Microsoft and Net?ix 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 ? 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/
Receiver Application
1.Receiver
2.Custom MessageStream
3.Channel
2.Custom MessageStream
Message 処理

Event Bind
Format?
Format

URL strings

MPEG DASH
/Manifest(format=mpd-time-csf)
(live pro?le)
Smooth
Streaming

/Manifest

OK

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ってアリなの? -?/otachan/html5drm
DRM in HTML5 - https://luv.asn.au/?les/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/

More Related Content

HTML5 VIDEO on Chromecast