javascript - 如何在 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 as 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）。