อะไรเนี่ย ห่วยแตก

แนะนำส่วนขยายสื่อที่เข้ารหัส

แซม ดัตตัน

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

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

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

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

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

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

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

ต่อไปนี้คือวิธีที่องค์ประกอบของ EME มีการโต้ตอบซึ่งสอดคล้องกับตัวอย่างโค้ดด้านล่าง

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

เฮ้อ...

โปรดทราบว่า 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 Ready

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

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

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

var video = document.querySelector('video');

var config = [{initDataTypes: ['webm'],
  videoCapabilities: [{contentType: 'video/webm; codecs="vp9"'}]}];

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

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

Media Source Extensions (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 ในบทความ HTML5 Rocks

การสตรีมที่ปรับเปลี่ยนได้แบบไดนามิกผ่าน 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 แล้ว ดังนี้

สรุปได้ดังนี้

  1. สื่อมีการเข้ารหัสที่อัตราบิตต่างกัน
  2. ไฟล์อัตราบิตต่างๆ จะส่งได้จากเซิร์ฟเวอร์ HTTP
  3. เว็บแอปของไคลเอ็นต์จะเลือกอัตราบิตที่จะดึงและเล่นด้วย 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 ที่ปลั๊กอินสื่อส่วนใหญ่ใช้งาน

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

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

บทความ