Missing MediaElement control

[teohumeau]

The MediaElement XAML control was working well in Xamarin, please include it for MAUI !

[brminnick]

We are currently working on porting the features from Xamarin Community Toolkit to the Maui Community Toolkit. MediaElement will be included before we publish the first release candidate of .NET MAUI Toolkit in November 2021.

[brminnick]

Quick update - The MediaElement has been approved and has the help wanted tag: #113

[brminnick]

Another update - the MediaElement is currently blocked. Please follow the progress here: #113 (comment)

[MhAllan]

Please don't port that MediaElement, it is designed weirdly and can only read files in specific locations. a real Media[Player] should be designed to read Streams not urls or files

[brminnick]

Good feedback! Do you have an API Design / Implementation in mind for the new media player?

[emceelovin]

Please don't port that MediaElement, it is designed weirdly and can only read files in specific locations. a real Media[Player] should be designed to read Streams not urls or files

10000% agree. I was gonna say the same thing. I've been searching for ways to play media in my MAUI project, and I ended up here. The source aspect is the issue. any MediaElement/Player should allow a stream source property. like UWP MediaPlayerElement.Source is an IMediaSource interface you can implement. AV should be in Maui.Essentials - along with biometrics(that's another story though). It's extremely essential IMO. VoIP/watching videos. Doesn't get anymore essential than that. I don't understand why Microsoft constantly skips over necessary details. It's not something that, at the conceptual level, is different on each OS. It's extremely static IMO. The implementation is just different. There could be an IMediaPlayer interface which takes a Stream that has enough features for most developers. Allow A/V or just audio(VoIP etc). Barring something advanced like VLC, you just need play, pause, a way to seek, support codecs obviously, and the ability to stream the source so you aren't stuck to to a URI. In my use case, the data comes off a socket. I need to be able to implement a Stream so i can just write it directly to buffers the Stream/MediaPlayer can consume. You could get nasty and create a buffer file somewhere, stream to the file, then keep reloading the file in the media player, but that would be absolutely horrible when it came to seeking and what not lol. I didn't even see your implementation when I replied to this also. It's nice to see people that think and understand the needs.

[MhAllan]

@emceelovin yeah, I don't get Xamarin/Maui team. you see them spending time on silly things ignoring essential features for a modern UI framework should look like. what is a UI framework that doesn't play media? I am like, so you have implemented buttons and virtual lists and left the video decoding to me 😅

[brminnick]

Hey Gang! Let’s not use this platform to bash fellow developers. This Discussion is focused on the MediaElement and the work involved to add it to the .NET MAUI Community Toolkit.

If you’d like to make a Feature Request on the .NET MAUI GitHub repo, please do.

[MhAllan]

@brminnick here is quick one.

public enum MediaPlayerState
    {
        Loading,
        Loaded,
        Seeking,
        Playing,
        Paused,
        Stopped
    }

    public enum PlayListType
    {
        Ordered,
        Shuffled
    }

    public enum RepeatType
    {
        Once,
        Repeat
    }

    public interface IMauiView
    { }

    public interface IMediaAd
    {
        TimeSpan Time { get; }
        TimeSpan Duration { get; }
    }

    public interface IMediaItem
    {
        Task<Stream> GetStream(CancellationToken ct = default);
    }

    public interface IVolumeController
    {
        float Balance { get; set; }
        bool IsMute { get; set; }
    }

    public delegate void AdLoadedDelegate(object sender, int index, IMediaAd ad);
    public delegate void AdPlayingDelegate(object sender, int index, IMediaAd ad);
    public delegate void AdSkippedDelegate(object sender, int index, IMediaAd ad);
    public delegate void AdClickedDelegate(object sender, int index, IMediaAd ad);
    public delegate void AdFinishedDelegate(object sender, int index, IMediaAd ad);
    public delegate void AdFailedDelegate(object sender, int index, IMediaAd ad);
    public delegate void MediaStateChangedDelegate(object sender, MediaPlayerState state);

    public interface IMediaPlayerController
    {
        event AdLoadedDelegate AdLoaded;
        event AdPlayingDelegate AdPlaying;
        event AdClickedDelegate AdClicked;
        event AdSkippedDelegate AdSkipped;
        event AdFinishedDelegate AdFinished;
        event AdFailedDelegate AdFailed;

        event MediaStateChangedDelegate StateChanged;

        IReadOnlyCollection<IMediaItem> MediaList { get; }
        IMediaItem CurrentItem { get; }
        int CurrentIndex { get; }
        bool IsPlayingList { get; }

        IMediaAd CurrentAd { get; }
        int CurrentAdIndex { get; }
        IReadOnlyCollection<IMediaAd> AdList { get; }

        bool CanSeek { get; }
        TimeSpan Position { get; }
        TimeSpan Duration { get; }
        double Length { get; }
        bool IsLive { get; }
        bool IsVideo { get; }
        double VideoWidth { get; }
        double VideoHeight { get; }
        double VideoAspectRatio { get; }
        Stream Stram { get; }

        IVolumeController Volume { get; }

        MediaPlayerState State { get; }

        bool AutoPlay { get; set; }
        float Speed { get; set; }

        void AddMediaItem(IMediaItem item);
        void RemoveMediaItem(int index);

        Task Play(IMediaItem item, CancellationToken ct = default);
        Task PlayList(int index = 0, CancellationToken ct = default);

        Task Stop(CancellationToken ct = default);
        Task Pause(CancellationToken ct = default);
        Task PlayNext(CancellationToken ct = default);
        Task PlayPrevious(CancellationToken ct = default);
        Task SeekForward(TimeSpan? duration = null, CancellationToken ct = default);
        Task SeekBackward(TimeSpan? duration = null, CancellationToken ct = default);
    }

    public interface IInnerMediaView : IMauiView
    {

    }

    public interface IVideoView : IMauiView
    {
        IMediaPlayerController Player { get; }
    }

    public interface IMediaControlsView : IMauiView
    {

    }

    public interface IMediaPlayer
    {
        IInnerMediaView LoadingView { get; set; }
        IInnerMediaView ErrorView { get; set; }
        IInnerMediaView AudioView { get; set; }
        IVideoView VideoView { get; set; }
        IMediaControlsView ControlsView { get; set; }
        IMediaPlayerController Player { get; set; }
    }

