Microsoft MVP성태의 닷넷 이야기
Phone: 14. C# - MAUI에서 MediaElement 사용 [링크 복사], [링크+제목 복사],
조회: 10088
글쓴 사람
정성태 (seongtaejeong at gmail.com)
홈페이지
첨부 파일
(연관된 글이 4개 있습니다.)
(시리즈 글이 2개 있습니다.)
Phone: 14. C# - MAUI에서 MediaElement 사용
; https://www.sysnet.pe.kr/2/0/13624

Phone: 15. C# MAUI - MediaElement Source 경로 지정 방법
; https://www.sysnet.pe.kr/2/0/13626




C# - MAUI에서 MediaElement 사용

의외군요, ^^; MAUI 앱을 만들고 <MediaElement />가 당연히 있을 줄 알고 타이핑을 했더니 인텔리센스에 뜨지 않습니다. 다행히 검색해 보면 그래도 잘 소개된 글이 나옵니다.

Play Audio and Video in .NET MAUI apps with the new MediaElement
; https://devblogs.microsoft.com/dotnet/announcing-dotnet-maui-communitytoolkit-mediaelement/

MediaElement
; https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/views/mediaelement

글에 따라 패키지 참조를 추가한 후,

// .NET Framework: Install-Package CommunityToolkit.Maui
// .NET Core/5+: Install-Package CommunityToolkit.Maui.Core

Install-Package CommunityToolkit.Maui.Core
Install-Package CommunityToolkit.Maui.MediaElement

// 이 글에서는 .NET 8을 기준으로 합니다.

<Project Sdk="Microsoft.NET.Sdk">

    <!-- ...생략... -->

    <ItemGroup>
        <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
        <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
        <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
        
        <PackageReference Include="CommunityToolkit.Maui.Core" Version="9.0.0" />
        <PackageReference Include="CommunityToolkit.Maui.MediaElement" Version="3.1.1" />
    </ItemGroup>

</Project>

MauiProgram.cs 파일에 다음과 같은 변경 사항을 추가하고,

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

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

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

테스트를 위해 xaml에 mp4 파일을 가리키는 Source 속성을 채워 MediaElement를 추가합니다.

<?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:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="SimplePlayer.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">

            <toolkit:MediaElement
                x:Name="MediaElement"
                ShouldAutoPlay="True"
                Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
                />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

실행하면 BigBuckBunny.mp4 파일이 잘 재생되는 것을 확인할 수 있습니다. ^^




위의 프로그램을 Windows에서 실행하면 MediaElement 영역이 적절한 height를 잡아 영상이 재생되는 반면, (물리 기기든 가상 머신이든) 안드로이드로 배포하게 되면 마치 영상이 재생 안 되는 것처럼 MediaElement 영역의 height가 0인 상태로 나옵니다.

자세한 원인은 알 수 없지만 XAML Element들의 레이아웃이 적절한 시기에 맞춰지지 않는 듯합니다. 즉, 재생에 문제가 있는 것은 아니라서 단순히 Grid 컨테이너 등으로 바꿔 (또는 MediaElement의 Height를 고정 설정하는 식으로) 영역 자체를 미리 확보해 두면 해당 영역에 mp4 재생이 되는 것을 확인할 수 있습니다.

<?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:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="SimplePlayer.MainPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>

        <toolkit:MediaElement Grid.Row="0"
                x:Name="mediaPlayer"
                ShouldAutoPlay="True"
                Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
                />
        
        <Button Grid.Row="1"
                x:Name="btnPlay"
                Text="Play" 
                SemanticProperties.Hint="Click to play"
                Clicked="OnPlayClicked"
                HorizontalOptions="Fill" />
    </Grid>

</ContentPage>

(첨부 파일은 이 글의 예제 코드를 포함합니다.)




빌드 시 만약 다음과 같은 오류가 발생한다면?

1>C:\temp\TestApp\TestApp\TestApp.csproj : error NU1605: Warning As Error: Detected package downgrade: Microsoft.Maui.Controls from 8.0.14 to 8.0.7. Reference the package directly from the project to select a different version. 
1>C:\temp\TestApp\TestApp\TestApp.csproj : error NU1605:  TestApp -> CommunityToolkit.Maui.MediaElement 3.1.1 -> Microsoft.Maui.Controls (>= 8.0.14) 
1>C:\temp\TestApp\TestApp\TestApp.csproj : error NU1605:  TestApp -> Microsoft.Maui.Controls (>= 8.0.7)

메시지에 나온 대로 8.0.14 버전으로 설정해 주면 됩니다.

<PropertyGroup>
    <MauiVersion>8.0.14</MauiVersion>
</PropertyGroup>

<ItemGroup>
    <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
    <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
    <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />

    <PackageReference Include="CommunityToolkit.Maui.Core" Version="9.0.0" />
    <PackageReference Include="CommunityToolkit.Maui.MediaElement" Version="3.1.1" />
