หน้านี้ได้รับการแปลโดย Cloud Translation API

EME คืออะไร

Sam Dutton

ส่วนขยายสื่อที่เข้ารหัสมี API ที่ช่วยให้เว็บแอปพลิเคชันโต้ตอบกับระบบป้องกันเนื้อหาเพื่ออนุญาตการเล่นเสียงและวิดีโอที่เข้ารหัสได้

EME ออกแบบมาเพื่อทำให้ใช้แอปและไฟล์ที่เข้ารหัสเดียวกันในเบราว์เซอร์ใดก็ได้ ไม่ว่าจะใช้ระบบป้องกันพื้นฐานแบบใดก็ตาม การทำงานแบบแรกเกิดขึ้นได้โดยอาศัย API มาตรฐานและขั้นตอนการดำเนินการ ส่วนการดำเนินการอย่างหลังเกิดขึ้นได้ด้วยแนวคิดของ Common Encryption

EME เป็นส่วนขยายของข้อกำหนด HTMLMediaElement จึงเป็นที่มาของชื่อ การเป็น "ส่วนขยาย" หมายความว่าเบราว์เซอร์ไม่จำเป็นต้องรองรับ EME หากเบราว์เซอร์ไม่รองรับสื่อที่เข้ารหัส เบราว์เซอร์จะเล่นสื่อที่เข้ารหัสไม่ได้ แต่ไม่จำเป็นต้องใช้ EME เพื่อให้เป็นไปตามข้อกำหนดของข้อกำหนด HTML จากข้อมูลจำเพาะ EME

ข้อเสนอนี้ขยาย HTMLMediaElement โดยให้ API เพื่อควบคุมการเล่นเนื้อหาที่ได้รับการคุ้มครอง

API รองรับ Use Case ตั้งแต่การถอดรหัสคีย์ที่ชัดเจนแบบง่ายไปจนถึงวิดีโอที่มีมูลค่าสูง (เมื่อใช้ User Agent ที่เหมาะสม) แอปพลิเคชันจะควบคุมการแลกเปลี่ยนใบอนุญาต/คีย์ ซึ่งช่วยให้การพัฒนาแอปพลิเคชันการเล่นที่มีประสิทธิภาพซึ่งรองรับเทคโนโลยีการถอดรหัสและการป้องกันเนื้อหาที่หลากหลายเป็นไปได้

ข้อกำหนดนี้ไม่ได้กำหนดระบบการป้องกันเนื้อหาหรือระบบการจัดการสิทธิ์ดิจิทัล แต่กําหนด API ทั่วไปที่อาจใช้เพื่อค้นหา เลือก และโต้ตอบกับระบบดังกล่าว รวมถึงระบบการเข้ารหัสเนื้อหาที่เรียบง่ายกว่า การใช้การจัดการสิทธิ์ดิจิทัลไม่จำเป็นต่อการปฏิบัติตามข้อกำหนดนี้ เฉพาะระบบ Clear Key เท่านั้นที่ต้องนำมาใช้งานเป็นพื้นฐานทั่วไป

API ทั่วไปรองรับชุดความสามารถการเข้ารหัสเนื้อหาแบบง่าย โดยปล่อยให้ผู้เขียนหน้าเว็บเป็นผู้กำหนดฟังก์ชันการทำงานของแอปพลิเคชัน เช่น การตรวจสอบสิทธิ์และการให้สิทธิ์ ซึ่งทำได้โดยกำหนดให้หน้าเว็บเป็นสื่อกลางในการรับส่งข้อความเฉพาะระบบป้องกันเนื้อหาแทนที่จะใช้การสื่อสารนอกแบนด์ระหว่างระบบการเข้ารหัสกับใบอนุญาตหรือเซิร์ฟเวอร์อื่น

การติดตั้งใช้งาน EME จะใช้คอมโพเนนต์ภายนอกต่อไปนี้

