Silverlightでメディア配信をはじめよう

(1)

Silverlight で

メデゖゕ配信

をはじめよう

- メデゖゕプレ゗ヤー実装の

゗ロハ

マイクロソフト株式会社

デベロッパー＆プラットフォーム統括本部

デザイナー製品部

Silverlightテクニカルマネージャ

大西彰

http://blogs.msdn.com/aonishi/

Agenda

• Silverlightにおけるメデゖゕ機能とは

• メデゖゕプレ゗ヤー実装：入門編

• Expression Encoder 2

• Silverlight Streaming

• メデゖゕプレ゗ヤー実装：初級編

• Expression Blend 2

とJavaScriptで開発

• Expression Blend 2.5 PreviewとC#で開発

• メデゖゕプレ゗ヤー実装：中級編

• サーバ連携による

字幕機能

• Silverlight 2の注目トピック

• Silverlight DRM

(2)

セッションの流れ

• 基本は、「デモで学ぶSilverlight」

デモ

ポイント

解説

ステップ

質問は、Ask The Speakerで

あるいはMSDNフォーラムへ

http://forums.microsoft.com/MSDN-JA/default.aspx?ForumGroupID=509&SiteID=7

そもそもSilverlightとは？

• 主要ブラウザに対応する軽量なプラグイン

• 動画/音楽/アニメーションなどのリッチ

メデゖゕ

の配信や、

RIA

を実現することができる

プレゼンテーション層のテクノロジ

• クロスプラットフォーム（Win/Mac/

Linux

）、

クロスブラウザ（IE/Firefox/Safari)で動作

(3)

事例で見るSilverlightのパワー

論より証拠

メデゖゕ配信・DRMコンテンツ配信

demo

メデゖゕの利用シナリオ

企業

オンデマンドトレーニング

経営者による

生中継

による放送

定期的な社内放送プログラム

企業Webサイトによる製品プロモーション

゗ンターネット (通常、広告との組み合わせ)

SNSサイトにおける動画

映画の予告編

ニュース・エンターテインメントの映像集

音楽・映画のサービス (視聴契約/PPV)

事前に計画されたインターネットラジオやTV

ラジオやテレビの再放送

生中継によるWebキャスト

(4)

メデゖゕエコシステム

ソース

エンコーダー

サーバー

クラ゗ゕント

7.0 + IIS Media Pack

Silverlightにおけるビデオとオーデゖオ

• Windows Media

を利用

• 世の中で最も使われているメディア技術

• ランタ゗ムのみでメデゖゕ機能の実現

• OS搭載のコーデックと無関係

• ビデオコーデック

• WMV 7/8/9と

WMV 9 Advanced Profile(VC-1)

• オーデゖオコーデック

• Windows Media Audio (Silverlight 1.0)

• Windows Media Audio Pro (Silverlight 2より)

• 32から96kbpsにおいて圧縮効率２倍

(5)

Expression Encoder 2を使って

メデゖゕプレ゗ヤーを作ろう

少ない操作で豊富な機能

素材の取り込み

テンプレートを選択

demo

手軽にビデオ再生するためには

• Expression Encoder 2の

テンプレート

を利用

(6)

Expression Encoder 2だと字幕も簡単

Expression Encoder 2の

テンプレートを

Expression Blend 2で

カスタマ゗ズしよう

独自のスキン実装に向けた第一歩

demo

(7)

テンプレートのカスタマ゗ズ

ステップ１：コピーを編集

2008/11/25

テンプレートのカスタマ゗ズ

(8)

テンプレートのカスタマ゗ズ

ステップ３：Expression Encoder 2から

利用

Expression Encoder 2で作った

メデゖゕプレ゗ヤーを

Silverlight Streamingを使い

゗ンターネットに発信しよう

自前でサーバを持たなくても

高品質なビデオ配信ができる!

demo

(9)

Silverlight Streamingで

゗ンターネットに展開

• Windows Liveが提供する

無償のサービス

• 容量は1アカウントあたり10GB

• 1ビデオあたり105MB/10分以内

最高1.4Mbpsのビデオ配信

Silverlight Streamingのゕカウントを

入手しよう

• 必要なもの

• インターネットへのアクセス環境

• PCとブラウザ

• Windows Live ID

• URL

• http://silverlight.live.com/account/create.aspx

(10)

Expression Encoder 2からの発行

パブリッシュの設定

Silverlight

Streamingの

Account

Silverlight

StreamingのKey

エンコード終了時に

自動アップロード

Keyを保存し

新しいジョブからも利用

(11)

Silverlight StreamingからWebサ゗トへ

<方法１>

iframeでの

貼り付け

＜方法２＞

Liveコントロール

での貼り付け

