HTML5を使用して暗号化されたビデオコンテンツをホストする

少し前に、ハブでW3Cの新しいイニシアチブであるEncrypted Media ExtensionsまたはEMEのみが議論されました。 私たちにとって、何が新しくて面白いかを実際に理解してみましょう。



だから、タスク：インターネットに載せたい面白いビデオ素材がたくさんあるが、みんなのためではなく、善良な人々のためだけに （友人、知人、...、またはお金のために）あるとします。 そのため、Encrypted Media Extensionsイニシアチブでは、クライアント部分に必要なすべてのAPIをHTML標準に追加することを提案しています。 さらに、W3Cの提案は、不運なDRMなどの他の問題にも対処していますが、仮想サービス組織のクライアント側のみに焦点を当てて、現時点では延期します。 前提条件は、ブラウザーがEME仕様をサポートしていることです。つまり、基本的なクリアキーシステムもサポートされています。



そのため、 video



タグとfoo.webm



ファイルがあり、AESアルゴリズムを使用してビデオとオーディオが暗号化されます（この機能はWebM コンテナーでサポートされ、EME作成者はこれを利用しました）。

 <video src="foo.webm" autoplay></video>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この状況で、 foo.webm



を再生しようとすると、EMEブラウザーはコンテンツが暗号化されていることを検出し、停止して復号化キーが与えられるのを待ちます。 一般に、主な使用例は、コンテンツがどのように暗号化されるかに関する情報がコンテナに直接記述されることです。 このオプションを使用します。 ブラウザを停止することに加えて、HTMLMediaElement要素自体でneedkeyイベントを発生させ、アプリケーションはそれを処理し、最終的にキーを提供する必要があります。

 <video src="foo.webm" autoplay onneedkey="handleKeyNeeded(event)"></video>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

handleKeyNeeded()



関数はそれほど複雑ではありません-ブラウザーが必要とするキー識別子を受け取り、サーバーにXHRリクエストを送信し、ブラウザーにanswer =キーを返します（または、必要に応じてキーを返しません-これは既にビジネスロジックです）。 それを少し単純化します-すでにキーを用意しましょう。 使用するクリアキー+ AESスキームの場合、16バイトのUint8Array



ます。 関数は次のようになります。

 function handleKeyNeeded(event) { var video = event.target; var initData = event.initData; //var message = initData; //var xmlhttp = new XMLHttpRequest(); //xmlhttp.open("POST", "http://.../getkey", false); //xmlhttp.send(message); //var key = new Uint8Array(xmlhttp.response); var key = new Uint8Array([0xeb, 0xdd, 0x62, 0xf1, 0x68, 0x14, 0xd2, 0x7b, 0x68, 0xef, 0x12, 0x2a, 0xfc, 0xe4, 0xae, 0x3c]); if (!video.keys) video.keys = video.MediaKeys("org.w3.clearkey"); if (!video.keys) throw "Could not create MediaKeys"; var keySession = video.keys.createSession(mimeType, initData); if (!keySession) throw "Could not create key session"; keySession.update(key); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここの主なキャラクター：

• event.initData
  
  
  
  ：識別子。対応するキーはブラウザに必要です。
• key
  
  
  
  ：復号化キー自体。
• keySession.update(key)
  
  
  
  ：この呼び出しで、ブラウザーは同じキーを受け取ります。 より多くのページから、必須ではありません。

handleKeyNeeded（）の残りの機能コード（MediaKeys、MediaKeySessionクラスなど）に興味がある人は、 Catboサービスを使用して作成された将来のEME仕様の新しい翻訳を使用できます。



したがって、EMEサポート（現在のバージョン2）を備えたブラウザーを使用している場合、 encrypted_media_player_v2.htmlページで、ビデオのケージを歩いているクロクマを見つけます（暗号化されたビデオのサンプルはbear-320x240-av-enc_av.webm



Chromium code）。 この記事の執筆時点では、高い確率でそのようなブラウザはありません。 ただし、ページコードを少し変更しても、バージョン26以降のGoogle ChromeまたはChromiumブラウザを使用してクマを見ることができます（ただし、サポートはそれらにのみあります）： encrypted_media_player.html 。



次に、サンプルを機能させるためにどのような改善が必要かを検討します。 まず、Chrome / Chromiumは、将来のEME仕様のバージョン1をサポートするようになりました。EMEの作成者は、バージョン2を優先して廃止し、後者をオブジェクト指向にしました。 ただし、Chrome / Chromiumでは、これまでのところ最初のバージョンのEMEのみが含まれています。 さらに、多くの場所でwebkit



にプレフィックスを付ける必要があります。 このため、 handleKeyNeeded()



関数は次のように変更されます。

 function handleKeyNeeded(event) { ... var keySystem = "webkit-org.w3.clearkey"; video.webkitGenerateKeyRequest(keySystem, event.initData); //   video.webkitAddKey(keySystem, key, event.initData, null); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、 video



タグのsrc



属性を直接設定する場合、 needkey



イベントを待機しません。 実際、この場合、ビデオはブラウザーで使用されるffmpeg ストック機能によって再生され、コンテナー内の暗号化フラグには注意を払っていません（Chrome / Chromiumでのメディアスタックの実装に関するいくつかの技術的な詳細があります）。 ただし、プレーヤーにコンテンツを提供する別の方法を使用すると、必要な結果が得られます（ needkey



イベントをneedkey



ます）。 このもう1つの方法はMedia Source Extensionsと呼ばれます。 その本質は、JavaScriptコードが後で再生するためにメディアストリームを生成できることです。 実際、これは、WebMやmp4などのデマルチプレクサの代替実装がGoogleのブラウザに登場したことを意味します。 必要なneedkeyイベントを興奮させるように教えられたのは彼らでした。 クマの動画をvideo



タグにダウンロードする適切なコードは次のとおりです。

 function load() { var video = document.getElementById("video"); var mediaFile = "bear-320x240-av-enc_av.webm"; //video.src = mediaFile; var sourceOpened = false; function onSourceOpen(e) { if (sourceOpened) return; sourceOpened = true; var mediaType = 'video/webm; codecs="vorbis, vp8"'; var srcBuffer = mediaSource.addSourceBuffer(mediaType); var xhr = new XMLHttpRequest(); xhr.open('GET', mediaFile); xhr.responseType = 'arraybuffer'; xhr.addEventListener('load', function(e) { srcBuffer.append(new Uint8Array(e.target.response)); mediaSource.endOfStream(); }); xhr.send(); } var mediaSource = new WebKitMediaSource(); mediaSource.addEventListener('webkitsourceopen', onSourceOpen); video.src = window.URL.createObjectURL(mediaSource); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もちろん、このコードは単純な割り当てよりも汎用性が低くなります。

 video.src = "bear-320x240-av-enc_av.webm";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

; さらに、将来のEME仕様ではこのようなトリックは必要ありません（ただし、これまでのところ、操作性を実現することしかできません）。 今後の発展を楽しみにしています。

---

この記事以外では、ビデオを暗号化する方法についての質問が残っています。 このタスクはコンテナ固有です。 たとえば、WebMにはこの機能がありますが、これは他のコンテナーなどには当てはまりません。



EMEテーマのリンク：

Google、Microsoft、NetflixはHTML5にDRMを追加したい

暗号化メディア拡張機能仕様の翻訳/ HTML5暗号化メディアコンテンツ