压缩流API演示 - 实时gzip/brotli压缩
使用CompressionStream和DecompressionStream对文本进行实时的gzip或brotli压缩与解压。
UD5工具箱
模拟 DRM 保护内容的解密播放流程 — Encrypted Media Extensions Demo
Encrypted Media Extensions (EME) 是 W3C 制定的 Web 标准,允许浏览器通过 JavaScript API 播放加密的媒体内容(如视频、音频)。EME 本身不进行解密,而是作为桥梁,连接浏览器与内容解密模块(CDM),实现 DRM(数字版权管理)保护内容的合法播放。
EME 的核心工作流程包括:检测 DRM 系统支持 → 请求密钥系统访问 → 创建 MediaKeys → 建立密钥会话 → 向许可证服务器请求许可证 → 解密并播放内容。
📌 EME 标准使得 Netflix、Hulu、Spotify 等流媒体平台能够在浏览器中安全地提供受版权保护的内容。
📌 大多数流媒体服务会同时支持多种 DRM 系统,以确保跨平台的兼容性。
MSE (Media Source Extensions) 允许 JavaScript 动态构建媒体流并传递给 HTML 视频/音频元素播放。而 EME 负责处理这些媒体流的解密。
两者通常配合使用:MSE 负责将加密的媒体数据分段传递给播放器,EME 则确保这些加密数据能够被 CDM 解密后再进行解码渲染。现代流媒体平台(如 YouTube、Netflix)几乎都同时使用 MSE + EME。
📌 简单理解:MSE 管理"数据流",EME 管理"解密密钥"。
EME 的安全性依赖于 CDM (Content Decryption Module) 的实现。CDM 是闭源的二进制模块,运行在浏览器沙箱中,负责实际的解密工作。
安全层级:
📌 完全绕过 DRM 极其困难,尤其是在硬件安全级别下。但没有任何 DRM 系统是100%安全的。
许可证服务器 (License Server) 是 DRM 体系中的核心后端服务。当浏览器需要播放加密内容时,CDM 会生成一个许可证请求(包含设备信息、内容ID等),发送到许可证服务器。
许可证服务器验证用户权限(如订阅状态、播放次数、过期时间等)后,返回包含解密密钥的许可证响应。CDM 使用这些密钥来解密内容。
📌 常见的许可证服务器方案:Google Widevine License Server、Microsoft PlayReady Server、Apple FairPlay Streaming Server。
| 浏览器 | Widevine | PlayReady | FairPlay |
|---|---|---|---|
| Chrome | ✅ 支持 | ❌ 不支持 | ❌ 不支持 |
| Firefox | ✅ 支持 | ❌ 不支持 | ❌ 不支持 |
| Edge | ✅ 支持 | ✅ 支持 | ❌ 不支持 |
| Safari | ❌ 不支持 | ❌ 不支持 | ✅ 支持 |
| Opera | ✅ 支持 | ❌ 不支持 | ❌ 不支持 |
📌 实际兼容性可能因操作系统和设备而异。移动端支持情况也不同。
集成 EME 的基本步骤:
navigator.requestMediaKeySystemAccess() 检测并获取 DRM 系统访问权限。MediaKeys 对象并关联到视频元素。encrypted 事件,当检测到加密数据时创建 MediaKeySession。session.generateRequest() 生成许可证请求。session.update() 将许可证传递给 CDM。使用CompressionStream和DecompressionStream对文本进行实时的gzip或brotli压缩与解压。
编辑RAML定义,实时渲染资源结构、方法及响应示例,适合REST API设计初期。
利用编译为 WASM 的 Zstd 库在浏览器中压缩解压数据,展示比 Brotli 更快的压缩速度。
添加本地视频和SRT字幕文件,预览并生成带硬字幕的新视频文件。
利用浏览器原生API录制屏幕共享或窗口,选择音频源,导出为WebM视频。
通过PerformanceObserver获取首次绘制(FP)和首次内容绘制(FCP)时间。
使用现代浏览器文件系统访问API打开、编辑并保存本地文件,演示权限流程。
打开.eml文件,查看发件人、主题、正文与附件列表。
设置基础字号后批量转换像素值为em/rem,同时提供反向计算,保证响应式单位准确。
将HTML代码或富文本内容一键转换为简洁的Markdown格式,适合内容迁移与编辑。
上传ZIP,列出包含的文件名,支持在线预览文本类文件内容。
提取当前页面Performance API的navigation、resource与paint数据,可视化展示加载各阶段时长。
上传疑似隐写图片,提取每个像素的最低位,尝试恢复隐藏的文本或数据。
输入URL提取OG标签,模拟Facebook/Twitter/LinkedIn卡片显示效果,优化链接分享。
建立带压缩扩展的 WebSocket 连接,对比压缩前后消息大小。
进行比特、字节、千字节、兆字节、吉字节等数字存储单位的快速换算,支持十进制和二进制前缀。
添加楼层请求,观察电梯在不同调度算法下的移动轨迹和等待时间。
可视化编辑Apache Avro方案,支持字段嵌套与联合类型,实时生成对应的JSON示例数据以供验证。
使用Web NFC API向兼容标签写入文本或URL,并验证读取结果。
支持Code128、EAN等常见一维码的摄像头实时解读或从图片识别,显示编码数字。
计算文本或文件的BLAKE2b/BLAKE2s哈希值,比MD5更安全,比SHA更快,纯前端JS库实现。
输入像素值并设定根字号或视口宽度,一键换算为 rem/em/vw 等相对单位,方便响应式开发。
将文本以每次一个单词且强调中心字母的方式高速显示,训练快速阅读。
上传或粘贴ics日历文件,以可读列表形式展示所有事件、待办事项和提醒。
解析诸如 `application/json; charset=utf-8` 的结构,分离类型、子类型与参数。
使用 NDEF 格式向 NFC 标签写入文本、URL 或自定义记录。
扫描当前页面使用的localStorage、cookie、Canvas指纹属性等,给出隐私评分。
输入第三方域名,生成<link rel='preconnect'>或dns-prefetch等资源提示标签。
拖拽构建阶段与任务,配置触发条件,生成对应的GitLab CI或GitHub Actions YAML代码。
生成由易读单词和数字组成的密码短语,大小写清晰,避免混淆字符,方便语音传达或抄写。