31. [.NET MAUI] CommunityToolKit 으로 앱에서 동영상(.mp4) 재생하기 (+ NU1605 오류 해결)

드디어 CommunityToolkit 누겟에서 MAUI앱에서 동영상을 재생할 수 있게 만들어주는 기능이 추가되었습니다. (정식버전 아님)

 

이 누겟은 .NET 7.0 과 같이 배포하는 것을 목표로 하기때문에 .NET 7으로 업데이트하는 것을 권장드립니다.

 

또한, .NET 7.0은 안드로이드 API 33을 타깃으로하며, 닷넷 업데이트 시, 원래있던 안드로이드 API 32, 31, 30 등 지워 버

 

리기 때문에.. 타깃 API가 33이하라면 주의가 필요합니다.

 

제럴드 오피셜

 

.NET 7.0 확인필수

 

아래 설명은 이를 이용한 동영상 기능구현으로, 기존에 개발중인 프로젝트가 .NET 7이 아니라면 호환성 문제로 여러 오류와 마주하게 되니 주의가 필요합니다.

 

- 참고링크: https://blog.verslu.is/maui/mediaelement-for-net-maui-early-preview/

MediaElement for .NET MAUI: Early Preview

 

---

- 개발과 동시에 글을 작성하고 있어, 해결했던 내용들 크게 3가지로 정리해보았습니다.

1. Feed URL로 Nuget 설치하는 방법

2. WindowsAppSDK 버전 올리는 방법

(NU1605 에러 해결)

3. Xaml에 사용할 핸들러를 프로젝트에 추가하는 방법

(Handler not found for view CommunityToolkit.Maui.MediaElement.MediaElement 오류 해결)

---

1. .Net 7.0 으로 프로젝트를 생성한 뒤, 미리보기 버전 CommunityToolkit.Maui 누겟을 설치합니다.

현재 정식 버전이 아니기 때문에 Official' Preview Packages URL을 통해 누겟을 설치할 수 있습니다.

 

  1) Nuget 패키지 관리자 설정에 들어갑니다.

 

  2) 추가 > 소스에 Feed URL 입력 > 업데이트 > 확인

 

  3) 패키지 소스 변경 후, MAUI 검색 후 설치

 

---

---

 

< NU1605 오류가 뜬다면 아래와 같이 진행 해주세요.>

 

1) Android, WindowsApp SDK 최신화하기

*패키지를 최신화 및 WindowsAppSDK를 최신화 시켜주면 됩니다.(링크 하단)

SDK 최신화

 

2) 프로젝트.cs 파일에 패키지 참조 직접 작성

+ 제럴드의 답변(Microsoft.WindowsAppSDK 관련)

 

*프로젝트.cs 파일에 아래 패키지참조를 직접 작성해줘야합니다.

<ItemGroup Condition="$(TargetFramework.Contains('-windows'))">
		<PackageReference Include="Microsoft.WindowsAppSDK" Version="1.2.221209.1" />
</ItemGroup>

패키지 버전 직접 추가

3) 빌드 후, Media Element 누겟 설치 완료

오류 해결

[관련 링크]

- Pull Request / Feed URL 확인 링크: https://github.com/CommunityToolkit/Maui/wiki/Preview-Packages#pull-requests-

GitHub - CommunityToolkit/Maui: The .NET MAUI Community Toolkit is a community-created library that contains .NET MAUI Extension

 

- Feed URL 설치 방법: https://blog.verslu.is/nuget/testing-nuget-packages-locally/

Testing NuGet packages locally - Gerald Versluis

 

- WindowsAppSDK 업데이트 다운로드 링크: https://learn.microsoft.com/ko-kr/windows/apps/windows-app-sdk/downloads

Windows App SDK 다운로드 - Windows apps

---

2. 프로젝트 .Xaml에 CommunityToolKit의 MediaElement 핸들러를 사용하기 위해서는, 
아래와 같이  MauiProgram.cs 에 .UseMauiCommunityToolkitMediaElement()를 추가해줘야합니다.

 

using Microsoft.Extensions.Logging;
using CommunityToolkit.Maui.MediaElement;

namespace TestMediaApp;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
            		.UseMauiCommunityToolkitMediaElement()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});



#if DEBUG
		builder.Logging.AddDebug();
		builder.UseMauiCommunityToolkitMediaElement();
#endif
		
        return builder.Build();
	}
}

 

Handler를 찾을 수 있도록 추가

 

 

3. NameSpace에 CommunityToolKit.Maui.MediaElement를 추가하고 컨트롤을 추가합니다.

(다양한 Property를 사용할 수 있으나, 예시로는 autoPlay만 사용하였습니다.)

 

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:media="clr-namespace:CommunityToolkit.Maui.MediaElement;assembly=CommunityToolkit.Maui.MediaElement"
             x:Class="TestMediaApp.MainPage">

        <StackLayout>
            
                <media:MediaElement x:Name="media1"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand"
                                Margin="20"
                                Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
                                AutoPlay="True"
                                />
          		<media:MediaElement x:Name="media2"
                                Margin="20"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand"
                                Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
                                AutoPlay="True"
                                />

    </StackLayout>


</ContentPage>

 

4. 빌드후, 확인합니다.

 

안드로이드(좌측),Window App(우측) 각각 빌드된 모습

 

끝

 

 

MVVM 패턴에 응용하는 방법은 다음시간에 설명드리겠습니다.