ระบบคีย์: กลไกการป้องกันเนื้อหา (DRM) EME ไม่ได้กำหนดระบบคีย์เอง ยกเว้นคีย์ที่ชัดเจน (ดูข้อมูลเพิ่มเติมด้านล่าง)
Content Decryption Module (CDM): กลไกซอฟต์แวร์หรือฮาร์ดแวร์ฝั่งไคลเอ็นต์ที่ช่วยให้เล่นสื่อที่เข้ารหัสได้ เช่นเดียวกับระบบคีย์ EME ไม่ได้กำหนด CDM ใดๆ แต่มีอินเทอร์เฟซสำหรับแอปพลิเคชันเพื่อโต้ตอบกับ CDM ที่มี
เซิร์ฟเวอร์ใบอนุญาต (คีย์): โต้ตอบกับ CDM เพื่อระบุคีย์ในการถอดรหัสสื่อ การเจรจากับเซิร์ฟเวอร์ใบอนุญาตเป็นความรับผิดชอบของแอปพลิเคชัน
บริการแพ็กเกจ: เข้ารหัสและเข้ารหัสสื่อเพื่อการจัดจำหน่าย/การใช้งาน

โปรดทราบว่าแอปพลิเคชันที่ใช้ EME จะโต้ตอบกับเซิร์ฟเวอร์ใบอนุญาตเพื่อรับคีย์เพื่อเปิดใช้การถอดรหัส แต่ข้อมูลประจำตัวและการรับรองของผู้ใช้ไม่ได้เป็นส่วนหนึ่งของ EME การดึงข้อมูลคีย์เพื่อเปิดใช้การเล่นสื่อจะเกิดขึ้นหลังจากการตรวจสอบสิทธิ์ผู้ใช้ (ไม่บังคับ) บริการต่างๆ เช่น Netflix ต้องมีการตรวจสอบสิทธิ์ผู้ใช้ภายในเว็บแอปพลิเคชันของตน เมื่อผู้ใช้ลงชื่อเข้าใช้แอปพลิเคชัน แอปพลิเคชันจะระบุตัวตนและสิทธิ์ของผู้ใช้

EME ทำงานอย่างไร

องค์ประกอบของ EME จะทำงานร่วมกันอย่างไรตามตัวอย่างโค้ดด้านล่าง

หากมีรูปแบบหรือตัวแปลงรหัสหลายรายการ คุณสามารถใช้ทั้ง MediaSource.isTypeSupported() หรือ HTMLMediaElement.canPlayType() เพื่อเลือกรูปแบบที่เหมาะสมได้ อย่างไรก็ตาม CDM อาจรองรับเฉพาะข้อมูลย่อยที่เบราว์เซอร์รองรับสำหรับเนื้อหาที่ไม่เข้ารหัส วิธีที่ดีที่สุดคือเจรจาการกำหนดค่า MediaKeys ก่อนที่จะเลือกรูปแบบและตัวแปลงรหัส หากแอปพลิเคชันกำลังรอเหตุการณ์ที่เข้ารหัส แต่ MediaKeys แจ้งว่าไม่สามารถจัดการรูปแบบ/ตัวแปลงรหัสที่เลือกได้ อาจสายเกินไปที่จะสลับไปโดยไม่ขัดจังหวะการเล่น

ขั้นตอนที่แนะนำคือการเจรจา MediaKeys ก่อนโดยใช้ MediaKeysSystemAccess.getConfiguration() เพื่อดูการกำหนดค่าที่เจรจา

หากมีรูปแบบ/ตัวแปลงรหัสให้เลือกเพียงรูปแบบเดียว ก็ไม่จำเป็นต้องใช้ getConfiguration() แต่คุณควรตั้งค่า MediaKeys ก่อน เหตุผลเดียวที่ควรรอเหตุการณ์ที่เข้ารหัสคือในกรณีที่ไม่มีวิธีทราบว่าเนื้อหาได้รับการเข้ารหัสหรือไม่ แต่ในทางปฏิบัติแล้ว กรณีนี้ไม่น่าจะเกิดขึ้น