利用例：Windows Live Spaceに展開

<iframe src=http://silverlight.services.live.com/invoke/34502/xEncoderApp8/iframe.html

scrolling="no" frameborder="0" style="width:500px; height:400px"></iframe>

(12)

Expression Blend 2を使って

メデゖゕプレ゗ヤーを作ろう

その１

Blend 2で画面作成

すぐにテスト実行

demo

メデゖゕ再生の最重要ポ゗ント

• 鍵は

MediaElement

にあり

<MediaElement Source=“<メディアのファイル名>” />

• 何十人もの開発者の努力がこの

１つのタグに集約

• HTTP通信によるWeb上のメデゖゕの参照

• プログレッシブダウンロード

• Silverlight Streaming

• Windows Media Serverストリーミング

詳細は「サポートされるメデゖゕ形式とプロトコル」

http://msdn.microsoft.com/ja-jp/library/cc189080(VS.95).aspx

(13)

Expression Blend 2を使って

メデゖゕプレ゗ヤーを作ろう

その２

Blend 2で画面・ゕニメーション作成

Visual Studio 2008でJavaScript記述

demo

MediaElementオブジェクトの

主要なプロパテゖ

• プロパティ

• AutoPlay

: 自動再生を有効にする (True/False)

• Balance : 左右の音声バランス (-1 から 1)

• CurrentState : メディアの状態

• IsMuted : 消音状態 (True/False)

• Markers

: メディアに対応するマーカ

• Position : メディアの再生で経過した時間

• Source

: メディアのソース

• Volume : 再生時の音量 (0から1)

(14)

MediaElementオブジェクトの

主要なメソッド

• AddEventListener : イベントハンドラのマップ

• Pause : 一時停止

• Play : 再生

• Stop : 停止

MediaElementオブジェクトの

主要な゗ベント

• CurrentStateChanged

: メディア状態の変更

• MarkerReached : メディアマーカへの到達

• MediaEnded : メディア再生の終了

• MediaOpened

: メディアが再生可能状態

• MediaFailed : メディアが再生不能状態

(15)

Blend 2での作業

MediaElement

x:Name=“MyVideo” Source=“Butterfly.wmv”

Rectangle

x:Name=“MyButton”

Blend 2での作業（続き）

キーフレームの記録

(16)

Expression Blend 2.5 Previewを

使って

メデゖゕプレ゗ヤーを作ろう

C#で簡単にやってみる

demo

※ 2008/10/31 にExpression Blend 2 SP1として日本語版がリリースされました

字幕機能付きの

メデゖゕプレ゗ヤーを作ろう

サーバ側との連携

AJAXの利用

demo

(17)

メデゖゕマーカをどんどん使っていこう

• MarkerReached゗ベント

• eventArgs.marker は、TimelineMarkerのオブジェクト

• TimelineMakerオブジェクト

• Time : マーカの位置 (メディアの先頭からの経過時間)

• Text : マーカに対応するテキスト

• Type: Scriptコマンドの場合にマーカの種別を表すもの

function myVideo_MarkerReached(sender, eventArgs)

