CODEWITHSUNDEEP
iosmauirtsp
DKR
DKR

Reputation: 11

How can one play RTSP in .NET MAUI on iOS platform?

I am new to .NET MAUI and to iOS/Mac. I am making a cross-platform app in .NET MAUI that needs to display video from RTSP. I am using the recently available (Jan 2023) MediaElement component from the CommunityToolkit, i.e., CommunityToolkit.Maui.MediaElement. I simply provide it a URI like so:

v.Source = CommunityToolkit.Maui.Views.MediaSource.FromUri($"rtsp://{i.IPAddress}:{i.Port}/")

For the sake of convenience let’s just suppose I am trying to view the following (at the time of writing this is an active stream that will show a video, e.g., via Android):

rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4

which has the following Codec: H264 - MPEG-4 AVC (part 10) (h264), so I think it should work in iOS. I am using an iOS simulator that runs iOS version 16.2, viz. “iPad Pro (11-inch) (4th gneration) iOS 16.2”

Repro

  1. Create a new MAUI app via the .NET MAUI App template.
  2. Add the CommunityToolkit.Maui.MediaElement nuget package (I am using version 1.0.1).
  3. Modify MauiProgram.cs to be:
using CommunityToolkit.Maui;
using Microsoft.Extensions.Logging;

namespace RtspExample;

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();
#endif

        return builder.Build();
    }
}
  1. Add the following to the VerticalStackLayout in MainPage.xaml, which was auto-generated from the template:
<toolkit:MediaElement
    Source="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
    ShouldAutoPlay="True"
    WidthRequest="400"
    HeightRequest="300"
    />

4a) Also add this to the ContentPage's attributes in MainPage.xaml:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

  1. Run the project in the iOS simulator.

Result

The result, with respect to the MediaElement UI control, is a control that has an inactive play button graphic, centered within the control, that has a line through it, indicating that the media cannot be played. Clicking the image has no effect. Also, there aren’t any associated errors/messages in the log that I have observed. This code works in Android and Windows (assuming you have the right codecs present).

Based on reviewing various web resources I have reached the tentative conclusion that Apple does not provide a way to access RTSP via the AVPlayer, but instead prefers (?) you access a video stream via HLS.

Questions

Is it possible, out of the box, in iOS, to access and view RTSP via the CommunityToolkit.Maui.MediaElement?

If yes, why is what I have done above not working, and what should I do to make it work?

If not, can it, and how can it, be made to work?

Are there alternatives (I am exploring a possible alternative using a non-command line ffmpeg wrapper)?

Upvotes: 1

Views: 1584

Answers (1)

Zack
Zack

Reputation: 1629

By looking at the official documentation of MediaElement, we can know that in iOS, the native AVPlayer is called, so RTMP/RTSP is not supported. If you want to play RTSP format directly, you can look for some other library, or convert RTSP stream to HLS stream.

You can check Apple's introduction to HTTP Live Streaming:

Send live and on‐demand audio and video to iPhone, iPad, Mac, Apple Watch, Apple TV, and PC with HTTP Live Streaming (HLS) technology from Apple.

Upvotes: 0

Related Questions