Embed Size (px)
DESCRIPTION
Windows Azure メディアサービスを利用して動画サービスを作る際の情報をまとめました
Citation preview
クラウドサービスを使って作る動画サイト？
2013 年 3 月 16 日#jazug
勇大地
2
自己紹介• 勇 大地（ @d_isami ）– Japan Windows Azure User Group コアメンバ ( ｷﾘｯ
– 普段はスーツを着こなすリーマン ( ｷﾘﾘｯ– Microsoft MVP for Windows Azure 2010 ～ ※Microsoft 様の社員ではありません
– 「 Windows Azure テクニカルハンドブック」執筆 2012 年 6 月更新で… (´ ； ω ；｀ ) ﾌﾞﾜｯ
3
Windows Azure の全体像
http://www.microsoft.com/ja-jp/download/details.aspx?id=35473
4
Windows Azure の全体像
MarketplaceBusiness
Analytics in VMs
PaaS 型にとらわれない多様なサービスを提供Business Analytics SQL
ReportingData
MarketplaceHadoop for
BigData
Caching CDN
CachingIdentityActive
DirectoryService
Bus
Messaging
Queues
NetworkingVirtual
Network ConnectTraffic
Manager
Data ManagementSQL
Database
TablesBlob
Storage
VIRTUALMACHINES
CloudServices(Web Role
Worker Role)Web Sites
MediaServices
MobileServices
Computing Delivery
5
Windows Azure のフォーカス
アプリケーション
データ
ファイヤウォール
ネットワーク、OS
仮想化
ハードウェア
アプリケーション
データ
ファイヤウォール
仮想ネットワーク、OS
アプリケーション
データ
ファイヤウォール
仮想ネットワーク
アプリケーション
データ
アプリケーション フォーカス
VIRTUALMACHINES
CloudServices
Web Sites
オンプレミス
6
Windows Azure のフォーカス
アプリケーション
データ
ファイヤウォール
ネットワーク、OS
仮想化
ハードウェア
アプリケーション
データ
ファイヤウォール
仮想ネットワーク、OS
アプリケーション
データ
ファイヤウォール
仮想ネットワーク
アプリケーション
データ
アプリケーション フォーカス
VIRTUALMACHINES
CloudServices
Web Sites
オンプレミス
7
Windows Azure の更新①
VIRTUAL MACHINES Web Sites
仮想ネットワークSDK の拡充
• 管理ポータル HTML5 化• IaaS 環境の利用が可能• Linux が選択可能• VHD を利用した高いポータ
ビリティ
• Node.js, PHP, ASP.NET を利用した開発• Git, FTP, TFS でデプロイ• 10 サイトまで無料
• Python, Node.js, PHP, Java, .NET 向けに提供• Windows, Mac, Linux をサ
ポート• GitHub でソース公開
• クラウド上にユーザ指定のサブネットを作成• VPN でオンプレミスと接続し、
企業ネットワークの延長として利用可能
8
Windows Azure の更新②• Media Service
ストリーム配信、コンテンツ保護、フォーマット変換（※注 ロンドンオリンピックでも利用）
• Windows Azure Active DirectoryWindows Azure 上に Active Directory を作成し、SSO を実現可能
• Mobile Serviceプッシュ通信やユーザ認証機能のアプリを数分で構築
• Cachingあらゆるデータ型に対応したインメモリキャッシュ
9
はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
10
お気に入り動画をどこでも見たい
秘密の (*´Д`) ハァハァ動画こってる素敵な動画
11
でも動画の再生は色々と…• デバイスが色々あり杉– PC 、タブレット、スマートフォン 解像度差異 ＆ 通信回線差異どうする？
• 再生の実装方式– HTML5 、 RIA(Flash/ Silverlight) 、 Native
• 配信方法–ファイル直置き？ストリーミング？
12
手持ちの動画をどうしよう？
• ゴロゴロ寝ながら見たい
• iPhone, iPad, Surface とかでも見たい
• ローカルで頑張って管理したくない
13
はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
14
でも動画の再生は色々と…
スマートフォン タブレット
PC
クライアント側
15
動画の再生は大枠三つ (1/2)
RIA
Native
16
○ ( 一応 ) マルチデバイスで利用可能○ JavaScript プラグインが多々× ブラウザ毎に対応 codec が異なる○ ストリーミング再生／凝った再生
系が対応可能 (※ 注 )× iPhone/iPad で利用でき
ず、 Android 側も微妙○ デバイスの隠された機能もフル活用× デバイス毎に頑張って実装が必要
動画の再生は大枠三つ (2/2)
RIA
Native
機能低汎用高
機能高汎用低 ※ 注 HTTP Live Streaming の場合 HTML5 でも可能
17
HTML5 での動画再生 (1/3)
ブラウザ MP4(H.264) WebM Ogg
IE9 以降 ○ △
Firefox △ ○ ○
Chrome ○ ○ ○
Safari ○
Opera ○ ○
• ブラウザ毎で対応コデックがバラバラ• MP4 が良さげだが PC 向けだけなら RIA ？
△ … プラグインを別途インストールで再生可能
18
HTML5 での動画再生 (2/3)
• ブラウザによってサポートされない動画フォーマットがあるため、動画ソースを複数指定する必要あり<video controls> <source src=“demo.webm” type=“video/webm”> <source src=“demo.mp4” type=“video/mp4”> HTML5 がサポートされてません</video>
19
HTML5 での動画再生 (3/3)
• JavaScript プラグイン多め
VideoJsPlayer Framework
20
RIA での動画再生 (1/2)
• RIA で実現可能な配信方式–ストリーミング再生–コンテンツ保護–直接ダウンロードの回避–ライブ配信
※ 注 1 HTML5 の <video> と異なり高度な再生が可能
※ 注 2 HTTP Live Streaming がサポートされた場合、 RIA を利用せずにストリーミング再生が可能
21
RIA での動画再生 (2/2)
• RIA での動画再生用コンポーネントを利用して動画を再生可能
<Core:SMFPlayer Name="SMFPlayer"> <Core:SMFPlayer.Playlist> <Media:PlaylistItem DeliveryMethod=“AdaptiveStreaming” MediaSource=“http://<XXX>.origin.mediaservices.windows.net/bc13bfec-c83c-4307-8447-64f959bb9222/AGDRec.ism/Manifest"/> </Core:SMFPlayer.Playlist> </Core:SMFPlayer>
demo ...
動画再生
23
はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
24
サーバ側の実現方式は？？
スマートフォン タブレット
PC
クライアント側 サーバ側
25
サーバ側の課題• 動画ファイルが重すぎ–一つのファイルが大きすぎて格納しきれない–マルチデバイス向けに複数エンコードも…
• 配信サーバに負荷がかかりまくり–動画ファイルを大量に配信すると負荷が…–エンコードの CPU 負荷が大きすぎ
• 通信回線が遅い–細い回線だとつらい
26
サーバ側の課題をクラウドで解決！
• 動画ファイルが重すぎ–クラウドストレージがあるよ！
※アップロードは無料ですし (/ω＼ ) ｲﾔﾝ• 配信サーバに負荷がかかりまくり–クラウドの CPU リソースを使えばいいよ！
• 通信回線が遅い–容量小さめの動画エンコード＋キャッシュ！
27
サーバ側の課題をクラウドで解決！
① 配信制御＆エンコーディング機能–Windows Azure Media Service• Silverlight + IIS Smooth Streaming 可能
– Amazon Elastic Transcoder• Flash + Adobe Media Server の ストリーミン
グ再生可能
② コンテンツキャッシュ機能–Windows Azure Contents Delivery
Network– Amazon CloudFront
① 配信制御＆エンコーディング機能
動画エンコード
iPhone 向け Android 向け PC 向け
• 色々なデバイスに対する動画が対応可能！
② コンテンツキャッシュ機能
• 静的コンテンツを近隣のサーバでキャッシュして配信する
東アジア (香港 ) 東京
30
はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
31
サーバ側での対応
管理ポータルで demo ...
• Windows Azure Media Service にて① クラウドストレージに動画を格納② クラウド上で動画をエンコード③ エンコードした動画を公開＆配信
32
① クラウドストレージへの格納 //Media Service 制御用のコンテキスト作成 var context = new CloudMediaContext(_accountName, _accountKey);
// 動画格納用のインスタンスを作成 var asset = context.Assets.Create("某店舗動画 ", AssetCreationOptions.StorageEncrypted);
// 実ファイルを取得 var assetFile = asset.AssetFiles.Create(Path.GetFileName(filePath));
// 動画のアップロード assetFile.Upload(filePath);
33
② クラウドでのエンコード CloudMediaContext context = <略>; var asset = <略>;
//ジョブの作成と実行 var job = context.Jobs.Create("Encoding Job"); var task = job.Tasks.AddNew("Encoding Task", GetMediaProcessor("Windows Azure Media Encoder", context), "H264 Broadband SD 4x3", TaskOptions.None); task.InputAssets.Add(asset); task.OutputAssets.AddNew(“鍋動画 – エンコード版 ", AssetCreationOptions.None); job.Submit();
※参考 http://msdn.microsoft.com/en-us/library/windowsazure/jj129582.aspx
34
③動画の公開＆配信 CloudMediaContext context = <略>; var asset = <略>;
// 許可属性を作成 IAccessPolicy accessPolicy = context.AccessPolicies.Create("30 日読みとり許可 ", TimeSpan.FromDays(30), AccessPermissions.Read);
// 配置情報の付与 ILocator locator = context.Locators.CreateLocator(LocatorType.Sas, asset, accessPolicy, DateTime.UtcNow.AddDays(-1));
35
サーバ側での対応
ソースコードで demo ...
① クラウドストレージに動画を格納② クラウド上で動画をエンコード③ エンコードした動画を公開＆配信
※REST API + Java SDK も公開
36
はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
動画の見せ方 – 字幕編
• クライアント側で解決– PC 向けには JavaScript でも十分いける
• Timed Text Markup Language の利用http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/
–スマフォ、タブレットは Native でないと困難• iOS5 以降 (iPhone のみ？ ) 、 Android 2.X 系？は
動画のインライン再生ができない
• サーバ側で解決–そもそも文字列を埋め込んだ動画をエンコード
する（取り回し悪いけど…）
動画の見せ方 – 予告だけ見せたい
• JavaScript を利用した source 属性の入れ替え or 動画再生前に特定ページへリダイレクト
• 閲覧者側に余計な操作をさせたくなければ RIA or Native で
39
はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
40
まとめ• そもそものターゲットを決めましょう–マルチデバイスし過ぎは即死の元
• 高度な再生を求めなければ HTML5 で–ストリーミング再生とかいるなら RIA で再
生
• クラウドを利用して手間を減らそう–大きいファイル、一時的に大き目な CPU リ
ソースはクラウドが得意
41
御清聴ありがとうございました
![だれでもできる クラウドサービス管理画面 基本操 …KSデータバンクの画面上の[ヘルプ]タブ→ [ヘルプ]でヘルプが起動します。基本操作マニュアルをお使いください。クラウドサービス管理画面で、[契約情報]→[マニュ](https://img.pdfslide.tips/doc/110x75/5f91b7687f3e1f312a24375f/oe-ffffccce-oe-ksffffceffffa.jpg)
