谷歌插件针对网页视频进行截图

1. 背景

需要在页面对视频进行截图，发现截图有的时候可以，有的截屏为黑。

2. 原因

因为有的视频使用了DRM技术，此文章记录一下并提供部分解决方案。

测试视频是否使用DRM技术，可以使用微信或者钉钉等截屏，发现是否为黑

3. DRM技术是什么？

数字权利管理（Digital Rights Management，DRM）技术是一种用于保护数字内容的技术和策略，以控制其访问、复制、分发和使用。DRM技术旨在确保只有经过授权的用户可以访问和使用数字内容，从而帮助内容提供商保护其版权并控制内容的传播。

以下是 DRM 技术的一些主要方面和特征：

1. **加密**：DRM 使用加密技术对数字内容进行加密，以防止未经授权的用户访问内容。只有具有正确访问权限的用户才能解密和查看内容。

2. **授权和许可证**：DRM 系统使用许可证和授权机制，以确定哪些用户可以访问特定内容，以及以什么方式可以访问。许可证包含有关内容使用的详细信息，如有效期限、可访问的设备和访问频率。

3. **防复制控制**：DRM 技术通常包括防止未经授权的复制和分发的功能。这可以包括防止屏幕录制、复制文件或转发内容。

4. **域控制**：一些 DRM 系统允许内容提供商控制用户可以访问内容的设备或位置。这可以用于限制内容的传播和访问。

5. **水印和标识**：一些 DRM 系统使用数字水印或标识技术，以在内容中嵌入唯一的标识符。这可以用于跟踪未经授权的复制和分发。

6. **远程撤销**：DRM 系统可以允许内容提供商远程撤销许可证，使未经授权的内容失效。这可以用于应对盗版和未经授权的分发。

7. **多平台支持**：一些 DRM 系统支持多种设备和平台，使用户可以在不同的设备上访问内容。

DRM 技术在数字内容领域广泛应用，包括电子书、音乐、电影、游戏和许多其他类型的数字媒体。尽管 DRM 技术有助于保护版权和内容的安全性，但它也引发了一些争议，因为一些人认为它可能对消费者的权利和自由产生不利影响，例如对备份和合理使用的限制。因此，DRM 的使用和实施一直在不断演化，并受到法律和政策的监管。

4. 解决方案（均需要考虑合法问题，所有未经过版权者授权的，都存在法律和版权问题）

1. 基本视频截图功能

const video = document.getElementsByTagName("video")[0];
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// 在 canvas 上渲染视频帧
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 将 canvas 转换为图像数据
var dataURL = canvas.toDataURL('image/jpeg');

2. 魔法打败魔法

经过查找，谷歌插件提供了一个​Browser.tabs.captureVisibleTab API，可以获取到当前tab的页面截图数据也就是整个网页的截屏，但还是不能直接截取到对应视频的截图。

1. manifest增加权限配置activeTab

 "permissions": [
    "activeTab"
  ],

1. background中调用captureVisibleTab

const capture =  await Browser.tabs.captureVisibleTab(null, {format: "jpeg"})
return capture //base64图片数据

3. 后端解密支持（暂不考虑，成本较大）