MediaSession not working with file URLs

[danbulant]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem Description

MediaSession not working with file:// URLs

Proposed Solution

Allow use of file protocol URLs in mediaSession in electron

Additional Information

Creating a webserver just to serve the files for mediaSession feels unnecessary and an overkill for just a simple feature.

[dsanders11]

Can you provide further info here? Maybe an example code snippet of what doesn't work? It's not immediately clear to me what "MediaSession not working with file:// URLs" means.

[danbulant]

MediaSession is an API to show what music is currently playing; and to allow system-wide controls (e.g. on windows, using play/pause keys or when changing volume).

A minimum example can be

navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Test title',
    artist: 'Test author',
    album: 'Test album',
    artwork: [
      { src: 'file:///home/dan/images/test.png',   sizes: '96x96',   type: 'image/png' },
    ]
  });

When running this code, console will say that mediasession artwork can only be served via HTTP or HTTPS.

[dsanders11]

Thanks for the extra detail, that makes sense, I just wasn't sure where the URL was being used with MediaSession.

Unfortunately that check is baked into Chromium so it would require patching Chromium to relax that.

It looks like Blob or a data-uri can be used instead, so that's an alternative to running a server.

[danbulant]

It looks like Blob or a data-uri can be used instead, so that's an alternative to running a server.

Wouldn't that worsen the performance? It would mean I would have to load the full image and then pass it as argument

[dsanders11]

I don't think it would have any worse performance than using a web server to serve the files. The image has to be loaded either way?

Was merely pointing out a possible solution to your problem.

[nornagon]

Thanks for reporting this and helping to make Electron better!

Would it be possible for you to make a standalone testcase with only the code necessary to reproduce the issue? For example, Electron Fiddle is a great tool for making small test cases and makes it easy to publish your test case to a gist that Electron maintainers can use.

Stand-alone test cases make fixing issues go more smoothly: it ensure everyone's looking at the same issue, it removes all unnecessary variables from the equation, and it can also provide the basis for automated regression tests.

I'm adding the blocked/need-repro label for this reason. After you make a test case, please link to it in a followup comment.

Thanks in advance! Your help is appreciated.

[danbulant]

isn't this comment enough? This is just the minimum example that should be run in browser context (you can also open any electron app with dev tools, run that in console and see the error).

[danbulant]

It just needs an image, which I'm not sure how to add to fiddle

[nornagon]

@danbulant If there's a runnable repro for an issue, a maintainer can verify it quickly. Without a runnable repro, it takes maintainers significant extra time to understand the steps needed to recreate the issue, and even then it's not clear whether or not we'll end up seeing the same behavior, because we may be running extra steps. It might not be much longer for us in some cases, but there are over 1,000 open issues on the tracker. An extra 5 minutes for every issue adds up.

[Araxeus]

https://gist.github.com/Araxeus/8a6b97e88c815df0fc394e6f1828441d

Change const BASE_URL to point to the extracted Images folder inside this zip

Pictures.zip
This whole example is straight out of https://googlechrome.github.io/samples/media-session/audio.html

[nornagon]

@Araxeus which zip? Also, would it be possible to cut down the size of the repro a bit? I'm not sure we need all 200 lines of code included in that gist

[Araxeus]

Sorry there was a problem uploading it, i updated the comment
as for the length of code - it is one of the simplest working examples, most of those are functions setting the MediaSession buttons behavior [You can see how its supposed to work with the original BASE_URL]

[nornagon]

Alrighty. Looking into it, it seems like this check is quite deep within Blink:

https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/modules/mediasession/media_metadata_sanitizer.cc;l=38-50;drc=59b18de9525c94e2ee27748059d110c56aea32e9

with no way for us to extend the allowed protocols. It does, however, support blob URLs, so that is probably the workaround to use. See https://developer.mozilla.org/en-US/docs/Web/API/Blob.