Video Stream on MediaElement does not work

Question

I'm trying to play video in my MAUI app (currently on Android) using MediaElement from the MAUI CommunityToolkit, and the stream that I pass as source is an RTSP from a camera that connected via WiFi hotspot I've converted the source url using MediaSource.FromUri but still doesn't work all I'm seeing is a red screen. Moreover, the view that I'm trying to play the video in is a ContentView so it's a component inside a ContentPage

<ContentPage>
    ...
    <components:StreamView />
    ...
</ContentPage>

about the errors, I see an error

[MediaSessionCompat] Couldn't find a unique registered media button receiver in the given context.
[0:] MediaManager: Error: AndroidX.LocalBroadcastManager.Content.LocalBroadcastManager not supported on Android 13 and above.

and

[ExoPlayerImplInternal] Playback error
[ExoPlayerImplInternal]   com.google.android.exoplayer2.ExoPlaybackException: Source error
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.ExoPlayerImplInternal.handleIoException(ExoPlayerImplInternal.java:684)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:660)
[ExoPlayerImplInternal]       at android.os.Handler.dispatchMessage(Handler.java:102)
[ExoPlayerImplInternal]       at android.os.Looper.loopOnce(Looper.java:226)
[ExoPlayerImplInternal]       at android.os.Looper.loop(Looper.java:313)
[ExoPlayerImplInternal]       at android.os.HandlerThread.run(HandlerThread.java:67)
[ExoPlayerImplInternal]   Caused by: java.io.IOException: java.lang.IllegalArgumentException: missing profile-level-id param
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspMediaPeriod$InternalListener.onSessionTimelineRequestFailed(RtspMediaPeriod.java:695)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspClient.dispatchRtspError(RtspClient.java:330)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspClient.access$700(RtspClient.java:84)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspClient$MessageListener.handleRtspResponse(RtspClient.java:690)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspClient$MessageListener.handleRtspMessage(RtspClient.java:523)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspClient$MessageListener.lambda$onRtspMessageReceived$0$com-google-android-exoplayer2-source-rtsp-RtspClient$MessageListener(RtspClient.java:516)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspClient$MessageListener$$ExternalSyntheticLambda0.run(Unknown Source:4)
[ExoPlayerImplInternal]       at android.os.Handler.handleCallback(Handler.java:942)
[ExoPlayerImplInternal]       at android.os.Handler.dispatchMessage(Handler.java:99)
[ExoPlayerImplInternal]       ... 3 more
[ExoPlayerImplInternal]   Caused by: com.google.android.exoplayer2.source.rtsp.RtspMediaSource$RtspPlaybackException: java.lang.IllegalArgumentException: missing profile-level-id param
[ExoPlayerImplInternal]       ... 9 more
[ExoPlayerImplInternal]   Caused by: java.lang.IllegalArgumentException: missing profile-level-id param
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.util.Assertions.checkArgument(Assertions.java:62)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspMediaTrack.processAacFmtpAttribute(RtspMediaTrack.java:337)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspMediaTrack.generatePayloadFormat(RtspMediaTrack.java:245)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspMediaTrack.<init>(RtspMediaTrack.java:175)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspClient.buildTrackList(RtspClient.java:362)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspClient.access$1700(RtspClient.java:84)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspClient$MessageListener.onDescribeResponseReceived(RtspClient.java:724)
[ExoPlayerImplInternal]       at com.google.android.exoplayer2.source.rtsp.RtspClient$MessageListener.handleRtspResponse(RtspClient.java:630)
[ExoPlayerImplInternal]       ... 8 more

and upon searching I found some suggested workaround that also didn't helped the workaround mentioned here: https://github.com/CommunityToolkit/Maui/issues/2143

I've verified that I'm connected to the camera when streaming/trying to play the video.

Here's my StreamView.xaml:

<?xml version="1.0" encoding="UTF-8"?>

<ContentView 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="MyApp.UI.Components.StreamView">

    <ContentView.Content>
        <StackLayout
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            HeightRequest="185">
            <StackLayout.BackgroundColor>
                <OnPlatform x:TypeArguments="Color">
                    <OnPlatform.Platforms>
                        <On Platform="iOS" Value="Black" />
                        <On Platform="Android" Value="Transparent" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </StackLayout.BackgroundColor>

            <toolkit:MediaElement 
                x:Name="mediaElement"
                MetadataArtworkUrl = "https://lh3.googleusercontent.com/pw/AP1GczNRrebWCJvfdIau1EbsyyYiwAfwHS0JXjbioXvHqEwYIIdCzuLodQCZmA57GADIo5iB3yMMx3t_vsefbfoHwSg0jfUjIXaI83xpiih6d-oT7qD_slR0VgNtfAwJhDBU09kS5V2T5ZML-WWZn8IrjD4J-g=w1792-h1024-s-no-gm" />

        </StackLayout>
    </ContentView.Content>
</ContentView>

and the StreamView.xaml.cs:

using CommunityToolkit.Maui.Views;
using MyApp.Core;

namespace MyApp.UI.Components
{
    public partial class StreamView : ContentView
    {

        public StreamView()
        {
            InitializeComponent();
            BindingContext = this;

            mediaElement.Source = MediaSource.FromUri(Constants.StreamUrl);

        }
    }
}

Answer 1

After some researching and investigating I've come to a solution.

But for some context, before using MediaElement from the MAUI CommunityToolKit I've used LibVLCSharp Package with it's VideoView element Upon searching I read that the VideoView element is not supported in MAUI, yet I still tried to use it and got the error that there is no VideoViewHandler for the VideoView element, from that error I thought that it's the error that caused that it is unsupported on MAUI

long story short, apparently all I've had to do is to configure the VideoViewHandler (which was already implemented in the LibVLCSharp.MAUI package) in the MauiProgram.cs (which I didn't found in the LibVLCSharp documentation)

var builder = MauiApp.CreateBuilder();

// In order to use VideoView element in the needed pages, we need
// to configure the VideoViewHandler from the LibVLCSharp.MAUI NuGet package
builder.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler(typeof(VideoView), typeof(VideoViewHandler));
});