m3u8 스트리밍 파일을 윈도우 8.1 Store App에서 재생하는 방법
윈도우 8 스토어 앱 프로젝트에 내장된 MediaElement는 기본적으로 m3u8 파일을 재생하지 못합니다.
Supported audio and video formats (Windows Store apps)
; https://docs.microsoft.com/en-us/previous-versions/windows/apps/hh986969(v=win.10)
이와 관련해서 웹을 검색해 보면 글이 나오는데요.
Playing .m3u8 file in Windows Store App
; http://stackoverflow.com/questions/15906755/playing-m3u8-file-in-windows-store-app
위의 글에서는 다음의 3가지 방법을 제시하고 있습니다.
- create your own media source provider
- 3ivx, a library that supports both Windows store apps, and windows phone 8, but they are really expensive (for me the offer was 7500 Australian dollars per app)
- Apptelic HLS?, a commerical library for Windows 8 and windows Phone
첫 번째 방법은 좀 그렇고 ^^ 두 번째/세 번째 방법은 상용 라이브러리를 사용하라는 것입니다.
다행히 조금 더 검색을 해본 끝에 다음의 글을 발견했습니다.
Getting a .m3u8 stream working
; http://phonesm.codeplex.com/discussions/472168
마지막 덧글을 보면 m3u8 재생에 성공했다고 하니, ^^ 방법이 있을 것 같습니다. 자... 그럼 정말 되는지 한번 해볼까요? ^^
일단, 다음의 사이트에서 코드를 다운로드 받습니다.
Project Description
; http://phonesm.codeplex.com/
윈도우 폰 8 예제이긴 한데, 그래도 m3u8 파일이 재생되는지 확실히 하기 위해 Visual Studio 2013으로 SamplePlayer.WP8.sln 파일을 로드해 보면, MainPage.xaml에 다음과 같은 코드를 볼 수 있습니다.
<Grid x:Name="LayoutRoot"
Background="Transparent">
<mmppf:MediaPlayer Source="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8">
<mmppf:MediaPlayer.Plugins>
<smmedia:StreamingMediaPlugin />
</mmppf:MediaPlayer.Plugins>
</mmppf:MediaPlayer>
</Grid>
실행해 보니, ^^ 정말 m3u8 스트리밍 파일이 잘 재생이 되었습니다. 일단, 해결책이 나와서 마음이 가벼워졌습니다. ^^ 혹시 윈도우 폰 8에 포팅하실 분이라면 이 프로젝트의 코드를 거의 그대로 가져다 쓰시면 됩니다. (참고로, 윈도우 폰 7 예제도 있습니다.)
문제는 Store App 용으로 이 코드를 사용할 수 있느냐인데요. 아쉽게도 SamplePlayer.WP8.sln에 있는 코드는 Store App 용의 WinRT 라이브러리에는 정상적으로 포팅이 되지 않는 구조입니다.
이상한 것은 "
Project Description" 글을 보면 "HTTP Live Streaming (HLS) for Windows Phone and Windows 8.1."라는 문구가 나오는데요. 그런데 SamplePlayer 샘플 프로젝트에는 윈도우 8용 예제가 없습니다.
하지만 좀 더 자세히 보면 "Windows 8.1 support is available in the latest source"라는 문구를 볼 수 있는데요. 재미있게도 "DOWNLOADS"에 공개된 프로젝트는 최신의 소스코드가 반영되지 않은 탓에 없는 것이었습니다. 직접 "SOURCE CODE" 쪽으로 가서 최신의 소스코드를 그대로 다운로드 받아야 하는데요.
phonesm-6fadcf3951d3e5363f7bb162bd9f143c6647907b.zip
; http://phonesm.codeplex.com/SourceControl/latest
위의 소스코드를 다운로드 받아서 "HlsView.Win81" 프로젝트를 빌드해 실행하면 m3u8 파일이 재생되는 것을 확인할 수 있습니다.
그럼, 간단하게 한번 m3u8 구동을 위한 단계를 정리해 볼까요? ^^ 우선, 다음의 2개 SDK를 다운로드 받습니다.
Player Framework: an open source media player framework for Windows and Windows Phone
; http://playerframework.codeplex.com/
Smooth Streaming Client SDK
; https://marketplace.visualstudio.com/items?itemName=Cenkd.SmoothStreamingClientSDK
phonesm-6fadcf3951d3e5363f7bb162bd9f143c6647907b.zip의 압축을 풀어 나온 프로젝트를 x86/x64/ARM용으로 빌드하면 "/Sources/bin" 폴더 하위에 각각의 플랫폼 용으로 DLL들이 생성됩니다.
이제 스토어 앱 프로젝트를 하나 만들고, "phonesm-6fadcf3951d3e5363f7bb162bd9f143c6647907b" 프로젝트 바이너리를 모두 참조 추가한 다음, MainPage.xaml에 다음과 같이 MediaElement 하나를 추가합니다.
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<MediaElement Name="mediaElement1" AutoPlay="True" />
</Grid>
</Page>
그리고 최종적으로 다음과 같이 코드를 추가해 주시면 됩니다.
using SM.Media;
using SM.Media.Utility;
using SM.Media.Web;
using System;
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace App1
{
public sealed partial class MainPage : Page
{
IMediaStreamFascade _mediaStreamFascade;
readonly IMediaElementManager _mediaElementManager;
static readonly IApplicationInformation ApplicationInformation = ApplicationInformationFactory.DefaultTask.Result;
readonly IHttpClients _httpClients;
public MainPage()
{
this.InitializeComponent();
_mediaElementManager = new WinRtMediaElementManager(Dispatcher,
() =>
{
return mediaElement1;
},
me => { });
var userAgent = ApplicationInformation.CreateUserAgent();
_httpClients = new HttpClients(userAgent: userAgent);
Unloaded += (sender, args) => OnUnload();
}
public void OnUnload()
{
Debug.WriteLine("MainPage unload");
if (null != mediaElement1)
mediaElement1.Source = null;
var mediaStreamFascade = _mediaStreamFascade;
_mediaStreamFascade = null;
mediaStreamFascade.DisposeBackground("MainPage unload");
}
void InitializeMediaStream()
{
if (null != _mediaStreamFascade)
return;
_mediaStreamFascade = MediaStreamFascadeSettings.Parameters.Create(_httpClients, _mediaElementManager.SetSourceAsync);
_mediaStreamFascade.SetParameter(_mediaElementManager);
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
InitializeMediaStream();
_mediaStreamFascade.Source = new Uri(
"https://devimages.apple.com.edgekey.net/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8"
);
}
}
}
이제 실행해 보시면 ^^ m3u8 파일이 정상적으로 재생되는 것을 확인할 수 있습니다.
(
첨부 파일은 위의 예제 프로젝트를 포함하고 있습니다.)
지난번에 제가 VLC ActiveX 컨트롤을 소개했는데요.
C# - VLC(ActiveX) 컨트롤을 레지스트리 등록 없이 사용하는 방법
; https://www.sysnet.pe.kr/2/0/1640
VLC 컨트롤 역시 m3u8 파일을 재생할 수 있습니다. 그런데 여기에 재미있는 성능 차이가 있습니다.
VLC는 C++로 컴파일된 것임에도 불구하고 이를 이용해 m3u8 파일을 재생하니 CPU가 제 데스크톱 i5 기준으로 25~30%를 먹습니다. 4 코어이기 때문에 기본적으로 적어도 1개의 스레드는 항상 CPU 100%를 치는 현상이 발생하고 있는 것입니다.
반면 전체가 C#으로 개발된 phonesm 라이브러리로 재생하는 경우 CPU가 1~2%로 믿을 수 없을 정도의 CPU 소비량을 보이고 있습니다. 아마도 GPU 가속이 원인이지 않을까 싶지만, 어쨌든 모바일 기종에서 VLC 처럼 CPU를 쓰게 되면 분명 문제가 될 것입니다. 게다가 (ActiveX가 XAML에 포함될 수 없어서 애당초 불가능하지만) VLC 라이브러리를 이용해 스토어 앱에 쓴다면 40MB가량의 바이너리가 배포되어야 하지만, phonesm 라이브러리를 사용하면 1MB도 채 안됩니다.
그러게요, C++로 되었다고 해서 무조건 쓸만하다고 단정지어서는 안될 것 같습니다. ^^ (웹 검색을 통해 VLC 평을 보면, 성능이 안 좋다는 의견을 종종 볼 수 있습니다.)
나머지 내용은 제가 실습하면서 겪었던 오류 내용을 정리한 것입니다.
"phonesm-20130921.zip" 압축을 풀어 "SamplePlayer" 폴더의 SamplePlayer.WP8.sln을 Visual Studio 2013에 로드해서 컴파일하면 다음과 같은 오류가 발생합니다.
1>------ Rebuild All started: Project: SM.Media.MediaPlayer.WP8, Configuration: Debug ARM ------
2>------ Rebuild All started: Project: HlsView.WP8, Configuration: Debug ARM ------
1> Restoring NuGet packages...
1> To prevent NuGet from downloading packages during build, open the Visual Studio Options dialog, click on the Package Manager node and uncheck 'Allow NuGet to download missing packages'.
1> All packages listed in packages.config are already installed.
1>C:\...(1803,5): error MSB3774: Could not find SDK "Microsoft.PlayerFramework.WP8.Core, Version=1.8.1.0".
3>------ Rebuild All started: Project: SamplePlayer.WP8, Configuration: Debug ARM ------
3> Restoring NuGet packages...
3> To prevent NuGet from downloading packages during build, open the Visual Studio Options dialog, click on the Package Manager node and uncheck 'Allow NuGet to download missing packages'.
3> All packages listed in packages.config are already installed.
3>C:\...(1803,5): error MSB3774: Could not find SDK "Microsoft.PlayerFramework.WP8.Core, Version=1.8.1.0".
2> Restoring NuGet packages...
2> To prevent NuGet from downloading packages during build, open the Visual Studio Options dialog, click on the Package Manager node and uncheck 'Allow NuGet to download missing packages'.
2> All packages listed in packages.config are already installed.
2> HlsView.WP8 -> c:\users\SeongTae\SkyDrive\Documents\articles\m3u8_store\phonesm-20130921\SamplePlayer\HlsView.WP8\Bin\ARM\Debug\HlsView8.dll
2> Begin application manifest generation
2> Application manifest generation completed successfully
2> Begin Xap packaging
2> Creating file HlsView8_Debug_x86.xap
2> Adding HlsView8.dll
...[생략]...
========== Rebuild All: 1 succeeded, 2 failed, 0 skipped ==========
Microsoft.PlayerFramework.WP8.Core 어셈블리가 없다는 것인데요. 이것은 다음의 경로에서 다운로드 받을 수 있습니다.
Player Framework for Windows and WP (v1.3.2)
; http://playerframework.codeplex.com/releases
위의 경로에 "Microsoft.PlayerFramework.vsix"를 실행하면 자동으로 PlayerFramework 어셈블리에 대한 환경 구성이 끝납니다. 하지만, SamplePlayer 프로젝트가 사용하는 Microsoft.PlayerFramework.WP8.Core 어셈블리의 버전이 예전 것이기 때문에 새롭게 SamplePlayer.WP8 프로젝트와 SM.Media.MediaPlayer.WP8 프로젝트에 포함된 참조를 1.8.2.2 버전으로 업데이트 해주면 됩니다.
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]