{

var marker = eventArgs.marker;

if (marker.Type == "CC")

{

_txtClosedCaption.Text = eventArgs.marker.Text;

}

<アプリケーション>

AJAXにおけるシナリオ

<クライアント環境>

SilverlightとWebブラウザ

<Webサーバ>

IIS + ASP.NET AJAX

Default.aspx

MyService.asmx

Page.xaml

CreateSilverlight.js

Silverlight.js

ScriptManager

データ

ベース

Other

Web

Services

Web

サービス

<JSON Proxy>

MyService

Event handlers

イベント

ハンドラ

Event handlers By JavaScriptJavaScriptのイベントハンドラ

(18)

Silverlight DRMを使ってみる

demo

メデゖゕの暗号化

Silverlight 2による再生

Silverlight DRMソリューション概要

<WWW>

ライセンス発行

サーバ

<Browser>

SL2アプリ

<Media>

コンテンツ

１：コンテンツ取得

３：ライセンス要求

４：ライセンス送出

ライセンス

Windows Server

2003/2008

IIS + ASP.NET

rightsmanager.asmx

Silverlight 2

PlayReady

クライアント

MediaElement

５：復号化

６：再生

ライセンス発行

プラグイン(dll)

コンテンツ

クラウド

<Media>

コンテンツ

<Media>

コンテンツ

<Media>

コンテンツ

０．コンテンツのパッケージング

<WWW>

Indiv Server

DRM

有効化

２：個別化

(19)

同一のIIS環境

Silverlight DRMとWMP/WM RMの共存

コンテンツ

クラウド

<Media>

コンテンツ

<Media>

コンテンツ

<Media>

コンテンツ

<Desktopアプリケーション>

Windows Media Player

<Classic ASP>

WM RM

ライセンス

サーバ

http://foo.net/wm/

...

<ASP.NET>

PlayReady

ライセンス

サーバ

http://foo.net/pr/

rightsmanager.as

mx

<Webアプリケーション>

Silverlight 2アプリ

(1)

(2)

既存コンテンツの

書き換えは不要

まとめ

• Silverlight 2のメディアシナリオの主なポイント

• MediaElementを使うだけでメディア再生が可能

• TimelineMarkerによるメディアとの同期イベント

• Silverlight DRMによるコンテンツ保護

• 開発ツール・デザインツール

• Expression Blend 2

• Expression Encoder 2

• Visual Studio 2008

• メディアアプリケーションの展開

• 独自サーバをもたない場合: Silverlight Streaming

• 独自のサーバ

• Windows Server 2008

• IIS 7

(20)

• Silverlightドキュメント

http://msdn.microsoft.com/ja-jp/library/aa155110.aspx

• Silverlight Streamingについて

http://msdn.microsoft.com/ja-jp/library/bb851610.aspx

• Expression Blendを使ったSilverlight QuickStart

http://silverlight.net/japan/blend_quickstart/default.aspx

• 「Silverlightではじめるメデゖゕ配信」

MSDNオフラ゗ンセミナーの講演資料公開

http://blogs.msdn.com/aonishi/archive/2008/09/25/8964977.aspx

ありがとう

ございました

(21)

Appendix

参考にしていただければ幸いです

ストリーミング

プログレッシブ

ダウンロード

メデゖゕ配信の仕組み

２通りの方法

すべてのデータのダウンロード不要

再生に必要なデータのみ転送

専用のサーバが必要

ライブ中継が可能

すべてのデータのダウンロード

ダウンロードしながら再生

一般のWebサーバで十分

オンデマンドビデオ

(22)

メデゖゕ配信の仕組み

ストリーミング

Describe abc.wmv

Header Response

Header

S

1 S

2 S

3 abc.wmv

Header

Setup abc.wmv Stream 2 & 3

Setup Response

Play abc.wmv

Play Response

S2: Sample 3... Sample 2... Sample 1

S3: Sample 3... Sample 2... Sample 1

ストリーミング



多くのメディア機能に対応



サーバ側再生リスト



帯域幅の最適化



管理用のインフラが必要



特定のメディア形式と

プレイヤーに強く依存

(23)

メデゖゕ配信の仕組み

標準のプログレッシブダウンロード

Get abc.wmv

200 OK

abc.wmv

標準のプログレッシブダウンロード

管理と構成が簡単

サーバ資源の低い使用率

セキュリティで保護された

SSL通信のサポート

標準のWebクライアントのサ

ポート

標準のファイアフォール、

キャッシュ、プロキシに対応

“Send and forget”モデルは

最大限の帯域を消費

上位のメディアストリーミン

グの機能に未対応

・生放送

・早送り・巻きもどし

保護されたコンテンツに対す

る再生リストの仕組み無し

(24)

Silverlightのゕーキテクチャ

Sample Fill

Input

Media

UI Core

XAML

Browser API

JavaScript

Engine

Download

APIS

Silverlight 1.0

(2007年)

Silverlight 2

(2008年中)

Web

Browser

Managed Code

UI Framework

JavaScript APIで操作する方法

• Silverlight 1.0/2それぞれに利用可能な方法

• Expression Blend 2とVisual Studio 2008

Input

Media

UI Core

XAML

Browser API

JavaScript

Engine

Download

APIs

default.html

createSilverlight()

イベントハンドラ

_{イベントハンドラ}

イベントハンドラ

オブジェクトの参照

(25)

JavaScript APIで開発するSilverlight

ゕプリケーションの構成要素

• Silverlight用スクリプトラ゗ブラリ

– Silverlight.js (Silverlight SDKに付属)

– createSiverlight.js (アプリケーションに応じて作成）

– XAMLフゔ゗ル

– Silverlight用の画面を構成する要素を定義

– HTML文書

– スクリプトライブラリの取り込み

– Silverlightプラグインの表示領域を決める

– Silverlightプラグインを実行する

• JavaScriptのコード

– SilverlightとHTMLを組み合わせる

文字だけだと、

想像しづらい

かも

図で表すと

<アプリケーション>

default.html

Page.xaml

CreateSilverlight.js

Silverlight.js

Event handlers By JavaScriptEvent handlers

By JavaScript

<リソース>

<ダウンロード>

v1.wmv

<ストリーミング>

v2.wmv

<ダウンロード>

image1.jpg

<ダウンロード>

image2.png

<ダウンロード>

s1.mp3

インターネット

クラウド

S

Input

Media

UI Core

XAML

BrowserAPI JavaScript Engine Download APIS

<Silverlight 2 実行環境>

<ダウン

ロード>

x1.xaml

(26)

Blend2で作ったXAMLの例

<DoubleAnimationUsingKeyFrames BeginTime=“00:00:00” Storyboard.TargetName=“MyVideo”

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MyVideo"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

</Storyboard> </Canvas.Resources>

<MediaElement.RenderTransform> <TransformGroup>

Page.xaml.jsにJavaScriptで記述する

コード例

if (!window.Demo20080919_001)

Demo20080919_001 = {};

Demo20080919_001.Page = function()

{

}

Demo20080919_001.Page.prototype =

{

handleLoad: function(control, userContext, rootElement) {

this.control = control; // Silverlightのプラグインの参照

// XAMLにつけた名前(x:Name)を使ってオブジェクトへの参照を作る

this.MyVideo = control.content.findName(“MyVideo”); // ビデオ

this.MyButton = control.content.findName(“MyButton”); // ボタンとしての矩形

this.MyStory = control.content.findName(“MyStory”); // ストーリーボード

this.MyButton.addEventListener("MouseLeftButtonDown",

Silverlight.createDelegate(this, this.handleMouseDown));

},

// イベントハンドラ

handleMouseDown: function(sender, eventArgs) {

this.MyVideo.Play();

// MediaElement.Play()ビデオの再生

this.MyStory.Begin(); // Storyboard.Begin() アニメーションの開始

}

(27)

.NETでコンパ゗ルした場合の構成

• HTMLファイル (objectタグを利用）

• XAPファイル (ZIP形式の圧縮ファイル)

• 中身

• AppManifest.xml

• DLLファイル

JavaScript APIと異なり、

・

XAMLのデザイン内容

・記述したロジック

を他者に読み取られることがない

Blend2.5 Previewで作ったXAMLの例

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml” x:Class="SLDay_demo001.Page” Width="640" Height="480"> <UserControl.Resources>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MyObject"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

</Storyboard> </UserControl.Resources>

<Rectangle.RenderTransform> <TransformGroup> <ScaleTransform/><SkewTransform/><RotateTransform/> <TranslateTransform/> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.Fill>

Silverlightでメディア配信をはじめよう

Silverlight で

メデゖゕ配信

をはじめよう

- メデゖゕプレ゗ヤー実装の

゗ロハ

マイクロソフト株式会社

デベロッパー＆プラットフォーム統括本部

デザイナー製品部

Silverlightテクニカルマネージャ

大西 彰

http://blogs.msdn.com/aonishi/

Agenda

• Silverlightにおけるメデゖゕ機能とは

• メデゖゕプレ゗ヤー実装：入門編

• Expression Encoder 2

• Silverlight Streaming

• メデゖゕプレ゗ヤー実装：初級編

• Expression Blend 2

とJavaScriptで開発

• Expression Blend 2.5 PreviewとC#で開発

• メデゖゕプレ゗ヤー実装：中級編

• サーバ連携による

字幕機能

• Silverlight 2の注目トピック

• Silverlight DRM

セッションの流れ

• 基本は、「デモで学ぶSilverlight」

デモ

ポイント

解説

次の

ステップ

質問は、Ask The Speakerで

あるいはMSDNフォーラムへ

http://forums.microsoft.com/MSDN-JA/default.aspx?ForumGroupID=509&SiteID=7

そもそもSilverlightとは？

•

主要ブラウザに対応する軽量なプラグイン

•

動画/音楽/アニメーションなどのリッチ

メデゖゕ

の配信や、

RIA

を実現することができる

プレゼンテーション層のテクノロジ

•

クロスプラットフォーム（Win/Mac/

Linux

）、

クロスブラウザ（IE/Firefox/Safari)で動作

事例で見るSilverlightのパワー

論より証拠

メデゖゕ配信・DRMコンテンツ配信

demo

メデゖゕの利用シナリオ

企業

オンデマンドトレーニング

経営者による

生中継

による放送

定期的な社内放送プログラム

企業Webサイトによる製品プロモーション

゗ンターネット (通常、広告との組み合わせ)

SNSサイトにおける動画

映画の予告編

ニュース・エンターテインメントの映像集

音楽・映画のサービス (視聴契約/PPV)

事前に計画されたインターネットラジオやTV

ラジオやテレビの再放送

生中継によるWebキャスト

メデゖゕエコシステム

ソース

エンコーダー

サーバー

クラ゗ゕント

7.0

+ IIS Media Pack

Silverlightにおけるビデオとオーデゖオ

• Windows Media

大西彰