เว็บแอปพลิเคชันพยายามเล่นเสียงหรือวิดีโอที่มีสตรีมที่เข้ารหัสอย่างน้อย 1 รายการ
เบราว์เซอร์จะรับรู้ว่าสื่อมีการเข้ารหัส (ดูวิธีการที่ช่องด้านล่าง) และเริ่มเหตุการณ์ที่เข้ารหัสซึ่งมีข้อมูลเมตา (initData) ที่ได้มาจากสื่อเกี่ยวกับการเข้ารหัส
แอปพลิเคชันจะจัดการกิจกรรมที่เข้ารหัส ดังนี้
1. หากไม่มีการเชื่อมโยงออบเจ็กต์ MediaKeys กับองค์ประกอบสื่อ ก่อนอื่นให้เลือกระบบคีย์ที่มีอยู่โดยใช้ navigator.requestMediaKeySystemAccess() เพื่อตรวจสอบว่าระบบคีย์ใดที่พร้อมใช้งาน จากนั้นสร้างออบเจ็กต์ MediaKeys สำหรับระบบคีย์ที่พร้อมใช้งานผ่านออบเจ็กต์ MediaKeySystemAccess โปรดทราบว่าการเริ่มต้นวัตถุ MediaKeys ควรเกิดขึ้นก่อนเหตุการณ์ที่เข้ารหัสครั้งแรก การรับ URL ของเซิร์ฟเวอร์ใบอนุญาตจะดำเนินการในแอปโดยไม่ขึ้นอยู่กับการเลือกระบบคีย์ที่พร้อมใช้งาน ออบเจ็กต์ MediaKeys จะแสดงคีย์ทั้งหมดที่ใช้ถอดรหัสสื่อสำหรับองค์ประกอบเสียงหรือวิดีโอ อินสแตนซ์นี้แสดงอินสแตนซ์ CDM และให้สิทธิ์เข้าถึง CDM โดยเฉพาะสำหรับการสร้างเซสชันคีย์ ซึ่งจะใช้เพื่อรับคีย์จากเซิร์ฟเวอร์ใบอนุญาต
2. เมื่อสร้างอ็อบเจ็กต์ MediaKeys แล้ว ให้กำหนดออบเจ็กต์ดังกล่าวให้กับเอลิเมนต์สื่อ: setMediaKeys() จะเชื่อมโยงออบเจ็กต์ MediaKeys กับ HTMLMediaElement เพื่อให้สามารถใช้คีย์ของออบเจ็กต์ดังกล่าวในระหว่างการเล่นได้ กล่าวคือ ในระหว่างการถอดรหัส
แอปสร้าง MediaKeySession โดยการเรียกใช้ createSession() ใน MediaKeys ซึ่งจะสร้าง MediaKeySession ที่แสดงถึงอายุการใช้งานของใบอนุญาตและคีย์
แอปจะสร้างคำขอใบอนุญาตโดยการส่งข้อมูลสื่อที่ได้รับในตัวแฮนเดิลที่เข้ารหัสไปยัง CDM โดยการเรียกใช้ generateRequest() ใน MediaKeySession
CDM จะเรียกเหตุการณ์ข้อความ: คําขอรับคีย์จากเซิร์ฟเวอร์ใบอนุญาต
ออบเจ็กต์ MediaKeySession จะได้รับเหตุการณ์ข้อความและแอปพลิเคชันจะส่งข้อความไปยังเซิร์ฟเวอร์ใบอนุญาต (เช่น ผ่าน XHR)
แอปพลิเคชันได้รับการตอบกลับจากเซิร์ฟเวอร์ใบอนุญาตและส่งข้อมูลไปยัง CDM โดยใช้เมธอด update() ของ MediaKeySession
CDM จะถอดรหัสสื่อโดยใช้คีย์ในใบอนุญาต ระบบอาจใช้คีย์ที่ถูกต้องจากเซสชันใดก็ได้ภายใน MediaKeys ที่เชื่อมโยงกับองค์ประกอบสื่อ CDM จะเข้าถึงคีย์และนโยบายที่จัดทำดัชนีตามรหัสคีย์

เล่นสื่อต่อ

เบราว์เซอร์จะรู้ได้อย่างไรว่าสื่อได้รับการเข้ารหัส

ข้อมูลนี้อยู่ในข้อมูลเมตาของไฟล์คอนเทนเนอร์สื่อ ซึ่งจะอยู่ในรูปแบบต่างๆ เช่น ISO BMFF หรือ WebM สำหรับ ISO BMFF ข้อมูลนี้หมายถึงข้อมูลเมตาส่วนหัว ซึ่งเรียกว่าช่องข้อมูลรูปแบบการคุ้มครอง WebM ใช้องค์ประกอบ Matroska ContentEncryption พร้อมการเพิ่มเฉพาะ WebM บางรายการ เรามีหลักเกณฑ์สำหรับคอนเทนเนอร์แต่ละรายการในรีจิสทรีเฉพาะ EME

