加密媒体扩展 (EME) 提供了一个 API,可让 Web 应用与内容保护系统进行交互,从而播放经过加密的音频和视频。
EME 旨在让用户能够在任何浏览器中使用相同的应用和加密文件,无论底层保护系统如何。前者由标准化 API 和流程实现,而后者则由通用加密概念实现。
EME 是 HTMLMediaElement
规范的扩展,因此得名。作为“扩展”,意味着浏览器对 EME 的支持并非强制性要求:如果浏览器不支持加密媒体,则无法播放加密媒体,但实现 HTML 规范的兼容性并不要求必须支持 EME。EME 规范:
EME 实现使用以下外部组件:
- 密钥系统:内容保护 (DRM) 机制。除了 Clear Key 之外,EME 本身不会定义密钥系统(详见下文)。
- 内容解密模块 (CDM):一种客户端软件或硬件机制,用于支持播放加密媒体。与密钥系统一样,EME 也不会定义任何 CDM,而是提供一个接口,供应用与可用的 CDM 进行交互。
- 许可 (Key) 服务器:与 CDM 交互,以提供用于解密媒体的密钥。与许可服务器进行协商是应用的责任。
- 打包服务:对媒体进行编码和加密,以便分发/使用。
请注意,使用 EME 的应用会与许可服务器交互以获取密钥以启用解密,但用户身份和身份验证不属于 EME 的一部分。在(可选)对用户进行身份验证后,系统会检索用于启用媒体播放的密钥。Netflix 等服务必须在其 Web 应用中对用户进行身份验证:当用户登录应用时,应用会确定用户的身份和权限。
EME 如何运作?
以下是 EME 组件的交互方式,对应于以下代码示例:
- Web 应用会尝试播放具有一个或多个加密流的音频或视频。
- 浏览器会识别出媒体已加密(请参阅下文,了解具体做法),并触发
encrypted
事件,其中包含从媒体获取的与加密相关的元数据 (initData
)。 - 应用处理
encrypted
事件:- 如果媒体元素未关联任何
MediaKeys
对象,请先使用navigator.requestMediaKeySystemAccess()
选择可用的键系统,以检查可用的键系统,然后通过MediaKeySystemAccess
对象为可用的键系统创建MediaKeys
对象。请注意,MediaKeys 对象的初始化应在第一个encrypted
事件之前完成。获取许可服务器网址由应用完成,与选择可用密钥系统无关。MediaKeys
对象代表用于解密音频或视频元素媒体的所有密钥。它代表一个 CDM 实例,并提供对 CDM 的访问权限,特别是创建用于从许可服务器获取密钥的密钥会话。 - 创建
MediaKeys
对象后,将其分配给媒体元素:setMediaKeys()
会将MediaKeys
对象与 HTMLMediaElement 相关联,以便在播放(即解码)期间使用其键。
- 如果媒体元素未关联任何
- 应用通过对
MediaKeys
调用createSession()
来创建MediaKeySession
。这将创建一个MediaKeySession
,用于表示许可的生命周期及其密钥。 - 应用通过对
MediaKeySession
调用generateRequest()
,将在encrypted
处理脚本中获取的媒体数据传递给 CDM,从而生成许可请求。 - CDM 会触发
message
事件:请求从许可服务器获取密钥。 MediaKeySession
对象会接收message
事件,然后应用会向许可服务器发送消息(例如通过 XHR)。- 应用会接收来自许可服务器的响应,并使用
MediaKeySession
的update()
方法将数据传递给 CDM。 - CDM 使用许可中的密钥解密媒体。可以在与媒体元素关联的
MediaKey
内的任何会话中使用有效键。CDM 将按密钥 ID 编入索引来访问密钥和政策。 - 媒体继续播放。
呼…
请注意,CDM 和许可服务器之间可能会有多条消息,此过程中的所有通信对浏览器和应用而言都是不透明的:虽然应用层可以看到 CDM 发送的是哪种消息,但只有 CDM 和许可服务器才能理解消息。许可请求包含 CDM 有效性(和信任关系)的证明,以及在对生成的许可中的内容密钥进行加密时使用的密钥。
...但 CDM 实际上是做什么的?
EME 实现本身并不提供解密媒体的方法:它只是为 Web 应用提供了一个 API,以便与内容解密模块进行交互。
EME 规范未定义 CDM 的实际用途,CDM 可以处理媒体解码(解压缩)和解密。CDM 功能有几种可能的实现方式,从最不健全到最健全依次为:
- 仅解密,使用常规媒体流水线(例如通过
<video>
元素)启用播放。 - 解密和解码,将视频帧传递给浏览器进行渲染。
- 解密和解码,直接在硬件(例如 GPU)中渲染。
您可以通过多种方式将 CDM 提供给 Web 应用:
- 将 CDM 与浏览器捆绑在一起。
- 单独分发 CDM。
- 将 CDM 构建到操作系统中。
- 在固件中添加 CDM。
- 在硬件中嵌入 CDM。
EME 规范未定义如何提供 CDM,但在所有情况下,浏览器都负责审核和公开 CDM。
EME 不强制要求使用特定的密钥系统;在当前的桌面版和移动版浏览器中,Chrome 支持 Widevine,IE11 支持 PlayReady。
从许可服务器获取密钥
在典型的商业用途中,内容将使用打包服务或工具进行加密和编码。一旦加密媒体可供在线访问,网络客户端就可以从许可服务器获取密钥(包含在许可中),并使用该密钥启用内容的解密和播放。
以下代码(改编自规范示例)显示了应用如何选择合适的密钥系统并从许可服务器获取密钥。
var video = document.querySelector('video');
var config = [{initDataTypes: ['webm'],
videoCapabilities: [{contentType: 'video/webm; codecs="vp9"'}]}];
if (!video.mediaKeys) {
navigator.requestMediaKeySystemAccess('org.w3.clearkey',
config).then(
function(keySystemAccess) {
var promise = keySystemAccess.createMediaKeys();
promise.catch(
console.error.bind(console, 'Unable to create MediaKeys')
);
promise.then(
function(createdMediaKeys) {
return video.setMediaKeys(createdMediaKeys);
}
).catch(
console.error.bind(console, 'Unable to set MediaKeys')
);
promise.then(
function(createdMediaKeys) {
var initData = new Uint8Array([...]);
var keySession = createdMediaKeys.createSession();
keySession.addEventListener('message', handleMessage,
false);
return keySession.generateRequest('webm', initData);
}
).catch(
console.error.bind(console,
'Unable to create or initialize key session')
);
}
);
}
function handleMessage(event) {
var keySession = event.target;
var license = new Uint8Array([...]);
keySession.update(license).catch(
console.error.bind(console, 'update() failed')
);
}
通用加密
借助通用加密解决方案,内容提供商可以针对每个容器/编解码器对其内容进行一次加密和打包,并将其与各种密钥系统、CDM 和客户端(即任何支持通用加密的 CDM)搭配使用。例如,使用 Playready 打包的视频可以使用从 Widevine 许可服务器获取密钥的 Widevine CDM 在浏览器中播放。
这与旧版解决方案形成鲜明对比,后者只能与完整的垂直堆栈搭配使用,其中包括一个通常还包含应用运行时的单个客户端。
通用加密 (CENC) 是一种 ISO 标准,用于定义 ISO BMFF 的保护方案;类似的概念也适用于 WebM。
清除键
虽然 EME 未定义 DRM 功能,但规范目前规定,所有支持 EME 的浏览器都必须实现 Clear Key。借助此系统,您可以使用密钥对媒体进行加密,然后只需提供该密钥即可播放媒体。Clear Key 可以内置到浏览器中:无需使用单独的解密模块。
虽然清除键不太可能用于多种类型的商业内容,但可以在支持 EME 的所有浏览器中实现完全互操作。它还非常适合测试 EME 实现和使用 EME 的应用,而无需从许可服务器请求内容密钥。您可以访问 simpl.info/ck,查看一个简单的 Clear Key 示例。下面是该代码的演示,与上述步骤类似,但没有与许可服务器交互。
// Define a key: hardcoded in this example
// – this corresponds to the key used for encryption
var KEY = new Uint8Array([
0xeb, 0xdd, 0x62, 0xf1, 0x68, 0x14, 0xd2, 0x7b,
0x68, 0xef, 0x12, 0x2a, 0xfc, 0xe4, 0xae, 0x3c
]);
var config = [{
initDataTypes: ['webm'],
videoCapabilities: [{
contentType: 'video/webm; codecs="vp8"'
}]
}];
var video = document.querySelector('video');
video.addEventListener('encrypted', handleEncrypted, false);
navigator.requestMediaKeySystemAccess('org.w3.clearkey', config).then(
function(keySystemAccess) {
return keySystemAccess.createMediaKeys();
}
).then(
function(createdMediaKeys) {
return video.setMediaKeys(createdMediaKeys);
}
).catch(
function(error) {
console.error('Failed to set up MediaKeys', error);
}
);
function handleEncrypted(event) {
var session = video.mediaKeys.createSession();
session.addEventListener('message', handleMessage, false);
session.generateRequest(event.initDataType, event.initData).catch(
function(error) {
console.error('Failed to generate a license request', error);
}
);
}
function handleMessage(event) {
// If you had a license server, you would make an asynchronous XMLHttpRequest
// with event.message as the body. The response from the server, as a
// Uint8Array, would then be passed to session.update().
// Instead, we will generate the license synchronously on the client, using
// the hard-coded KEY at the top.
var license = generateLicense(event.message);
var session = event.target;
session.update(license).catch(
function(error) {
console.error('Failed to update the session', error);
}
);
}
// Convert Uint8Array into base64 using base64url alphabet, without padding.
function toBase64(u8arr) {
return btoa(String.fromCharCode.apply(null, u8arr)).
replace(/\+/g, '-').replace(/\//g, '_').replace(/=*$/, '');
}
// This takes the place of a license server.
// kids is an array of base64-encoded key IDs
// keys is an array of base64-encoded keys
function generateLicense(message) {
// Parse the clearkey license request.
var request = JSON.parse(new TextDecoder().decode(message));
// We only know one key, so there should only be one key ID.
// A real license server could easily serve multiple keys.
console.assert(request.kids.length === 1);
var keyObj = {
kty: 'oct',
alg: 'A128KW',
kid: request.kids[0],
k: toBase64(KEY)
};
return new TextEncoder().encode(JSON.stringify({
keys: [keyObj]
}));
}
如需测试此代码,您需要播放加密视频。如需对 WebM 视频进行加密以便与 Clear Key 搭配使用,请按照 webm_crypt 说明操作。还提供商业服务(至少针对 ISO BMFF/MP4),其他解决方案正在开发中。
相关技术 1
Media Source Extensions (MSE)
HTMLMediaElement 是一种美观的生物。
只需提供 src 网址,即可加载、解码和播放媒体:
<video src='foo.webm'></video>
Media Source API 是 HTMLMediaElement 的扩展,可让 JavaScript 从视频“分块”构建用于播放的流,从而对媒体来源进行更精细的控制。这反过来又支持自适应串流和时间推移等技术。
为什么 MSE 对 EME 很重要?因为除了分发受保护内容以外,商业内容提供方还必须能够根据网络条件和其他要求调整内容传送。例如,Netflix 会根据网络状况动态更改在线播放比特率。EME 适用于播放 MSE 实现提供的媒体流,就像适用于通过 src
属性提供的媒体一样。
如何分块和播放以不同比特率编码的媒体?请参阅下面的“DASH”部分。
您可以访问 simpl.info/mse 查看 MSE 的运作方式;在本例中,我们使用 File API 将 WebM 视频拆分为五个分块。在正式版应用中,系统会通过 Ajax 检索视频分块。
首先创建一个 SourceBuffer:
var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
然后,使用 appendBuffer() 方法附加每个分块,将整部电影“串流”到视频元素:
reader.onload = function (e) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
if (i === NUM_CHUNKS - 1) {
mediaSource.endOfStream();
} else {
if (video.paused) {
// start playing after first chunk is appended
video.play();
}
readChunk_(++i);
}
};
如需详细了解 MSE,请参阅 HTML5 Rocks 文章。
相关技术 #2
基于 HTTP 的动态自适应流式传输 (DASH)
多设备、多平台、移动 - 无论您叫什么,网络往往都是在不断变化的连接条件下经历的。动态自适应传送对于应对多设备环境中的带宽限制和变异至关重要。
DASH(又称 MPEG-DASH)旨在为流式传输和下载实现最佳的媒体传送效果。其他一些技术也采用类似的方法(例如 Apple 的 HTTP Live Streaming (HLS) 和 Microsoft 的 Smooth Streaming),但 DASH 是唯一一种基于开放标准的通过 HTTP 实现自适应码率流式传输的方法。YouTube 等网站已经在使用 DASH。
这与 EME 和 MSE 有什么关系?基于 MSE 的 DASH 实现可以解析清单,以适当的比特率下载视频片段,并在视频元素需要时(使用现有的 HTTP 基础架构)将其提供给视频元素。
换句话说,DASH 使商业内容提供方能够对受保护的内容进行自适应流式传输。
DASH 的功能与其名称相符:
- 动态:根据不断变化的条件做出响应。
- 自适应:可自行调整以提供适当的音频或视频比特率。
- 在线播放:允许在线播放和下载。
- HTTP:利用 HTTP 的优势实现内容传送,而无需传统流式传输服务器的缺点。
BBC 已开始使用 DASH 提供测试直播:
总结:
- 媒体以不同的比特率编码。
- 不同比特率的文件通过 HTTP 服务器提供。
- 客户端 Web 应用选择使用 DASH 检索和播放的码率。
在视频分段过程中,系统会以编程方式构建一个名为媒体呈现描述 (MPD) 的 XML 清单。它描述了适配集和表示法,以及时长和网址。MPD 如下所示:
<MPD xmlns="urn:mpeg:DASH:schema:MPD:2011" mediaPresentationDuration="PT0H3M1.63S" minBufferTime="PT1.5S" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"
type="static">
<Period duration="PT0H3M1.63S" start="PT0S">
<AdaptationSet>
<ContentComponent contentType="video" id="1" />
<Representation bandwidth="4190760" codecs="avc1.640028" height="1080" id="1" mimeType="video/mp4" width="1920">
<BaseURL>car-20120827-89.mp4</BaseURL>
<SegmentBase indexRange="674-1149">
<Initialization range="0-673" />
</SegmentBase>
</Representation>
<Representation bandwidth="2073921" codecs="avc1.4d401f" height="720" id="2" mimeType="video/mp4" width="1280">
<BaseURL>car-20120827-88.mp4</BaseURL>
<SegmentBase indexRange="708-1183">
<Initialization range="0-707" />
</SegmentBase>
</Representation>
…
</AdaptationSet>
</Period>
</MPD>
(此 XML 来自用于 YouTube DASH 演示播放器的 .mpd 文件)
根据 DASH 规范,MPD 文件理论上可以用作视频的 src
。不过,为了让 Web 开发者能够更灵活地使用 DASH,浏览器供应商选择将 DASH 支持交给使用 MSE 的 JavaScript 库(例如 dash.js)。在 JavaScript 中实现 DASH 可让自适应算法不断演变,而无需更新浏览器。使用 MSE 还允许您在不更改浏览器的情况下尝试其他清单格式和提交机制。Google 的 Shaka Player 实现了支持 EME 的 DASH 客户端。
Mozilla 开发者网络提供了相关说明,介绍了如何使用 WebM 工具和 FFmpeg 对视频进行分段并构建 MPD。
总结
通过网络提供付费视频和音频的速度正在大幅增长。似乎每款新设备(无论是平板电脑、游戏机、联网电视还是机顶盒)都能通过 HTTP 从主要内容提供商流式传输媒体。超过 85% 的移动浏览器和桌面浏览器现在都支持 <video>
和 <audio>
,思科估计到 2017 年,视频将占全球消费者互联网流量的 80 到 90%。在这种情况下,随着浏览器供应商缩减对大多数媒体插件依赖的 API 的支持,浏览器对受保护内容分发的支持可能会变得越来越重要。
深入阅读
规范和标准
- EME 规范:最新编辑草稿<
- 通用加密 (CENC)
- 媒体来源扩展
- DASH standard(DASH 标准)(没错,它是一个 PDF)
- DASH 标准简介
文章
- DTG 在线讲座(部分已废弃)
- 什么是 EME?,作者:Henri Sivonen
- “HTML5 Rocks 媒体源扩展”一文
- MPEG-DASH 测试串流:BBC 研发博文