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ファイル１つだけ

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/

•