ข้อมูลเบื้องต้นเกี่ยวกับการสตรีมสื่อ

Derek Herman
Derek Herman
Jaroslav Polakovič
Jaroslav Polakovič

บทความนี้จะอธิบายแนวคิดขั้นสูงเกี่ยวกับการสตรีมสื่อ และในตอนท้าย คุณควรเข้าใจกรณีการใช้งาน สตรีม โปรโตคอล และส่วนขยายต่างๆ เป็นอย่างดี มาเริ่มกันที่คำอธิบายว่าสตรีมมิงคืออะไรกัน

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

โปรดทราบว่าเซิร์ฟเวอร์ต้องรองรับส่วนหัวคำขอ HTTP Range จึงจะสตรีมบนเว็บไซต์ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับAccept-Rangesส่วนหัวในบทความแท็ก <video> และ <source>

กรณีการใช้งานสตรีมมิง

การสร้างข้อมูลโค้ดสื่อและไฟล์ Manifest ที่จำเป็นซึ่งอธิบายสตรีมนั้นไม่ใช่เรื่องง่าย แต่การสตรีมจะปลดล็อกกรณีการใช้งานที่น่าสนใจบางอย่างที่ทำได้เพียงชี้องค์ประกอบ <video> ไปยังชุดไฟล์ต้นฉบับแบบคงที่ คุณดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเพิ่มสื่อลงในหน้าเว็บได้ในส่วนถัดไป ก่อนอื่น คุณควรทราบเกี่ยวกับ Use Case 2-3 รายการสำหรับการสตรีมมัลติมีเดียหากต้องการดำเนินการเพิ่มเติมนอกเหนือจากการโหลดไฟล์หลายไฟล์ลงในองค์ประกอบ <video>

  • การสตรีมมิงแบบปรับอัตราบิตคือการนำข้อมูลโค้ดของกลุ่มสื่อด้วยอัตราบิตหลายอัตรา แล้วส่งกลุ่มสื่อที่มีคุณภาพสูงสุดซึ่งเหมาะกับแบนด์วิดท์ที่พร้อมใช้งานของไคลเอ็นต์ไปยังโปรแกรมเล่นสื่อ
  • การออกอากาศสดเป็นรูปแบบที่มีการเข้ารหัสข้อมูลโค้ดของสื่อและทำให้พร้อมใช้งานแบบเรียลไทม์
  • การแทรกสื่อคือการแทรกสื่ออื่นๆ เช่น โฆษณา ลงในสตรีมโดยที่ผู้เล่นไม่ต้องเปลี่ยนแหล่งที่มาของสื่อ

โปรโตคอลสตรีมมิง

โปรโตคอลสตรีมมิงที่ใช้กันมากที่สุด 2 รายการบนเว็บคือ Dynamic Adaptive Streaming over HTTP (DASH) และ HTTP Live Streaming (HLS) โปรแกรมเล่นที่รองรับโปรโตคอลเหล่านี้จะดึงข้อมูลไฟล์ Manifest ที่สร้างขึ้น หาข้อมูลว่าต้องขอข้อมูลสื่อส่วนใด แล้วรวมข้อมูลเหล่านั้นเข้าด้วยกันเพื่อประสบการณ์การรับชมสื่อขั้นสุดท้าย

การใช้ <video> เพื่อเล่นสตรีม

เบราว์เซอร์จำนวนมากจะไม่เล่นสตรีมของคุณโดยค่าเริ่มต้น แม้ว่าเบราว์เซอร์บางรุ่นจะรองรับการเล่น HLS ในตัว แต่โดยทั่วไปแล้วไม่รองรับการเล่นสตรีม DASH ในตัว ซึ่งหมายความว่าการชี้ <source> ในองค์ประกอบ <video> ไปยังไฟล์ Manifest เพียงอย่างเดียวนั้นไม่เพียงพอในหลายกรณี

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

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

