如何在 Chrome 中使用 javascript 检测 HTML 视频是否受 DRM 保护？

Question

快速背景：我正在编写一个浏览器扩展程序，它可以在浏览器中播放视频时对其进行操作。 脚本本身应该是通用的，它应该在任何有视频的网站上运行。

我的视频操作依赖于能够操作视频中的像素数据。 将视频像素转换为您可以在 javascript 中使用的 HTML5 的方法是canvas2dContext.drawImage() context.getImageData()将当前视频帧绘制到 ZFCC790C72A86190DE1B549D0DDDC6F5 和上下文中。

当前代码归结为（我正在简化一些事情）：

let video = document.findElementsByTagName('video')[0];
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');

handleVideoFrame() {
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  let data = context.getImageData(0,0,canvas.width, canvas.height);

  processData(data);
}

processData(data) {
  // a lot of heavy calculations going on here
}

window.requestAnimationFrame(handleVideoFrame);

问题：DRM

这很好用，直到您尝试在 Netflix、Disney+ 或相同口径的不同网站上执行此操作。 这些网站使用 DRM，如果该视频上有 DRM，则context.drawImage()将不起作用。 请注意，我不希望捕获受 DRM 保护的视频的实际帧，但我想知道 DRM 是否存在。

在 Firefox 中，这没什么大不了的，因为如果你尝试在受 DRM 保护的视频上调用context.drawImage() ， 你会得到一个异常。 然后，您可以捕获该异常，不要运行繁重的processData() ，提醒用户您的脚本由于 DRM 而无法在该站点上运行，然后关闭整个程序。

另一方面，在 Chrome（以及其他 Chromium reskins）中， context.drawImage()不会失败。 相反， context.drawImage()将绘制一个 100% 不透明的黑色方块而不会引发异常，这是一个问题，因为：

• 您永远无法确定视频是否受 DRM 保护
• 因此你不能通知用户，谁会责怪你的脚本
• 虽然您可以检查框架是否为黑色并避免调用繁重的processData()如果是，但您仍在执行您不需要执行的drawImage()调用

我尝试过的解决方案

• context.getImageData()返回一个 object，其中包含每个像素的 RGBA 值的数组。 我最初希望我可以通过查看 alpha 值来确定视频是否受到 DRM 保护。 但是， drawImage()绘制的帧总是¹完全不透明，这意味着这是一个死胡同。

_{¹ 除非视频尚未加载，否则它是透明的。}

我希望避免的解决方案

• 任何涉及我根据框架已经变黑一段时间的事实做出假设的事情。 当然，如果我检查过的所有帧都是全黑的，我可以运行视频n秒并发出警告。 如果n太低，我就有误报的风险。 如果n太高，视频播放和“哎呀 DRM”警告之间的延迟可能会太长。
• 维护我知道使用 DRM 的已知站点列表

Answer 1

您可以简单地查看HTMLMediaElement 的mediaKeys属性，如果已设置，则视频受 DRM 保护：

const isDRMProtected = (elem) => elem.mediaKeys instanceof MediaKeys;