如何在Chrome的Global Media Controls中使用Blob URL作为图像源？

问题描述

我正在尝试自定义Chrome的“全局媒体控件”中的显示。因此，我使用navigator.mediaSession.Metadata来设置标题和其他内容，并且可以正常工作。但我也想设置背景图像，如以下示例所示：

我尝试使用以下代码：

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

但是src是一个Blob URL，例如：blob:http://localhost:3000/8afe91b0-4689-4f6b-9984-21aedc834253

我知道此Blob URL可以，因为我可以将其用作<img>来源，并且可以正确显示。

我还尝试使用URL.createObjectURL()来获取Blob本身，但这给了我另一个（有效的）Blob URL，并且效果不佳。

最后一点：我认为设置artwork属性的方式是正确的，因为如果我使用“常规”图像URL，它将起作用。

编辑1： 我刚刚发现，虽然它在通过

按钮激活的控制视图中不起作用，但是当我使用键盘媒体键时，图像可以正确显示：

编辑2： 另一个发现：它适用于JPG图像（不适用于PNG图像）（即，将Blob URL用作src）。

解决方法

我最终使用了效果很好的JPG图片。

因此，我的结论是：您可以使用blob URL作为艺术品来源，如下所示：

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

我的另一个结论是PNG图片有一个错误（请参阅我的问题中的 EDIT 1 ）。

global-media-controls javascript media-image mediasession