Smooth Streaming UI 만들기

Silverlight 3 에서는 HD급 고화질의 영상을 끊김 없이 사용자의 환경(CPU, 로컬 네트웍 상태)에 기반하여 최적의 화질을 감상할 수 있는 Smooth Streaming 기술을 선보였습니다. 이전 버전인 Silverlight 2 에서 선보였던 Deepzoom 만큼이나 강력한 이슈가 되고 있는데요. 그래서, Smooth Streaming Media Player를 만드는 방법을 소개하도록 하겠습니다.

(Smooth Streaming 에 관해 더욱 자세히 알고 싶으시다면 Silverlight 사이트에 방문 해 보시기 바랍니다.)

우선, Smooth Streaming 을 이용한 Media Player UI를 구현하기 위해서는 Microsoft Expression Encoder 3 에 새롭게 추가 된 Media Player Templates 에서 SmoothStreaming.dll 과 PlugInMssCtrl.dll 을 추출하셔야 하는데요~

 C:\Program Files (x86)\Microsoft Expression\Encoder 3\Templates\en\

위 경로를 찾아가 보시면 다음과 같이 기본적으로 제공 되는 Templates 가 있습니다.

아무 Template 나 들어가 보시면

SmoothStreaming.xap 파일이 있는 것을 확인 하실 수가 있는데요, SmoothStreaming.xap 파일을 zip로 변경 하신 뒤 압축을 해제하시면, PlugInMssCtrl.dll 과 SmoothStreaming.dll 을 추출 하실 수 있습니다.

귀찮으신 분들을 위해서 다운로드 할 수 있도록 링크해 둘께요 :)

PlugInMssCtrl.dll

SmoothStreaming.dll

Smooth Streaming Media Player UI 를 구성하기 위해 솔루션을 만드신 후, References 에 PlugInMssCtrl.dll 과 SmoothStreaming.dll 을 추가합니다.

PlugInMssCtrl.dll 에는
Microsoft.Expression.Encoder.PlugInMssCtrl 네임스페이스 안에,
IPlugInMssCore, IPlugInMssOfflineSupport, IPlugInMssStatisiticsGraph 세가지의 인터페이스가 있습니다.
인터페이스 내 정의 된 프로퍼티나 메소드를 보면, StartPlayback, StopPlayback, GetBitratesInKbps, ParseManifest 등 이름만 봐도 무슨 역할을 하게 될 프로퍼티인지 가늠할 수 있는 것들이 많이 있네요 :)
바로 이 인터페이스들은 SmoothStreaming.dll 에서 사용 됐는데요.
SmoothStreaming.dll 에는

ExpressionMediaPlayer
Microsoft.Expression.Encoder.AdaptiveStreaming
Microsoft.Expression.Encoder.AdaptiveStreaming.Utilities
MS.Internal.Expression.Encoder.AdaptiveStreaming.Advertising
MS.Internal.Expression.Encoder.AdaptiveStreaming.Heuristic
MS.Internal.Expression.Encoder.AdaptiveStreaming.Logging
MS.Internal.Expression.Encoder.AdaptiveStreaming.Manifest
MS.Internal.Expression.Encoder.AdaptiveStreaming.Network
MS.Internal.Expression.Encoder.AdaptiveStreaming.Parsing
MS.Internal.Expression.Encoder.AdaptiveStreaming.Url
MS.Internal.Expression.Encoder.AdaptiveStreaming.Utilities
가 있습니다. (헉헉..)
그 중, Microsoft.Expression.Encoder.AdaptiveStreaming 네임스페이스 안에 Smooth Streaming Media Player UI를 구성할 수 있는 AdaptiveStreamingSource 클래스가 있습니다.
위에서 설명 드렸던 Microsoft.Expression.Encoder.PlugInMssCtrl 네임스페이스의
IPlugInMssCore, IPlugInMssOfflineSupport, IPlugInMssStatisiticsGraph 세가지의 인터페이스를 바로 AdaptiveStreamingSource 클래스가 상속을 받아 구현 되 있죠~ :)

아쉽게도, MSDN이나 구글링.. 등등 아무리 찾아봐도 이 AdaptiveStreamingSource 의 라이브러리 문서는 없는 것 같습니다. ^^
고로, 직접 사용 해 보시면서 느끼실 수 밖에 없을 것 같아요~

그럼, 직접 사용 해 보실 수 있도록.. 간단하게 Smooth Streaming Media Player 의 Source 를 연결하고, Play 하는 코드를 적어볼께요.

우선 XAML 에서 Media Player 가 될 엘리먼트는, 이전과 같이 MediaElement 입니다.
그리고, AdaptiveStreamingSource 클래스를 생성하여, MediaElement와 ManifestUrl (Smooth Streaming 으로 인코딩 된 결과물의 위치)을 설정하신 뒤, StartPlayback 메소드를 통하여 미디어를 재생 하실 수 있습니다.

this.Loaded += (s, e) =>
{
    Uri videoUri = new Uri("Smooth Streaming Url", UriKind.Absolute);

    AdaptiveStreamingSource videoSrc = new AdaptiveStreamingSource()
    {
        MediaElement = SmoothMediaElement,
        ManifestUrl = videoUri
    };

    videoSrc.StartPlayback();
};

또한, AdaptiveStreamingSource를 보시면, Bit rate 의 변화를 나타내는 엘리먼트를 프로퍼티로 갖고 있는데요.
StatisticsGraph 프로퍼티 입니다. 이 프로퍼티의 타입은 UIElement 이기 때문에 원하시는 Layout Panel에 Add 하시면 사용자의 환경 변화에 따라 달라지는 Bit rate 그래프를 보실 수 있습니다.

또한, 이 Bit rate 를 실무에 적용하시게 된다면.. Poor 한 디자인 덕분에 새로 만들어야 할 사항이 오는데요.
그런 경우, AdaptiveStreamingSource의 PlayBitrateChange 등의 이벤트나 GetBitratesInKbps 등의 메소드를 적절하게 이용하셔야 할 듯 합니다.

저도 기회가 되면, AdaptiveStreamingSource 의 모든 맴버를 분석해서 다시 포스팅 하도록 할께요 :)
우선, 다음 번에는 Smooth Streaming 인코딩 방법과 IIS7에서의 Smooth Streaming 셋팅을 포스팅 하도록 하겠습니다.