動画配信の基礎知識
TRANSCRIPT
#azurejp
#azurejp
動画配信の基礎知識
#azurejp
<video> だけの話
#azurejp
メディア配信は、一子相伝の知識！？
#azurejp動画配信のワークフロー
撮影 編集 配信エンコード
#azurejp
これ何 ?
#azurejp
コーデック ?4K?
ビットレート ?
フレーム ???
#azurejp
動画
レ え
が
く
#azurejp
カメラ は画像を連続を「撮影」
#azurejp
コンテナ = ファイル形式 : .mp4, .wmv, asf, flv, mov など
ファイルの構造
映像符号化データ = ビデオ コーデックH.264, HEVC, VC-1, MPEG-2 など
音声符号化データ = オーディオ コーデックAAC, MP3, Windows Media Audio など
#azurejpエンコードは、圧縮技術
動画
音声 データ♬ ♬
画像 データ
mp4, wmv, mov とか
いかに効率的に
小さくできるか ?
#azurejpコーデック。圧縮方式の進化
ファイルサイズ
作成時間
MPEG-2(H.263) H.264 HEVC(H.26
5)
1/41/2
映像の長さ ( 尺 ) の、1 – 2 倍
10xH.264 と比較し
て
殆どのデバイス
で再生可能
#azurejp
解像度
•画像サイズ
ビットレート
•総容量
フレームレート
•動画の滑らかさ
#azurejp
8K UHD4320p (7680 x 4320)
4K UHD2160p (3840 x 2160)
HD1080i/1080p (1920 x
1080)SD480i
(720 x 480)
10 分50MB
200MB 800MB 3.2GB ?
解像度
#azurejpビットレート• bps = bit per
second• 1 秒あたり、どれく
らいのサイズにするか
1 Mbps
5 Mbps
1 秒
ストレージ容量、データ転送量に直結
#azurejpフレームレート
• Frame per second (fps)
• 1 秒あたり、何枚の画像にするか
5 fps
30 fps
1 秒
動画の滑らかさに直結
#azurejp動画ファイルのサイズは ?項目 状態 備考ビットレート 2 Mbps スマートフォンだと大きめ映像の尺 ( 長さ )
30 分• 1 秒間に、 2M bit• 30 分では、 2M x 1,800 秒 = 3,600 M
bit• bit を Byte に = 3,600 M / 8
= 約 450 MB 解像度はサイズには影響なし。画質には大きく影響する
#azurejp動画配信のワークフロー
撮影 編集 配信エンコード
#azurejpPower Point が使えます !スライド = シーン !
出力 = エンコード !
#azurejp動画配信のワークフロー
撮影 編集 配信エンコード
#azurejpファイルを全てダウンロードロードしないと再生できない !?
1.3MB
<img src=“girl.png” />
#azurejpファイルを全てダウンロードロードしないと再生できない !?
450MB<video src=“girl.mp4” />
#azurejp
ライブ配信はどうするの ?ファイル自体が完成していないんですけ
ど・・・
#azurejp動画には「時間」という概念がある
参照フレーム = Iframe
<video src=“girl.mp4” />
Progressive Download
#azurejp動画配信のワークフロー
撮影 編集 配信エンコード
#azurejp(standard) Streaming3Mbps
Streaming Server
HTTP Progressive Download
RTMP / RTSP / MMS etc …
3Mbps
Web ServerHTTP Cache
Adaptive bitrate Streaming over HTTP
3Mbps
Streaming Server
HTTP Cache1Mbps512 kbps256 kbps
No Live!
#azurejp
2 4 6 82 4 6 82 4 6 82 4 6 8
46
8
350.ismv600.ismv
1450.ismv1050.ismv
350kbps600kbps1050kbps1450kbps
Adaptive bitrate streaming over HTTP
Server
セッションを張り続ける必要がない !
#azurejpSmooth Streaming のファイル要素
マニフェストファ
イルビットレート
毎のビデオ / オー
ディオファイルたち
HLS, HDS は別ファイル !!!!
#azurejp世の3つのAdaptive Bitrate Streaming over HTTP
Smooth Streaming Http Live Streaming Http Dynamic Streaming Silverlight Flash
Windows 8 / 8.1iOS
Android 4.0 以降
Flash
Apple Adobe
#azurejpISO 標準 MPEG-DASH
Dynamic Adaptive Streaming over HTTP (DASH)
Smooth Streaming Http Live StreamingHttp Dynamic Streaming
Apple Adobe
#azurejp
業界標準
#azurejp「標準」の価値
リーチ機会の増加• デバイス個別対応の最小
化• 新旧のデバイスに対応し
やすく
ベンダーロックインからの解放• 自分のビジネス計画を優
先• 将来にわたってベンダー
を選べる
開発コスト最小化• 「ユニバーサル プレイ
ヤー」• リリース期間の最小化
#azurejp
#azurejpHTML5 には、これらが不足していました…
Live配信システム
複数ビットレートファイル
ストリーミング コンテンツ保護
MPEG-DASH
Common EncryptionDRM System
#azurejp
#azurejpDASH industry forumhttp://www.dashif.org• DASH 市場展開のプロモーション• 相互互換性や、展開ガイドの公開• 相互互換性テストの促進• 標準化団体や業界団体との連携
#azurejpAdaptive Bitrate Streaming over HTTP の構成要素
フォーマット
Player
Smooth Streaming
PIFF
HLS HDS
DRM
Serv
er
Devi
ce
PlayReady
Silverlight
など
MPEG2-TS
(AES256)
QuickTime
など
F4V / MP4
Adobe Access
Flash Playerなど
データ構造共
通
HTTP
HTTP
Apple Adobe
#azurejpMPEG-DASH の構成要素
フォーマット
Player
Smooth Streaming
PIFF
HLS HDS
DRM
Serv
er
Devi
ce
PlayReady
Silverlight
など
MPEG2-TS
(AES256)
QuickTime
など
F4V / MP4
Adobe Access
Flash Playerなど
データ構造共
通
HTTP
HTTP
Apple Adobe
ISO Based Media File (MP4) /
MPEG2-TS
MPEG-DASHCommon
Encryption +α
HTML5MSE + EME
#azurejpMPEG-DASH Standards• ISO/IEC 23009-1 “Dynamic Adaptive Streaming over HTTP (DASH)”
• マニフェスト と メディアセグメント
• ISO/IEC 14496-12 “Part 12: ISO Base Media File Format, Edition 4” (aka MP4 container)• メディアファイルのデータ構造
• ISO/IEC 23001-7 “Common Encryption in ISO Base Media File Format”• 複数の DRM システムを使うためのパッケージ構造
• W3C Proposal “Media Source Extensions”• Adaptive Bitrate Streaming 実装のための HTML 拡張 API
• W3C Proposal “Encrypted Media Extensions”• DRM システムへブラウザーなどからアクセスするための、 HTML 拡張 API
#azurejpDASH Manifest (MPD) high-level structure (on-demand profile)<MPD profiles="urn:mpeg:dash:profile:isoff-on-demand:2011“/>
<Period><ContentProtection schemeIdUri="urn:mpeg:da…" value="cenc"/><AdaptationSet mimeType=“video/mp4”>
<Representation bandwidth="6000000" width="1920" height="1080“><BaseURL>movie-high.mp4</BaseURL><SegmentBase indexRange=“804-1123”>
<Initialization range=“0-803”></SegmentBase>
</Representation><Representation bandwidth="2962000" width="1280" height="720“>
<BaseURL>movie-medium.mp4</BaseURL><SegmentBase …
</Representation><Representation bandwidth="1427000" width=“856" height="480“>
<BaseURL>movie-low.mp4</BaseURL><SegmentBase …
</Representation></AdaptationSet>
…
#azurejpDASH Manifest (MPD) high-level structure (live profile)<MPD profiles="urn:mpeg:dash:profile:isoff-live:2011“>
<Period><ContentProtection schemeIdUri="urn:mpeg:dash…" value="cenc"/><AdaptationSet mimeType=“video/mp4”>
<SegmentTemplatemedia=“Level($Bandwidth$)/Fragment($Time$)initialization="Level($Bandwidth$)/Fragments(init)><SegmentTimeline>
<S d=3 r=430 /></SegmentTimeline>
</SegmentTemplate><Representation bandwidth="6000000" width="1920" height="1080“/><Representation bandwidth="2962000" width="1280" height="720“/><Representation bandwidth="1427000" width="856" height="480“/>
</AdaptationSet><AdaptationSet mimeType=“audio/mp4”>
<SegmentTemplate …<Representation bandwidth=“160000”/><Representation bandwidth=“64000”/>
#azurejp
Browser
W3C Media Source Extensions- HTML5 拡張- Media Element を制御するための API 定義- Media データを Video/Audio Element へ初期化 / 追加可能にする
<video>
MediaSource
SourceBufferaudio
SourceBuffervideo
src
sourceBuffers
#azurejp
Browser
W3C Encrypted Media Extensions- W3C 勧告の HTML 標準の拡張- DRM システムへのアクセスの API 定義
<video> MSMediaKeys MediaKeySessionmsKeys
Key SystemContent Decryption Module
#azurejpdash.js• DASH Industry Forum の
参考プレイヤー• Web ブラウザーで MPEG-DASH
を使用するための JavaScript の DASH クライアント
• Player: http://dashif.org/reference/players/javascript/index.html
• Source code: • https://github.com/Dash-Industry-Forum/da
sh.js
#azurejpdash.js ベースのクライアント開発• 必要なもの
• dash.all.js ファイル• https://raw.github.com/Dash-Industry-Forum/
• 手順• dash.all.js のリファレンス• <Video> に オブジェクトを追加
• Dash.di.DashContext• MPEG-DASH の MPD への URL 参照
#azurejpdash.js を使った Video Player<html>
<head><title>HTML5 VIDEO</title><script src="dash.all.js"></script><script>// setup the video element and attach it to the Dash playerfunction setupVideo() { var url =
"http://wams.edgesuite.net/media/MPTExpressionData02/BigBuckBunny_1080p24_IYUV_2ch.ism/manifest(format=mpd-time-csf)";
var context = new Dash.di.DashContext(); var player = new MediaPlayer(context); player.startup(); player.attachView(document.querySelector("#videoplayer")); player.attachSource(url);}
window.addEventListener("load", setupVideo, false);</script>
</head>
<body><video controls id="videoplayer" width="80%" height="80%"></video>
</body></html>
#azurejpメディアの標準化
Application (Player)
• HTML5 with Enhancement• Native
Authorization • Video Authorization Profile of IETE OAuth• IETF Simple Web Discovery
Transport • ISO MPEG Dynamic Adaptive Streaming over HTTP
Media Format• ISO Based Media File Format
• UltraViolet Common File Format, Common Streaming Format
Codec • H.264, HEVC• AAC
Encryption • ISO MPEG Common Encryption
#azurejp“HTML5 Premium Media”
http://blogs.windows.com/msedgedev/2015/07/02/moving-to-html5-premium-media/
業界標準技術への移行をDASH, MSE, EME, CENC
Azure Media Services が現在および将来のメディア配信の基盤
#azurejpOS
Cor
eWindows 10 は DASH ネイティブ対応
PlayReady DRM HW/SW
Media Foundation (DASH support)Microsoft EdgeHTML
Microsoft Edge Windows Web App
Your HTML5 Player
#azurejpMPEG-DASH ご参考情報• DASH-IF reference player http://dashif.org/reference/players/javascript/index.html
• DemosIE11 test drive (http://ie.microsoft.com/testdrive)Netflix player through IE 11 (http://www.netflix.com/)
• BlogMPEG DASH preview from Windows Azure Media Services by John Deutscher Dynamic Packaging with MPEG-DASH live profile streaming support by Mingfei YanMS Open Tech early contributor to open source dash.js community by Microsoft Open TechMPEG-DASH: Making Tracks Toward Widespread Adoption by Streamingmedia.com
• SessionBuilding Media Streaming Apps and Sites Without Plug-Ins Using MPEG-DASH by Daniel Schneider