โปรดทราบว่าอาจมีข้อความหลายรายการระหว่าง CDM กับเซิร์ฟเวอร์ใบอนุญาต และการสื่อสารทั้งหมดในกระบวนการนี้จะไม่แสดงต่อเบราว์เซอร์และแอปพลิเคชัน โดย CDM และเซิร์ฟเวอร์ใบอนุญาตเท่านั้นที่เข้าใจข้อความ แม้ว่าเลเยอร์แอปจะดูประเภทข้อความที่ CDM ส่งได้ คำขอใบอนุญาตมีหลักฐานยืนยันความถูกต้องของ CDM (และความสัมพันธ์ของความไว้วางใจ) รวมถึงคีย์ที่จะใช้เมื่อเข้ารหัสคีย์เนื้อหาในใบอนุญาตที่ได้รับ

แต่ CDM ทำงานอย่างไร

การติดตั้งใช้งาน EME ไม่ได้มอบวิธีถอดรหัสสื่อด้วยตัวเอง เพียงแค่มี API สำหรับเว็บแอปพลิเคชันเพื่อโต้ตอบกับโมดูลการถอดรหัสเนื้อหา

ข้อมูลเกี่ยวกับสิ่งที่ CDM ทำงานจริงไม่ได้กำหนดไว้ในข้อกำหนด EME และ CDM อาจจัดการการถอดรหัส (การขยายไฟล์) ของสื่อและการถอดรหัสด้วย ฟังก์ชันการทำงาน CDM อาจมีตัวเลือกหลายอย่างตั้งแต่มีประสิทธิภาพน้อยที่สุดไปจนถึงมีประสิทธิภาพมากที่สุด ดังนี้

การถอดรหัสเท่านั้น โดยเปิดใช้การเล่นโดยใช้ไปป์ไลน์สื่อปกติ เช่น ผ่านองค์ประกอบ <video>
การถอดรหัสและถอดรหัส การส่งเฟรมวิดีโอไปยังเบราว์เซอร์เพื่อแสดงผล
การถอดรหัสและการถอดรหัส การแสดงผลในฮาร์ดแวร์โดยตรง (เช่น GPU)

การทำให้ CDM พร้อมใช้งานสำหรับเว็บแอปทำได้หลายวิธีดังนี้

รวม 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="vp09.00.10.08"'}]}];

    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')
      );
    }

การเข้ารหัสทั่วไป

โซลูชันการเข้ารหัสทั่วไปช่วยให้ผู้ให้บริการเนื้อหาเข้ารหัสและแพ็กเกจเนื้อหาได้ 1 ครั้งต่อคอนเทนเนอร์/ตัวแปลงรหัส และใช้กับระบบจัดการคีย์, CDM และไคลเอ็นต์ที่หลากหลายได้ ซึ่งก็คือ CDM ที่รองรับการเข้ารหัสทั่วไป ตัวอย่างเช่น วิดีโอที่แพ็กเกจโดยใช้ PlayReady สามารถเล่นในเบราว์เซอร์ได้โดยใช้ CDM ของ Widevine ที่ได้รับคีย์จากเซิร์ฟเวอร์ใบอนุญาตของ Widevine

ซึ่งแตกต่างจากโซลูชันเดิมที่จะทํางานได้กับสแต็กแนวตั้งที่สมบูรณ์เท่านั้น รวมถึงไคลเอ็นต์เดียวที่มักรวมรันไทม์แอปพลิเคชันด้วย

การเข้ารหัสทั่วไป (CENC) คือมาตรฐาน ISO ที่กําหนดรูปแบบการป้องกันสําหรับ ISO BMFF ซึ่งแนวคิดนี้คล้ายกับที่ใช้กับ WebM

ล้างคีย์

แม้ว่า EME จะไม่ได้กำหนดฟังก์ชันการทำงานของ DRM แต่ปัจจุบันข้อกำหนดระบุว่าเบราว์เซอร์ทั้งหมดที่สนับสนุน EME ต้องใช้คีย์ล้าง เมื่อใช้ระบบนี้ สื่อจะเข้ารหัสด้วยคีย์ จากนั้นเล่นกลับได้โดยเพียงแค่ระบุคีย์นั้น คุณติดตั้งคีย์ล้างไว้ในเบราว์เซอร์ได้ โดยไม่จำเป็นต้องใช้โมดูลการถอดรหัสแยกต่างหาก