ไฟล์ Manifest มักจะอธิบายสื่อรายการเดียวที่มีหลายรูปแบบ ตัวอย่างเช่น บิตเรตที่แตกต่างกัน แทร็กเสียงหลายแทร็ก และแม้แต่สื่อเดียวกันที่เข้ารหัสในรูปแบบที่แตกต่างกัน

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

ส่วนขยายแหล่งที่มาของสื่อ

แต่โชคดีที่ W3C ได้กำหนดสิ่งที่เรียกว่า Media Source Extensions (MSE) ซึ่งจะช่วยให้ JavaScript สร้างสตรีมสื่อได้ กล่าวโดยย่อคือ MSE ช่วยให้นักพัฒนาแอปแนบออบเจ็กต์ MediaSource กับองค์ประกอบ <video> และเล่นข้อมูลสื่อที่ส่งไปยังบัฟเฟอร์ที่แนบอยู่กับอินสแตนซ์ MediaSource ได้

ตัวอย่างพื้นฐาน

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

ตัวอย่างที่เข้าใจง่ายด้านบนแสดงถึงสิ่งต่อไปนี้

  • <video> จะถือว่ากำลังรับข้อมูลสื่อจาก URL
  • URL ที่สร้างขึ้นเป็นเพียงตัวชี้ไปยังอินสแตนซ์ MediaSource
  • อินสแตนซ์ MediaSource จะสร้างอินสแตนซ์ SourceBuffer อย่างน้อย 1 รายการ
  • จากนั้นเราจะเพิ่มข้อมูลสื่อแบบไบนารีต่อท้ายบัฟเฟอร์ เช่น โดยใช้ fetch

แม้ว่าแนวคิดพื้นฐานเหล่านี้จะเข้าใจง่ายและเขียนโปรแกรมเล่นวิดีโอที่ใช้งานร่วมกับ DASH และ HLS ขึ้นใหม่ได้ แต่คนส่วนใหญ่มักจะเลือกโซลูชันโอเพนซอร์สที่ใช้งานได้จริงซึ่งมีอยู่แล้ว เช่น Shaka Player, JW Player หรือ Video.js เป็นต้น

อย่างไรก็ตาม เราได้สร้าง Media PWA สาธิตชื่อ Kino ซึ่งแสดงวิธีพัฒนาเว็บไซต์สตรีมมิงสื่อพื้นฐานของคุณเองที่ให้บริการการเล่นสื่อแบบออฟไลน์โดยใช้องค์ประกอบ <video> ที่เรียบง่าย เรามีแผนที่จะรองรับเฟรมเวิร์กและการจัดการสิทธิ์ดิจิทัล รวมถึงฟีเจอร์อื่นๆ ในแผนพัฒนาของเรา ดังนั้นโปรดกลับมาดูข้อมูลอัปเดตเป็นครั้งคราวหรือขอฟีเจอร์ อ่านเพิ่มเติมได้ในบทความ PWA ที่มีการสตรีมแบบออฟไลน์

รูปแบบข้อมูลโค้ดของสื่อ

เป็นเวลานานที่ DASH และ HLS กำหนดให้ต้องเข้ารหัสข้อมูลโค้ดสื่อในรูปแบบที่แตกต่างกัน อย่างไรก็ตาม ในปี 2016 ได้มีการเพิ่มการรองรับไฟล์ MP4 ที่มีการแบ่งส่วน (fMP4) มาตรฐานลงใน HLS ซึ่งเป็นรูปแบบที่ DASH รองรับเช่นกัน

ทั้ง 2 โปรโตคอลรองรับกลุ่มวิดีโอที่ใช้คอนเทนเนอร์ fMP4 และตัวแปลงรหัส H.264 และโปรแกรมเล่นส่วนใหญ่เล่นกลุ่มวิดีโอเหล่านี้ได้ ซึ่งจะช่วยให้ผู้ผลิตเนื้อหาสามารถเข้ารหัสวิดีโอเพียงครั้งเดียว ซึ่งจะประหยัดเวลาและพื้นที่ในดิสก์

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