基于Web环境读取LCPL文件及Readium多媒体适配技术问询

我是Readium新手，目前在做一个需要保护EPUB、PDF、音视频等多类型媒体文件的项目，这些文件将通过Web平台访问，听说Readium能满足需求。

已完成的LCP服务器操作 #

1. 使用命令加密EPUB文件：

./lcpencrypt -input "sample1.epub" -lcpsv "http://127.0.0.1:8989" -login "sepuh" -password 'sungkem123'

（注：该操作会通知LCP服务器）

2. 通过curl命令生成许可证：

curl -X POST -u sepuh:sungkem123 --header "Content-Type:application/json" \
-d '{
    "provider": "http://www.imaginaryebookretailer.com",
    "user": {
        "id": "dcb4adeb-fd82-4c16-9849-c269c12f1ae9",
        "email": "user@gtg.com",
        "kode_materi": 31337,
        "encrypted": [
            "email"
        ]
    },
    "encryption": {
        "user_key": {
            "text_hint": "The title of the first book you ever read",
            "hex_value": "4981AA0A50D563040519E9032B5D74367B1D129E239A1BA82667A57333866494"
        }
    },
    "rights": {
        "print": 1,
        "copy": 0
    }
}' \
-o puhsepuh.lcpl -J -v -D - http://127.0.0.1:8989/contents/85a08284-f44d-4094-9c9d-e2ca6fdc7716/licenses

3. 用Thorium测试生成的.lcpl文件，运行正常。

技术疑问 #

1. 如何在Web环境中读取.lcpl文件？
2. 如何使用Readium处理PDF、音视频等其他媒体类型？

解决方案 #

1. Web环境读取.lcpl文件 #

基于Readium的Web组件库实现，核心流程如下：

• 让用户上传本地.lcpl文件，或通过后端接口获取文件二进制流
• 用Readium的LcpService解析许可证内容，若许可证包含密钥提示，需收集用户输入的密钥完成解锁
• 解锁后关联对应的加密媒体文件，调用阅读器组件渲染内容

示例代码（基于Readium JS SDK）：

import { LcpService } from "@readium/lcp";
import { WebPubViewer } from "@readium/webpub-viewer";

// 处理用户上传的lcpl文件
async function loadLcplFile(file) {
  const lcpService = new LcpService();
  // 解析许可证文件
  const licenseBuffer = await file.arrayBuffer();
  const lcpLicense = await lcpService.parseLicense(licenseBuffer);

  // 若需要用户输入密钥（根据许可证中的text_hint）
  const userKey = prompt(`请输入密钥提示：${lcpLicense.encryption.user_key.text_hint}`);
  await lcpService.unlockLicense(lcpLicense, userKey);

  // 初始化阅读器并渲染内容，替换为你的加密媒体文件地址
  const viewer = new WebPubViewer({
    source: "/assets/encrypted-media.epub",
    license: lcpLicense
  });
  viewer.render("#reader-container");
}

// 绑定文件上传事件
document.getElementById("lcpl-upload").addEventListener("change", (e) => {
  const file = e.target.files[0];
  if (file) loadLcplFile(file);
});

注意：确保Web应用与LCP服务器、媒体文件所在域名一致，避免跨域问题；若跨域需配置CORS规则。

2. 处理PDF、音视频等其他媒体类型 #

PDF文件

Readium提供@readium/pdf-viewer组件支持LCP加密PDF，流程与EPUB一致：

• 用lcpencrypt工具加密PDF文件（替换输入文件为PDF即可，命令参数与EPUB相同）
• 生成许可证后，在Web端用LcpService解锁，再初始化PDF阅读器渲染：

import { PdfViewer } from "@readium/pdf-viewer";

// 解锁许可证后初始化PDF阅读器
const pdfViewer = new PdfViewer({
  source: "/assets/encrypted-document.pdf",
  license: lcpLicense
});
pdfViewer.render("#pdf-container");

音视频文件

Readium原生侧重电子书，但可结合LCP媒体扩展实现加密音视频的处理：

1. 加密音视频：使用支持LCP标准的媒体加密工具（或基于LCP加密规范自定义脚本）对音视频文件加密，确保加密后的文件能关联LCP许可证
2. 许可证配置：生成许可证时，在rights字段中添加音视频专属权限（如play次数、有效期等）
3. Web端播放：用LcpService解密媒体流，将解密后的二进制流传入HTML5的<audio>/<video>标签，或结合第三方媒体播放器：

// 解密音视频流示例
async function loadEncryptedMedia(mediaUrl, lcpLicense) {
  const lcpService = new LcpService();
  // 请求加密媒体文件
  const response = await fetch(mediaUrl);
  const encryptedBuffer = await response.arrayBuffer();
  // 解密媒体流
  const decryptedBuffer = await lcpService.decrypt(encryptedBuffer, lcpLicense);
  
  // 转换为Blob并设置到播放器
  const blob = new Blob([decryptedBuffer], { type: "video/mp4" });
  const videoElement = document.getElementById("protected-video");
  videoElement.src = URL.createObjectURL(blob);
  videoElement.play();
}

若需要支持更复杂的媒体权限控制，可扩展Readium的ContentProtectionService自定义解密逻辑。

内容的提问来源于stack exchange，提问作者Roby Firnando Yusuf