HTML5 का उपयोग कर एन्क्रिप्टेड वीडियो सामग्री की मेजबानी

ऐसा नहीं है कि बहुत पहले W3C की एक नई पहल हब - एनक्रिप्टेड मीडिया एक्सटेंशन्स या सिर्फ EME पर चर्चा की गई थी। आइए हम व्यवहार में समझने की कोशिश करें कि हमारे लिए क्या नया और दिलचस्प है।

तो, कार्य: मान लीजिए कि दिलचस्प वीडियो सामग्री का एक गुच्छा है जिसे आप इंटरनेट पर रखना चाहते हैं, लेकिन सभी के लिए नहीं, बल्कि केवल अच्छे लोगों के लिए (दोस्तों, परिचितों के लिए ... या सिर्फ पैसे के लिए)। तो, एनक्रिप्टेड मीडिया एक्सटेंशन्स पहल केवल HTML मानक के लिए क्लाइंट भाग के लिए सभी आवश्यक एपीआई जोड़ने का सुझाव देती है। इसके अलावा, डब्ल्यू 3 सी प्रस्ताव अन्य मुद्दों को भी संबोधित करता है, जैसे कि बीमार डीआरएम, लेकिन हम उन्हें अभी के लिए स्थगित कर देंगे, केवल हमारे काल्पनिक सेवा संगठन के ग्राहक पक्ष पर ध्यान केंद्रित करते हुए। एक शर्त यह है कि ब्राउज़र ईएमई विनिर्देश का समर्थन करता है, जिसका अर्थ है कि मूल स्पष्ट कुंजी प्रणाली भी समर्थित है।

तो, एक video टैग और एक फ़ाइल foo.webm , जिसमें एईएस एल्गोरिथ्म का उपयोग करके वीडियो और ऑडियो एन्क्रिप्ट किए गए हैं (यह सुविधा वेबएम कंटेनर में समर्थित है, और ईएमई लेखकों ने इसका फायदा उठाया है):

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

इस स्थिति में, EME ब्राउज़र, जब foo.webm को चलाने की कोशिश foo.webm पता लगाता है कि सामग्री एन्क्रिप्ट की गई है, रुक जाती है और इसके लिए डिक्रिप्शन कुंजी दी जाती है। सामान्य तौर पर, मुख्य उपयोग मामला यह है कि सामग्री को कैसे एन्क्रिप्ट किया जाता है, इसके बारे में जानकारी सीधे कंटेनर में वर्णित है; हम इस विकल्प का उपयोग करेंगे। ब्राउज़र को रोकने के अलावा, यह HTMLMediaElement तत्व पर भी नीडिंक ईवेंट को बढ़ाएगा, और एप्लिकेशन को इसे प्रोसेस करना चाहिए और अंततः, कुंजी प्रदान करें:

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

handleKeyNeeded() फ़ंक्शन बहुत जटिल नहीं होगा - यह उस महत्वपूर्ण पहचानकर्ता को प्राप्त करता है जिसे ब्राउज़र की आवश्यकता होती है, फिर सर्वर को XHR अनुरोध करता है और उत्तर = ब्राउज़र को कुंजी वापस देता है (या यदि स्थिति की आवश्यकता हो तो इसे वापस नहीं देता - यह व्यवसाय तर्क है)। हम इसे थोड़ा सरल करेंगे - पहले से ही हमारे पास कुंजी है; हमारे द्वारा उपयोग की जाने वाली क्लियर की + 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) : इस कॉल के साथ, ब्राउज़र एक ही कुंजी प्राप्त करता है; पृष्ठ से अधिक और आवश्यक नहीं है।

जो लोग हैंडल के बाकी हिस्सों में रुचि रखते हैं () फ़ंक्शन कोड (MediaKeys, MediaKeySession क्लासेस, आदि) भविष्य की ईएमई विनिर्देश के ताजा अनुवाद का उपयोग कर सकते हैं, जो कैटबो सेवा का उपयोग करके बनाया गया है।

इस प्रकार, यदि हमारे पास EME समर्थन (वर्तमान संस्करण 2) के साथ एक ब्राउज़र था, तो एन्क्रिप्टेड_मीडिया_प्लेयर_ bear-320x240-av-enc_av.webm पृष्ठ पर, हम एक काले भालू को एक वीडियो पर पिंजरे के चारों ओर घूमते हुए पाएंगे ( bear-320x240-av-enc_av.webm नमूना एन्क्रिप्टेड वीडियो से लिया गया था। क्रोमियम कोड)। इस लेखन के समय, उच्च संभावना वाला ऐसा कोई ब्राउज़र नहीं है। हालाँकि, यदि आप पृष्ठ कोड को थोड़ा संशोधित करते हैं, तो आप अभी भी Google क्रोम या क्रोमियम ब्राउज़र संस्करण 26 या उच्चतर का उपयोग करके भालू को देख सकते हैं (जबकि समर्थन केवल उन्हीं में पाया जाता है): एन्क्रिप्ट किया गया_media_player.html ।

अगला, हम इस बात पर विचार करेंगे कि हमारे उदाहरण के काम करने के लिए क्या सुधार किए जाने थे। पहले, क्रोम / क्रोमियम अब भविष्य के ईएमई विनिर्देश के संस्करण 1 का समर्थन करता है, जिसे ईएमई लेखकों ने पहले ही संस्करण 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 स्टॉक कार्यक्षमता द्वारा चलाया जाता है, जिसका उपयोग ब्राउज़र में किया जाता है, और यह कंटेनर में किसी भी एन्क्रिप्शन झंडे पर ध्यान नहीं देता है (क्रोम (क्रोमियम में मीडिया स्टैक के कार्यान्वयन के बारे में कुछ तकनीकी विवरण हैं)। लेकिन अगर हम खिलाड़ी को सामग्री प्रदान करने के दूसरे तरीके का उपयोग करते हैं, तो हमें वह परिणाम मिलेगा जिसकी हमें ज़रूरत है ( needkey घटना को बढ़ाते हुए)। इस अन्य विधि को मीडिया स्रोत एक्सटेंशन कहा जाता है; इसका सार यह है कि जावास्क्रिप्ट कोड को बाद के प्लेबैक के लिए मीडिया स्ट्रीम बनाने की अनुमति है। वास्तव में, इसका मतलब यह है कि वेबम और mp4 जैसे डेमोक्सरों का एक वैकल्पिक कार्यान्वयन, Google के ब्राउज़रों में दिखाई दिया है; यह वह था जिसे हमें जरूरत पड़ी घटना को उत्तेजित करने के लिए सिखाया गया था। हमारे 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"; 

; इसके अलावा, भविष्य के ईएमई विनिर्देश को इस तरह के ट्रिक्स की आवश्यकता नहीं है (लेकिन अभी तक यह केवल संचालन क्षमता प्राप्त करना संभव है)। हम आगे के घटनाक्रम के लिए तत्पर हैं।

---

इस लेख के बाहर, सवाल यह है कि वीडियो को कैसे एन्क्रिप्ट किया जाए। यह कार्य कंटेनर-विशिष्ट है; उदाहरण के लिए, WebM में यह क्षमता है, लेकिन कुछ अन्य कंटेनरों आदि के लिए यह सच नहीं है।

ईएमई विषय पर लिंक:
Google, Microsoft और Netflix DRM5 को HTML5 में जोड़ना चाहते हैं
एन्क्रिप्टेड मीडिया एक्सटेंशन विशिष्टता अनुवाद / HTML5 एन्क्रिप्टेड मीडिया सामग्री