[pictos]

@MhAllan do you know if all platform APIs have support for all features listed here?

[bijington]

I would quite like to stick with the old Source approach but allow for the media control to accept a StreamMediaSource if we go ahead with this.

[MhAllan]

@pictos I don't think so, it needs to be a component that unifies all of them, not easy work. I think the minimum needed is: PlayList, the separation between MediaPlayer and it's UI is important for customization and for playing audio without UI, and playing streams regardless to their source. if we can decouple current MediaElement UI from it's functionality, add PlayList, and Stream source then it should be fine. but media player without VAST streaming capabilities in 2022 doesn't look enough :(

[pictos]

That's an issue, we don't like to add 3rd dependencies to our project, so can support/implement what the native APIs allow us. that said do you want to edit your spec?

[emceelovin]

I would quite like to stick with the old Source approach but allow for the media control to accept a StreamMediaSource if we go ahead with this.

I feel like this would be the fastest approach to solve both most of the problem and most peoples problem. It would be a great get-by at least also. In the IMediaPlayer control I started working on in my MAUI project to back with native implementations, I actually named my stream that exact name. This is exactly what we need.

[vallgrenerik]

@brminnick any updates for this migration? :)
Or do you have any tips for playing mp4/videos on .NET MAUI?

[pictos]

About the migration that will happen after GA. Can't precise a deadline for you right now

[vallgrenerik]

Thanks @pictos! Where could I find that? 😊

[pictos]

• https://github.com/videolan/libvlcsharp

A project that uses it, that you can take some inspiration

• https://github.com/drasticactions/DrasticMedia

[brminnick]

We are blocked on adding MediaElement until the .NET MAUI team releases support for ExoPlayer.

You can follow our progress on the Proposal:
#113 (comment)

[vallgrenerik]

Thank you @brminnick and @pictos! 😀 🧑‍💻

[jcmontoya]

Is this code supposed to work or not yet?

        MediaElement mElement = new MediaElement();
        mElement.Source = Xamarin.CommunityToolkit.Core.MediaSource.FromFile("beep.mp3");
        mElement.Play();

I installed the toolkit : Install-Package CommunityToolkit.Maui -Version 1.0.0

When I run the code, I get no error but no sound either. Please advise.

[brminnick]

CommunityToolkit.Maui hasn't yet implemented MediaElement

Your code is referencing Xamarin.CommunityToolkit

[VladislavAntonyuk]

You can try XamarinCommunityToolkit.MauiCompat.

It may work there

[brminnick]

Link to Xamarin.CommunityToolkit.MauiCompat NuGet Package:

https://www.nuget.org/packages/Xamarin.CommunityToolkit.MauiCompat

[jabak]

Tried it. Didn't work for me. What a shame.

[jcmontoya]

I already tried Xamarin.CommunityToolkit.MauiCompat, but what is the correct syntax for this line with Xamarin.CommunityToolkit.MauiCompat?

mElement.Source = Xamarin.CommunityToolkit.Core.MediaSource.FromFile("/Resources/Raw/beep.mp3");

It is not working for me.

Thanks

[jbakholt]

In a perfect world you it should work by just supplying any given path. I do see your point though. Maui is not happy about local files not compiled as a embedded resource. So maybe that's the problem. And embedding files is a no go in almost all use cases btw.

[jcmontoya]

Is there a projected date to have MediaElement in the Maui toolkit? In the top of this discussion, it says: "MediaElement will be included before we publish the first release candidate of .NET MAUI Toolkit in November 2021."

[brminnick]

We are blocked on MediaElement.

You can follow the progress in the MediaElement Proposal: #113 (comment)

[CliffAgius]

Closed as completed.