Search code examples
javascriptmediasession

How to use a blob URL as an image source in Chrome's Global Media Controls?

I'm trying to customize the display in Chrome's Global Media Controls. So I used navigator.mediaSession.metadata to set the title and other things and it works. But I also want to set the background image, like in the example below: enter image description here

I tried using the following code:

  navigator.mediaSession.metadata.artwork = [{sizes, src, type}];

But src is a blob URL, like this: blob:http://localhost:3000/8afe91b0-4689-4f6b-9984-21aedc834253

I know this blob URL is OK since I can use it in as an <img> source and it's correctly displayed.

I also tried to fetch the blob itself and using URL.createObjectURL() but this gives me another (valid) blob URL and it doesn't work any better.

Final note: I think the way I set the artwork property is correct because if I use a "regular" image URL, it works.

EDIT 1: I've just discovered that while it's not working in the control view activated via the enter image description here button, the image appears correctly when I use my keyboard media keys: enter image description here

EDIT 2: Another discovery: it works (i.e. using a blob URL as src) with JPG images but not with PNG images.

Solution

  • I ended up using JPG images which work just fine.

    So, my conclusion is: you can use a blob URL as an artwork source, as follows:

    navigator.mediaSession.metadata.artwork = [
    {
        sizes: '150x200',
        src: 'blob:https://blablabla.com/4065a1d2-a23b-4cff-8ccd-3c6bce6e3b55',
        type: 'image/jpeg'
    }
];

    My other conclusion is that there's a bug with PNG images (see EDIT 1 in my question).