</ItemGroup>

아마도 CommunityToolkit 관련 구성요소들이 MAUI 버전에 의존적인 듯한데, 9.0.0 버전의 CommunityToolkit은 8.0.7 버전의 MAUI와는 호환이 안 되는 듯합니다.




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]

[연관 글]






[최초 등록일: ]
[최종 수정일: 5/13/2024]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 




... 46  47  48  49  50  [51]  52  53  54  55  56  57  58  59  60  ...
NoWriterDateCnt.TitleFile(s)
12707정성태7/14/202187187오류 유형: 734. MySQL - Authentication method 'caching_sha2_password' not supported by any of the available plugins.
12706정성태7/14/202118515.NET Framework: 1076. C# - AsyncLocal 기능을 CallContext만으로 구현하는 방법 [2]파일 다운로드1
12705정성태7/13/202119400VS.NET IDE: 168. x64 DLL 프로젝트의 컨트롤이 Visual Studio의 Designer에서 보이지 않는 문제 - 두 번째 이야기
12704정성태7/12/202117781개발 환경 구성: 576. Azure VM의 서비스를 Azure Web App Service에서만 접근하도록 NSG 설정을 제한하는 방법
12703정성태7/11/202122699개발 환경 구성: 575. Azure VM에 (ICMP) ping을 허용하는 방법
12702정성태7/11/202119285오류 유형: 733. TaskScheduler에 등록된 wacs.exe의 Let's Encrypt 인증서 업데이트 문제
12701정성태7/9/202119033.NET Framework: 1075. C# - ThreadPool의 스레드는 반환 시 ThreadStatic과 AsyncLocal 값이 초기화 될까요?파일 다운로드1
12700정성태7/8/202119609.NET Framework: 1074. RuntimeType의 메모리 누수? [1]
12699정성태7/8/202118161VS.NET IDE: 167. Visual Studio 디버깅 중 GC Heap 상태를 보여주는 "Show Diagnostic Tools" 메뉴 사용법
12698정성태7/7/202121947오류 유형: 732. Windows 11 업데이트 시 3% 또는 0%에서 다운로드가 멈춘 경우
12697정성태7/7/202116422개발 환경 구성: 574. Windows 11 (Insider Preview) 설치하는 방법
12696정성태7/6/202118156VC++: 146. 운영체제의 스레드 문맥 교환(Context Switch)을 유사하게 구현하는 방법파일 다운로드2
12695정성태7/3/202118212VC++: 145. C 언어의 setjmp/longjmp 기능을 Thread Context를 이용해 유사하게 구현하는 방법파일 다운로드1
12694정성태7/2/202119582Java: 24. Azure - Spring Boot 앱을 Java SE(Embedded Web Server)로 호스팅 시 로그 파일 남기는 방법 [1]
12693정성태6/30/202116615오류 유형: 731. Azure Web App Site Extension - Failed to install web app extension [...]. {1}
12692정성태6/30/202117596디버깅 기술: 180. Azure - Web App의 비정상 종료 시 남겨지는 로그 확인
12691정성태6/30/202117187개발 환경 구성: 573. 테스트 용도이지만 테스트에 적합하지 않은 Azure D1 공유(shared) 요금제
12690정성태6/28/202118003Java: 23. Azure - 자바(Java)로 만드는 Web App Service - Tomcat 호스팅
12689정성태6/25/202120766오류 유형: 730. Windows Forms 디자이너 - The class Form1 can be designed, but is not the first class in the file. [1]
12688정성태6/24/202120129.NET Framework: 1073. C# - JSON 역/직렬화 시 리플렉션 손실을 없애는 JsonSrcGen [2]파일 다운로드1
12687정성태6/22/202116944오류 유형: 729. Invalid data: Invalid artifact, java se app service only supports .jar artifact
12686정성태6/21/202118043Java: 22. Azure - 자바(Java)로 만드는 Web App Service - Java SE (Embedded Web Server) 호스팅
12685정성태6/21/202120372Java: 21. Azure Web App Service에 배포된 Java 프로세스의 메모리 및 힙(Heap) 덤프 뜨는 방법
12684정성태6/19/202118810오류 유형: 728. Visual Studio 2022부터 DTE.get_Properties 속성 접근 시 System.MissingMethodException 예외 발생
12683정성태6/18/202119198VS.NET IDE: 166. Visual Studio 2022 - Windows Forms 프로젝트의 x86 DLL 컨트롤이 Designer에서 오류가 발생하는 문제 [1]파일 다운로드1
12682정성태6/18/202115689VS.NET IDE: 165. Visual Studio 2022를 위한 Extension 마이그레이션
... 46  47  48  49  50  [51]  52  53  54  55  56  57  58  59  60  ...