加密邮件 eme_如何在浏览器中使用加密的媒体扩展名eme播放mpeg dash加密的受保护内容...

加密邮件 eme

Long title right? Let’s break it and go step by step.

长标题吧？ 让我们打破它，一步一步走。

How do you play a normal mp4 media in browser?

如何在浏览器中播放普通的mp4媒体？

All you need to do in an HTML document is to add the video URL to the element by using the <source> element.

在HTML文档中，您所需要做的就是使用<source>元素将视频URL添加到该元素。

Let’s see a simple example.

让我们看一个简单的例子。

pretty simple right? Let’s see how you can play MPEG-DASH. Ah, wait, MPEG-DASH?

很简单吧？ 让我们看看如何播放MPEG-DASH。 啊，等等，MPEG-DASH？

What is MPEG-DASH?

什么是MPEG-DASH？

Adaptive bitrate streaming over HTTP

通过HTTP的自适应比特率流

MPEG DASH (Dynamic Adaptive Streaming over HTTP) is a streaming standard by MPEG that enables streaming of media content over the Internet delivered from conventional HTTP web servers.

MPEG DASH (HTTP上的动态自适应流)是MPEG的流标准，它可以通过Internet传输从常规HTTP Web服务器提供的媒体内容。

It provides interoperability between various servers and devices i.e this is one such common video streaming which supports all the formats and plays in various devices.

它提供了各种服务器和设备之间的互操作性，即这是一种常见的视频流，它支持所有格式并可以在各种设备中播放。

How does it work?

它是如何工作的？

It works by breaking the content into a sequence of small segments, which are served over HTTP.

它通过将内容分成一系列小片段来工作，这些小片段通过HTTP进行服务。

In our example, we could split the .mp4 file into small playable chunk of content (for audio, video or captions) with a length of usually few seconds. This is what ‘streaming’ is where the chunks are served constantly so that a device can start displaying the data without having to download the entire video file before playing it.

在我们的示例中，我们可以将.mp4文件拆分为可播放的小块内容(用于音频，视频或字幕)，长度通常为几秒钟。 这就是所谓的“ 流式传输 ”，在其中不断地提供块，以便设备可以开始显示数据，而无需在播放之前下载整个视频文件。

we could also have alternative segments encoded at different bit rates. Client monitors the network bandwidth and decides how to adapt to the available bandwidth by fetching segments of different alternatives. This is what makes it ‘adaptive’ and hence ‘dynamic’.

我们还可以使用以不同比特率编码的替代段。 客户端监视网络带宽，并通过获取不同替代方案的段来决定如何适应可用带宽。 这就是使其“具有适应性 ”并因此具有“ 动态性 ”的原因。

You could read more about MPEG-DASH here: https://bitmovin.com/dynamic-adaptive-streaming-http-mpeg-dash/

您可以在此处阅读有关MPEG-DASH的更多信息： https : //bitmovin.com/dynamic-adaptive-streaming-http-mpeg-dash/

