如何在 Chrome 的全局媒体控件中使用 blob URL 作为图像源？

Question

我正在尝试自定义 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> 源并且它已正确显示。

我也尝试获取 blob 本身并使用 URL.createObjectURL() 但这给了我另一个（有效的）blob URL 但它并没有更好地工作。

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

编辑 1： 我刚刚发现，虽然它在通过按钮激活的控制视图中不起作用，但当我使用键盘媒体键时图像显示正确：

编辑 2： 另一个发现：它对 JPG 图像有效（即使用 blob URL 作为 src），但对 PNG 图像无效。

Answer 1

我最终使用了 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）。

如何在 Chrome 的全局媒体控件中使用 blob URL 作为图像源？

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

javascript

mediasession