แม้ว่าจะไม่น่าจะใช้กับเนื้อหาเชิงพาณิชย์หลายประเภท แต่ Clear Key ก็สามารถทำงานร่วมกันได้อย่างสมบูรณ์ในเบราว์เซอร์ทั้งหมดที่รองรับ EME นอกจากนี้ ยังมีประโยชน์สำหรับการทดสอบการใช้งาน EME และแอปพลิเคชันที่ใช้ EME โดยไม่ต้องขอคีย์เนื้อหาจากเซิร์ฟเวอร์ใบอนุญาต ดูตัวอย่าง Clear Key ง่ายๆ ได้ที่ simpl.info/ck ด้านล่างนี้คือคำแนะนำทีละขั้นตอนเกี่ยวกับโค้ด ซึ่งสอดคล้องกับขั้นตอนที่อธิบายไว้ด้านบน แต่ไม่มีการทำงานร่วมกันกับเซิร์ฟเวอร์ใบอนุญาต

// 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],
    }),
  );
}

หากต้องการทดสอบโค้ดนี้ คุณต้องมีวิดีโอที่เข้ารหัสเพื่อเล่น การเข้ารหัสวิดีโอเพื่อใช้กับ Clear Key ทำได้ใน WebM ตามวิธีการของ webm_crypt นอกจากนี้ เรายังมีบริการเชิงพาณิชย์ (สำหรับ ISO BMFF/MP4 เป็นอย่างน้อย) และกำลังพัฒนาโซลูชันอื่นๆ

เทคโนโลยีที่เกี่ยวข้อง 1: ส่วนขยายแหล่งที่มาของสื่อ (MSE)

HTMLMediaElement เป็นองค์ประกอบที่เรียบง่ายแต่งดงาม

เราโหลด ถอดรหัส และเล่นสื่อได้ง่ายๆ เพียงระบุ URL ของ src

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

Media Source API เป็นส่วนขยายของ HTMLMediaElement ซึ่งช่วยให้ควบคุมแหล่งที่มาของสื่อได้ละเอียดยิ่งขึ้น โดยอนุญาตให้ JavaScript สร้างสตรีมสำหรับการเล่นจาก "ข้อมูลโค้ด" ของวิดีโอ ซึ่งจะช่วยให้ใช้เทคนิคต่างๆ ได้ เช่น สตรีมมิงแบบปรับเปลี่ยนได้และการเลื่อนเวลา

เหตุใด MSE จึงสำคัญต่อ EME เนื่องจากนอกเหนือจากการเผยแพร่เนื้อหาที่ได้รับการคุ้มครองแล้ว ผู้ให้บริการเนื้อหาเชิงพาณิชย์ยังต้องปรับการแสดงเนื้อหาให้เหมาะกับสภาพเครือข่ายและข้อกำหนดอื่นๆ ด้วย ตัวอย่างเช่น Netflix จะเปลี่ยนอัตราบิตของสตรีมแบบไดนามิกเมื่อสภาพเครือข่ายเปลี่ยนแปลง EME ใช้งานได้กับการเล่นสตรีมสื่อที่ได้จากการใช้งาน MSE เช่นเดียวกับที่ใช้กับสื่อที่มีให้ผ่านทางแอตทริบิวต์ src

วิธีแบ่งและเล่นสื่อที่เข้ารหัสด้วยอัตราบิตที่แตกต่างกัน ดูส่วน DASH ด้านล่าง

คุณสามารถดูการทำงานของ MSE ได้ที่ simpl.info/mse ในตัวอย่างนี้ ระบบจะแบ่งวิดีโอ WebM ออกเป็น 5 ชิ้นโดยใช้ File API ในแอปพลิเคชันเวอร์ชันที่ใช้งานจริง กลุ่มวิดีโอจะถูกดึงผ่าน 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 ได้ในMSE Prime

เทคโนโลยีที่เกี่ยวข้อง 2: การสตรีมที่ปรับเปลี่ยนได้แบบไดนามิกผ่าน HTTP (DASH)

ไม่ว่าจะเรียกเว็บว่าอุปกรณ์หลายเครื่อง หลายแพลตฟอร์ม หรืออุปกรณ์เคลื่อนที่ ผู้ใช้มักจะพบปัญหาการเชื่อมต่อที่เปลี่ยนแปลงได้ การแสดงผลแบบไดนามิกที่ปรับเปลี่ยนได้เป็นสิ่งที่สําคัญในการรับมือกับข้อจํากัดของแบนด์วิดท์และความแปรปรวนในโลกของอุปกรณ์หลายเครื่อง

