dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.96k stars 1.71k forks source link

DASH.js in BlazorWebView errors with 'MediaSource is not supported'. Works under Windows. #7909

Closed warden-vt closed 2 years ago

warden-vt commented 2 years ago

Description

When using a dash.js video player in a Blazor-maui template project I'm unable to play a video on macOS. When compiled for windows, everything functions as expected.

Windows:

Windows

macOS:

macOS

Is MediaSource supported in maccatalyst? Am I missing a plist permission?

Attached repro project: DASHjs - testapp.zip

I apologize if this is a known issue. If it is a known issue, is there any information regarding MediaSource support?

Thanks.

Steps to Reproduce

Compile the application for macOS from the DASHjs - testapp.zip attached to this issue.

Version with bug

6.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

macOS

Affected platform versions

macOS 12.3.1

Did you find any workaround?

No

Relevant log output

From dash.js:

Event received: error
    type: error
    (O)error:
        code: 23
        message: "mediasource is not supported"
        data: null
jfversluis commented 2 years ago

Could you maybe verify what happens if you try this in a regular Blazor app in a browser on macOS? And what if you try another video file? Both in .NET MAUI Blazor as well as the Blazor web app?

Seems to me like maybe this video format is simply not supported on Mac.

ghost commented 2 years ago

Hi @warden-vt. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

warden-vt commented 2 years ago

Just tested a Blazor server app. Everything works as expected on macOS.

Blazor Server App on macOS Safari

The lines particularly interesting in the dash.js video player are let hasWebKit = ('WebKitMediaSource' in window); let hasMediaSource = ('MediaSource' in window);

These return false when in a maui-blazer app on macOS, but they return true when in a Blazor server app visited with Safari.

javiercn commented 2 years ago

@warden-vt thanks for contacting us.

I'm not sure if you need an entitlement or you need to configure something on the underlying webview to make this work. Checkout this doc for reference

ghost commented 2 years ago

Hi @warden-vt. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

warden-vt commented 2 years ago

I haven't had much luck finding any related documentation on how I should configure the BlazozWebView on maccatalyst to allow it to use Media Source Extensions.

I did set AllowsInlineMediaPlayback to true in BlazorWebViewInitializing which seemed to be required for inline video playback on IOS. This got me thinking, is the maccatalyst BlazorWebviewHandler.IOS.cs loading an IOS WebKit web view? From what I can tell MediaSource and Media Source Extensions are not supported on IOS WebKit only MacOS and IPadOS. (reference)

Safari 8+: Full Support

iOS 13+: Partial support - Exposed in Mobile Safari on iPad but not on iPhone.

Hope this helps in figuring out a direction to keep looking.

Thanks

javiercn commented 2 years ago

@warden-vt the MacCatalyst handler I believe uses the iOS webkit, so that might be it.

Another thing to look with these issues is whether or not you can reproduce them with a plan old webkit window (without Blazor being involved).

SteveSandersonMS commented 2 years ago

Thanks @javiercn.

@warden-vt Sorry for the inconvenience here. Unfortunately it's not clear there's a defect in BlazorWebView here, as the permissions are controlled by the host application. If you're able to work out what kind of permissions are required to make this work, and after that you still feel there's a bug in BlazorWebView, please let us know and we can consider that.

ghost commented 2 years ago

Hi @warden-vt. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

warden-vt commented 2 years ago

@javiercn I tried a normal WebView and also set NSAppTransportSecurity to disable ATS just in case. I still get the same issue.

As @SteveSandersonMS pointed out, I don't believe it's an issue with BlazorWebView anymore. I'm a bit unfamiliar with what permissions I should be looking for. I've looked through the WKWebViewConfiguration in BlazorWebViewInitializing to try and set some properties in the underlying WebView. I was unsuccessful in getting that to enable Media Source Extensions.

Some configuration values I tested changing in the BlazorWebViewInitializingEventArgs:

I'm at a dead end on what permissions I need to enable this. Is it possible the underlying WebView is using a WKWebKit that doesn't support Media Extensions, even though they are supported on Safari in OSX?

warden-vt commented 2 years ago

Just to try and cover everything, I created a Swift app in Xcode for MacOS and then another one for iOS.

This application connected to the dash.js reference player.

I was able to get the MacOS Swift WKWebView to work, it loaded the page and played the video through the dash.js player. I did have to enable Network Client in the Signaling & Capabilities in Xcode for it to connect outside of its sandbox.

For iOS I used the iOS 15.5 Simulator to connect to the same website. As expected it didn't work on iOS WebKit.

warden-vt commented 2 years ago

I really think it's an underlying WebKit issue not supporting MediaSource on MacCatalyst via the iOS WebKit.

As a workaround, I've decided to go with HLS.js for Windows and use the native HLS support on iOS/MacOS.

javiercn commented 2 years ago

@warden-vt thanks for the additional details.

I believe that yes, Catalyst (which is what Maui targets) uses the underlying IOS Webkit, so I think until that's supported there, there is nothing we can do about it.

javiercn commented 2 years ago

I'm closing this issue as there is no action for us to take here.