Let’s see how we can generate a DASH content : We have a regular .mp4 file, we will use Bento4 tools for generating DASH content from it. The first thing we will need to do is creating a fragmented version of our regular mp4 file. (more about mp4fragment here: https://www.bento4.com/documentation/mp4fragment/)

让我们看看如何生成DASH内容 ：我们有一个常规的.mp4文件，我们将使用Bento4工具从中生成DASH内容。 我们需要做的第一件事是创建常规mp4文件的片段版本。 (有关mp4fragment的更多信息，请访问： https ://www.bento4.com/documentation/mp4fragment/)

mp4fragment video.mp4 video-fragmented.mp4

Now, packaging it as a MPEG-DASH stream (more about mp4dash here : https://www.bento4.com/documentation/mp4dash/)

现在，将其打包为MPEG-DASH流(有关mp4dash的更多信息，请访问： https ://www.bento4.com/documentation/mp4dash/)

mp4dash -o output video-fragmented.mp4

You would now see a ‘output’ folder structure something like this :

您现在将看到一个“输出”文件夹结构，如下所示：

audio
   |---segments folder
video
   |---segments folder
stream.mpd 

you could see there is .mpd file generated. MPD (Media Presentation Description) describes a manifest of the available content, its various alternatives, their URL addresses, and other characteristics. To play the content, you need to tell player where to find individual segments — that is the purpose of manifest and that’s what the browser needs.

您会看到生成了.mpd文件。 MPD(媒体演示说明)描述了可用内容的清单，其各种替代方法，它们的URL地址以及其他特征。 要播放内容，您需要告诉播放器在哪里可以找到各个片段–这是清单的目的，也是浏览器所需要的。

How to play MPEG-DASH ?

如何播放MPEG-DASH？

Now you would think, you could give URL of the mpd file in the <video> tag and you are good to go. NO, that’s not it.Browsers do not have native support for MPEG-DASH. You would need JavaScript libraries to play DASH streaming. There are open source MPEG-DASH player libraries available for it.

现在您会认为，可以在<video>标记中提供mpd文件的URL，您可以使用了。 不，不是这样。浏览器没有对MPEG-DASH的本机支持。 您将需要JavaScript库才能播放DASH流。 有可用的开源MPEG-DASH播放器库。

• dash.js: Official reference client implementation

  dash.js ：官方参考客户端实现

• Shaka Player: Google’s player library

  Shaka Player ：Google的播放器库

There might also be some other libraries to implement DASH playback in browsers. Most of these player libraries require MSE support in the browser which I think is the case anyways in many latest browsers today.

可能还有其他一些库可以在浏览器中实现DASH播放。 这些播放器库中的大多数都需要浏览器中的MSE支持，我认为当今许多最新浏览器中都存在这种情况。

We are going to be using dash.js library here to play the MPEG-DASH video in the browser.With that, I think it would be good to have a look at https://docs.microsoft.com/en-us/azure/media-services/previous/media-services-embed-mpeg-dash-in-html5 which has explained step by step process on how to do it.

我们将在这里使用dash.js库在浏览器中播放MPEG-DASH视频，因此，我认为最好看看https://docs.microsoft.com/zh-cn/ azure / media-services / previous / media-services-embed-mpeg-dash-in-html5已逐步说明了操作方法。

If you read through the above link, you would know that you just need to add ‘dash.all.js’ file in your .html file and a function which attaches video element to Dash player.

如果您仔细阅读了上面的链接，您会知道只需要在.html文件中添加“ dash.all.js”文件和一个将视频元素附加到Dash Player的函数即可。

Now the html file would look something like this :

现在，html文件将如下所示：

Point your browser at this .html file and click play , you are done!

将您的浏览器指向这个.html文件，然后单击play，您就完成了！

NOTE : Make sure you are not just pointing your browser at this .html in your local folder, but start a web server to host your directory that has this .html file, because, DASH is to be delivered over HTTP.

注意 ：确保您不仅将浏览器指向本地文件夹中的.html，而且还要启动Web服务器来托管具有此.html文件的目录，因为DASH是通过HTTP传递的。

You can go to the directory from your command prompt and run :python -m SimpleHTTPServer (python2)orpython3 -m http.server (python3) which usually hosts directory listing at http://localhost:8000

您可以从命令提示符下转到目录并运行： python -m SimpleHTTPServer(python2)或python3 -m http.server (python3)，通常在http://localhost:8000承载目录列表

We are now done with ‘How to play MPEG-DASH’ from the title, let’s get into Encryption and EME.

现在，我们已经完成标题中的“如何播放MPEG-DASH”，让我们进入加密和EME。

加密和EME： (Encryption and EME :)

Let’s first try to understand what EME is and how it works!

让我们首先尝试了解什么是EME及其工作原理！

There are other better resources which would explain about EME in better way. https://developers.google.com/web/fundamentals/media/eme or the EME specification itself : https://www.w3.org/TR/encrypted-media/

还有其他更好的资源可以更好地解释EME。 https://developers.google.com/web/fundamentals/media/eme或EME规范本身：h ttps：//www.w3.org/TR/encrypted-media/

I would anyways try to put it in a simpler way.

无论如何，我都会尝试以一种更简单的方式进行说明。

what is EME and how it works?

什么是EME及其运作方式？

You have this Content Decryption Module (CDM): A client component native to browser that decrypts the media.

您具有以下内容解密模块(CDM)：浏览器本地的客户端组件，用于解密媒体。

But, CDM needs the license/key to decrypt and it does not directly make any network request to the remote license server which holds the content keys but the request for the license is communicated by the JavaScript application, which uses the EME API to make the network requests.

但是，CDM需要许可证/密钥来解密，并且它不会直接向持有内容密钥的远程许可证服务器发出任何网络请求，而是由JavaScript应用程序传达对许可证的请求，JavaScript应用程序使用EME API进行网络请求。

To the JS application using EME, the messages communicated between CDM and license server are opaque, and any tampering of the messages can be easily detected by the DRM system.

对于使用EME的JS应用程序，CDM和许可证服务器之间传递的消息是不透明的，并且DRM系统可以轻松检测到对消息的任何篡改。

So, the Information flow would be,

因此，信息流将是

1. The application has to figure out what key system to use when it finds that the content is encrypted(navigator.requestMediaKeySystemAccess() to find the available Key System). Key System refers to the specific Content Decryption Module schema

   当发现内容已加密时，应用程序必须找出要使用的密钥系统( navigator.requestMediaKeySystemAccess()来找到可用的密钥系统)。 密钥系统是指特定的内容解密模块架构

2. Initialize the keys : Create MediaKeys object and associate it with HTMLMediaElement

   初始化密钥：创建MediaKeys对象并将其与HTMLMediaElement关联

3. Create a session during which the keys are valid (createMediaKeySession object on the MediaKeys object).

   创建(在此期间，键有效会话createMediaKeySession上对象MediaKeys对象)。

4. A request is sent to the CDM to generate the license request (call the generateRequest() method on the MediaKeySession object, with the initialization data sent in the metadata of the encrypted media file.

   将请求发送到CDM以生成许可请求(调用MediaKeySession对象上的generateRequest()方法，并在加密的媒体文件的元数据中发送初始化数据。

5. The CDM sends license request to the application.
   CDM将许可证请求发送到应用程序。
6. The application send this request to the license server and gets the license.
   应用程序将此请求发送到许可证服务器并获得许可证。

7. Application forwards the license to the CDM with the update method on the MediaKeySession object and then the media is played.

   应用程序使用MediaKeySession对象上的update方法将许可证转发给CDM，然后播放媒体。

Demo with clearkey keySystem

带有clearkey keySystem的演示

Now you understand that EME API does not define any CDM, it does not define key server, it just mediates information flow between those.

现在您了解了EME API并没有定义任何CDM，也没有定义密钥服务器，它只是中介了两者之间的信息流。

Having said that, how can I test the EME APIs in my browser if I do not have license/key server or a decryption module? Well, Although EME does not define DRM functionality, the spec currently mandates that all browsers supporting EME must implement Clear Key (https://www.w3.org/TR/encrypted-media/#common-key-systems).

话虽如此，如果我没有许可证/密钥服务器或解密模块，如何在浏览器中测试EME API？ 好吧，尽管EME没有定义DRM功能，但当前规范要求所有支持EME的浏览器必须实现清除密钥( https://www.w3.org/TR/encrypted-media/#common-key-systems )。

Using this system, media can be encrypted with a key and then played back simply by providing that key. Clear Key can be built into the browser: it does not require the use of a separate decryption module.EME spec also defines the format of license request and license response for Clear key. So, we could write code to check the EME API works the way we mentioned earlier.

使用此系统，可以使用密钥对媒体进行加密，然后只需提供该密钥即可进行播放。 清除密钥可以内置到浏览器中：它不需要使用单独的解密模块。EME规范还定义了清除密钥的许可证请求和许可证响应的格式。 因此，我们可以编写代码来检查EME API是否按照我们前面提到的方式工作。

This is not the case with other key systems , eg: Google’s widevine for which we need to have the widevine license/key server and widevine CDM.

其他关键系统则不是这样，例如：Google的Widevine，我们需要拥有Widevine许可证/密钥服务器和Widevine CDM。

Encrypting the media with Clear key :

使用清除密钥加密媒体：

There is already a page from Dash-Industry-Forum explaining it.

Dash-Industry-Forum已经有一页对此进行了解释。

You could have a look at https://github.com/Dash-Industry-Forum/dash.js/wiki/Generate-MPEG-DASH-content-encrypted-with-MPEG-CENC-ClearKey to see how it’s done.

您可以查看https://github.com/Dash-Industry-Forum/dash.js/wiki/Generate-MPEG-DASH-content-encrypted-with-MPEG-CENC-ClearKey来了解它是如何完成的。

Playing the Clear key encrypted media :

播放清除密钥加密的媒体：

We already know that media is Clear Key encrypted, so we can get access to Key system and initialize the keys (i.e the first 2 steps mentioned in the Information flow earlier)

我们已经知道媒体是用Clear Key加密的，因此我们可以访问Key系统并初始化密钥(即前面信息流中提到的前两个步骤)

Now, when the media element raises an ‘encrypted’ event, application can handle the event with below code (handleEncrypted() function) to update the session with license so that the media can be decrypted (Steps from 3 to 7 mentioned in the Information flow earlier)

现在，当媒体元素引发“加密”事件时，应用程序可以使用以下代码(handleEncrypted()函数)处理该事件，以使用许可证更新会话，以便可以解密媒体(信息中提到的步骤3至7)提前流动)

Adding everything up, you could look at https://htmlpreview.github.io/?https://github.com/sanjuc/clear-key/blob/master/index.html for demo of playback of Clear Key encrypted media. You could look at the console warn messages to see the sequence of events in the process.Also, the source code is at https://github.com/sanjuc/clear-key.

添加所有内容后，您可以查看https://htmlpreview.github.io/?https://github.com/sanjuc/clear-key/blob/master/index.html ，以了解Clear Key加密媒体的播放示例。 您可以查看控制台警告消息以了解流程中的事件顺序。此外，源代码位于https://github.com/sanjuc/clear-key 。

Thanks for reading :)

谢谢阅读 ：)

翻译自: https://medium.com/swlh/how-to-play-mpeg-dash-encrypted-protected-content-using-encrypted-media-extensions-eme-in-browser-234f49fdc706

加密邮件 eme