DASH (หรือ MPEG-DASH) ได้รับการออกแบบมาเพื่อช่วยให้การส่งสื่อที่ดีที่สุดเท่าที่จะเป็นไปได้ในโลกที่ไม่แน่นอน ทั้งสําหรับสตรีมมิงและการดาวน์โหลด เทคโนโลยีอื่นๆ อีกหลายอย่างทำงานคล้ายกัน เช่น HTTP Live Streaming (HLS) ของ Apple และ Smooth Streaming ของ Microsoft แต่ DASH เป็นวิธีเดียวในการสตรีมแบบปรับอัตราบิตได้ผ่าน HTTP ที่อิงตามมาตรฐานแบบเปิด เว็บไซต์ต่างๆ เช่น YouTube ใช้ DASH อยู่แล้ว

การดำเนินการนี้เกี่ยวข้องกับ EME และ MSE อย่างไร การใช้ DASH ที่ใช้ MSE สามารถแยกวิเคราะห์ไฟล์ Manifest ดาวน์โหลดส่วนต่างๆ ของวิดีโอในอัตราบิตที่เหมาะสม และส่งฟีดเหล่านั้นไปยังองค์ประกอบวิดีโอเมื่อรู้สึกหิว โดยใช้โครงสร้างพื้นฐานของ HTTP ที่มีอยู่

กล่าวคือ DASH ช่วยให้ผู้ให้บริการเนื้อหาเชิงพาณิชย์สามารถสตรีมเนื้อหาที่ได้รับการคุ้มครองแบบปรับเปลี่ยนได้

DASH ทำงานตามที่ระบุไว้ดังนี้

แบบไดนามิก: ตอบสนองต่อสภาพอากาศที่เปลี่ยนแปลง
แบบปรับขนาดได้: ปรับขนาดเพื่อให้อัตราบิตของเสียงหรือวิดีโอเหมาะสม
สตรีมมิง: อนุญาตให้สตรีมรวมถึงดาวน์โหลด
HTTP: เปิดใช้การส่งเนื้อหาโดยใช้ประโยชน์จาก HTTP โดยไม่มีข้อเสียแบบเซิร์ฟเวอร์สตรีมมิงแบบดั้งเดิม

BBC ได้เริ่มสตรีมทดสอบโดยใช้ DASH แล้ว โดยทำดังนี้

ระบบจะเข้ารหัสสื่อหลายครั้งในอัตราบิตที่แตกต่างกัน การเข้ารหัสแต่ละรายการเรียกว่า "การนําเสนอ" ซึ่งจะแบ่งออกเป็นกลุ่มสื่อหลายกลุ่ม ไคลเอ็นต์เล่นโปรแกรมโดยขอกลุ่มตามลำดับจากการแสดงผ่าน HTTP คุณสามารถจัดกลุ่มการแสดงออกเป็นชุดการดัดแปลงของการแสดงที่มีเนื้อหาเทียบเท่ากันได้ หากลูกค้าต้องการเปลี่ยนอัตราบิต ก็สามารถเลือกตัวเลือกอื่นจากชุดการปรับเปลี่ยนปัจจุบันและเริ่มขอกลุ่มจากตัวแทนดังกล่าว เนื้อหาได้รับการเข้ารหัสในลักษณะที่ช่วยให้การเปลี่ยนนี้ง่ายขึ้นสำหรับไคลเอ็นต์ โดยทั่วไปแล้ว การแสดงผลจะมีกลุ่มเริ่มต้นด้วยนอกเหนือจากกลุ่มสื่อจำนวนหนึ่ง ซึ่งอาจมองได้ว่าเป็นส่วนหัวที่มีข้อมูลเกี่ยวกับการเข้ารหัส ขนาดเฟรม ฯลฯ ไคลเอ็นต์ต้องได้ข้อมูลนี้มาสำหรับการแสดงที่กำหนดก่อนที่จะใช้งานกลุ่มสื่อจากการนำเสนอดังกล่าว

โดยสรุป

สื่อได้รับการเข้ารหัสด้วยอัตราบิตที่แตกต่างกัน
ไฟล์อัตราบิตต่างๆ พร้อมใช้งานจากเซิร์ฟเวอร์ HTTP
เว็บแอปไคลเอ็นต์เลือกอัตราบิตที่จะดึงข้อมูลและเล่นด้วย DASH

