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

EME คืออะไร

แซม ดัตตัน

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

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

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

ข้อเสนอนี้ครอบคลุมถึง HTMLMediaElement ที่ให้ API เพื่อควบคุมการเล่นเนื้อหาที่มีการคุ้มครอง

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

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

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

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

ระบบคีย์: กลไกการป้องกันเนื้อหา (DRM) EME ไม่ได้กำหนด Key Systems เอง นอกเหนือจากการล้างข้อมูลคีย์ (ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ด้านล่าง)
โมดูลการถอดรหัสเนื้อหา (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 รองรับ Playพร้อม

การรับคีย์จากเซิร์ฟเวอร์ใบอนุญาต

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

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

    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 ที่รองรับการเข้ารหัสทั่วไป เช่น วิดีโอที่รวมเป็น Play Ready สามารถเล่นในเบราว์เซอร์ได้โดยใช้ Widevine CDM ที่ได้รับคีย์จากเซิร์ฟเวอร์ใบอนุญาต Widevine

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

Common Encryption (CENC) เป็นมาตรฐาน ISO ที่กำหนดรูปแบบการป้องกันสำหรับ ISO BMFF แนวคิดที่คล้ายกันใช้กับ WebM ด้วย

ล้างคีย์

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

แม้จะไม่ใช้กับเนื้อหาเชิงพาณิชย์หลายประเภท แต่การล้างข้อมูลคีย์สามารถทำงานร่วมกันได้อย่างเต็มรูปแบบในเบราว์เซอร์ทั้งหมดที่รองรับ EME นอกจากนี้ยังมีประโยชน์สำหรับการทดสอบการใช้งาน EME และแอปพลิเคชันที่ใช้ EME โดยไม่ต้องขอคีย์เนื้อหาจากเซิร์ฟเวอร์ใบอนุญาต มีตัวอย่างล้างคีย์แบบง่ายๆ ที่ 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],
    }),
  );
}

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

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

HTMLMediaElement เป็นสิ่งมีชีวิตที่มีความงามแบบง่ายๆ

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

<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

เทคโนโลยีที่เกี่ยวข้อง 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 ที่ใช้สำหรับโปรแกรมเล่นสาธิต YouTube DASH)

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

เครือข่ายนักพัฒนาซอฟต์แวร์ Mozilla มีวิธีการ เกี่ยวกับวิธีใช้เครื่องมือ WebM และ FFmpeg เพื่อแบ่งกลุ่มวิดีโอและสร้าง MPD

บทสรุป

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

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

ข้อกำหนดและมาตรฐาน

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

บทความ

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

เดโม

การสาธิตคีย์ที่ชัดเจน: simpl.info/ck การสาธิต Media Source Extensions (MSE) Shaka Player ของ Google ใช้ไคลเอ็นต์ DASH ที่มีการรองรับ EME