ไฟล์ Manifest ของ XML หรือที่เรียกว่าคำอธิบายงานนำเสนอสื่อ (MPD) จะสร้างขึ้นแบบเป็นโปรแกรมในขั้นตอนการจัดกลุ่มวิดีโอ ซึ่งจะอธิบายชุดการปรับเปลี่ยนและการแสดงผล พร้อมระยะเวลาและ URL 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 นี้นำมาจากไฟล์ .mpd ที่ใช้สำหรับโปรแกรมเล่นเดโม DASH ของ YouTube)

ตามข้อกำหนดของ DASH ทางทฤษฎีสามารถใช้ไฟล์ MPD เป็น src สำหรับวิดีโอได้ อย่างไรก็ตาม ผู้ให้บริการเบราว์เซอร์ได้เลือกที่จะให้การสนับสนุน DASH ขึ้นอยู่กับไลบรารี JavaScript ที่ใช้ MSE เช่น dash.js เพื่อให้นักพัฒนาเว็บมีความยืดหยุ่นมากขึ้น การใช้ DASH ใน JavaScript ช่วยให้อัลกอริทึมการปรับให้เหมาะสมพัฒนาได้โดยไม่ต้องอัปเดตเบราว์เซอร์ การใช้ MSE ยังช่วยให้คุณทดสอบรูปแบบไฟล์ Manifest และกลไกการแสดงผลอื่นๆ ได้โดยไม่ต้องเปลี่ยนแปลงเบราว์เซอร์ Shaka Player ของ Google ใช้ไคลเอ็นต์ DASH ที่รองรับ EME

Mozilla Developer Network มีวิธีการเกี่ยวกับวิธีใช้เครื่องมือ WebM และ FFmpeg เพื่อแบ่งกลุ่มวิดีโอและสร้าง MPD

บทสรุป

การใช้เว็บเพื่อส่งวิดีโอและเสียงแบบชำระเงินกำลังเติบโตในอัตราที่สูงมาก ดูเหมือนว่าอุปกรณ์ใหม่ทุกเครื่อง ไม่ว่าจะเป็นแท็บเล็ต คอนโซลเกม ทีวีที่เชื่อมต่ออินเทอร์เน็ต หรือกล่องรับสัญญาณ จะสามารถสตรีมสื่อจากผู้ให้บริการเนื้อหารายใหญ่ผ่าน HTTP ได้ ปัจจุบันเบราว์เซอร์บนอุปกรณ์เคลื่อนที่และเดสก์ท็อปกว่า 85% รองรับ <video> และ <audio> และ Cisco คาดการณ์ว่าวิดีโอจะคิดเป็นสัดส่วน 80-90% ของการเข้าชมอินเทอร์เน็ตทั่วโลกของผู้บริโภคภายในปี 2017 ด้วยเหตุนี้ การรองรับของเบราว์เซอร์สำหรับการเผยแพร่เนื้อหาที่ได้รับการคุ้มครองจึงมีแนวโน้มที่จะมีความสำคัญมากขึ้น เนื่องจากผู้ให้บริการเบราว์เซอร์ลดการสนับสนุน API ที่ปลั๊กอินสื่อส่วนใหญ่ใช้

อ่านเพิ่มเติม

ข้อมูลจำเพาะและมาตรฐาน

ข้อกำหนด EME: ฉบับร่างฉบับล่าสุดของบรรณาธิการ การเข้ารหัสทั่วไป (CENC) ส่วนขยายแหล่งที่มาของสื่อ: ฉบับร่างฉบับล่าสุดของบรรณาธิการ มาตรฐาน DASH (ใช่ ไฟล์เป็น PDF) ภาพรวมของมาตรฐาน DASH

บทความ

การสัมมนาผ่านเว็บ DTG (ล้าสมัยบางส่วน) EME คืออะไร โดย Henri Sivonen ข้อมูลเบื้องต้นเกี่ยวกับส่วนขยายแหล่งที่มาของสื่อ สตรีมทดสอบ MPEG-DASH: บล็อกโพสต์ของ BBC R&D

เดโม

ตัวอย่าง Clear Key: simpl.info/ck ตัวอย่าง Media Source Extensions (MSE) Shaka Player ของ Google ใช้ไคลเอ็นต์ DASH ที่รองรับ EME