วิดีโอออนไลน์ด้วย Wowza และ Amazon Elastic Transcoder

เผยแพร่แล้ว: 2022-03-11

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

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

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

โพสต์นี้อธิบายวิธีที่ฉันใช้เทคโนโลยีโอเพ่นซอร์สและบริการบนคลาวด์อย่างมีประสิทธิภาพเพื่อรวมความสามารถด้านวิดีโอเข้ากับเว็บแอปที่ใช้ PHP

การประมวลผลวิดีโอออนไลน์ใน PHP ด้วย Wowza และ Amazon Elastic Transcoder

ใช้กรณี

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

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

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

อัปโหลดวิดีโอ

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

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

การประมวลผลวิดีโอออนไลน์

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

FFmpeg – ไลบรารีโอเพ่นซอร์สที่ใช้กันอย่างแพร่หลาย แจกจ่ายอย่างอิสระ – มีประโยชน์อย่างยิ่งในการปฏิบัติตามข้อกำหนดเหล่านี้ FFmpeg เป็นโซลูชันข้ามแพลตฟอร์มที่สมบูรณ์สำหรับการบันทึก การแปลง และการสตรีมไฟล์เสียงและวิดีโอ นอกจากนี้ยังสามารถใช้ในการแปลงวิดีโอและทำการแก้ไขอย่างง่าย (เช่น การตัดแต่ง การตัด เพิ่มลายน้ำ ฯลฯ)

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

น่าเสียดายที่ไม่มีการผูกภาษา PHP สำหรับไลบรารี FFmpeg ด้วยเหตุนี้ วิธีเดียวที่จะใช้ประโยชน์จาก FFmpeg จาก PHP คือการเรียกใช้ไบนารีจากบรรทัดคำสั่งโดยใช้คำสั่งของระบบ โดยทั่วไปมีสองวิธีในการใช้ FFmpeg ใน PHP:

  • ลิบาฟ Libav เป็นโครงการซอฟต์แวร์ฟรี ซึ่งแยกจาก FFmpeg ในปี 2011 ซึ่งผลิตไลบรารีและโปรแกรมสำหรับจัดการข้อมูลมัลติมีเดีย ตัวอย่างเช่น บน Ubuntu สามารถติดตั้งได้ด้วยคำสั่ง sudo apt-get install libav-tools คำสั่ง libav เข้ากันได้กับ FFmpeg และ avconv PHP จำเป็นต้องมีการเข้าถึงบรรทัดคำสั่งใน ffmpeg/avconv เพื่อใช้งานโดยทางโปรแกรม
  • PHP-FFMpeg.php PHP-FFMpeg เป็นไดรเวอร์ PHP เชิงวัตถุสำหรับไบนารี FFMpeg สามารถเข้าถึงได้โดยเพียงแค่ดำเนินการ composer update "php-ffmpeg/php-ffmpeg"

เราใช้ PHP-FFMpeg เนื่องจากช่วยให้เข้าถึงฟังก์ชัน FFmpeg ที่เราสนใจได้ง่าย ตัวอย่างเช่น คลาส FFProbe จากแพ็คเกจนี้ช่วยให้คุณได้รับข้อมูลเกี่ยวกับตัวแปลงสัญญาณหรือความยาวของไฟล์วิดีโอเฉพาะดังนี้:

 $ffprobe = FFMpeg\FFProbe::create(); $ffprobe ->format('/path/to/video/mp4') // extracts file informations ->get('duration');

FFmpeg ยังทำให้ง่ายต่อการบันทึกเฟรมวิดีโอ:

 $ffmpeg = FFMpeg\FFMpeg::create(); $video = $ffmpeg->open('video.mpg'); $video ->frame(FFMpeg\Coordinate\TimeCode::fromSeconds(10)) ->save('frame.jpg');

ดูโค้ดตัวอย่างโดยละเอียดเพิ่มเติมได้ที่นี่

ข้อควรระวัง: เนื่องจากกฎหมายสิทธิบัตรบางฉบับ FFmpeg ไม่สามารถประมวลผลตัวแปลงสัญญาณทั้งหมดได้ และบางรูปแบบไม่ได้รับการสนับสนุนอย่างเหมาะสม (หรือทั้งหมด) ฉันจำได้ว่าต้องดิ้นรนเมื่อสองสามปีก่อน เช่น ด้วยรูปแบบ .3gp เมื่อการรองรับฟีเจอร์โฟนเป็นสิ่งจำเป็น

เข้าคิว

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

ยูทิลิตีการแปลงจะเรียกใช้ FFMpeg เพื่อทำการแปลงและทำเครื่องหมายว่าวิดีโอแต่ละรายการได้รับการประมวลผลแล้ว

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

การแปลงรูปแบบวิดีโอ

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

ในกรณีของเรา นอกจากจะต้องแปลงจากรูปแบบต่างๆ เป็นรูปแบบทั่วไปเดียว (MPEG-4) แล้ว เรายังต้องแปลงวิดีโอที่แปลงแล้วเพื่อปรับให้เหมาะสมสำหรับการสตรีมไปยังอุปกรณ์มือถือ

สำหรับการแปลงรูปแบบวิดีโอ (อย่างน้อยก็สำหรับความต้องการระยะสั้นของเรา) การใช้ Amazon Elastic Transcoder บนคลาวด์เป็นตัวเลือกที่ดีที่สุด นอกจากความง่ายในการใช้งานทั่วไปแล้ว บริการทรานส์โค้ดเดอร์ยังดูแลการปรับให้เหมาะสมและการตั้งค่าการเข้ารหัสทั้งหมดอีกด้วย โชคดีที่มี AWS SDK สำหรับ PHP ซึ่งช่วยให้เรียกใช้บริการจากโค้ด PHP ของเราได้ง่ายขึ้น

หมายเหตุ: การใช้บริการบนระบบคลาวด์อย่าง Amazon Elastic Transcoder นั้นยอดเยี่ยมหากคุณต้องการเริ่มต้นใช้งานอย่างรวดเร็ว อย่างไรก็ตาม โปรดทราบว่าตัวเลือกนี้อาจมีราคาแพงสำหรับลูกค้าของคุณ โดยเฉพาะอย่างยิ่งหากรูปแบบธุรกิจของพวกเขามีแนวโน้มที่จะต้องใช้วิดีโอขนาดใหญ่อย่างกว้างขวาง อีกปัจจัยที่ต้องพิจารณาคือ คุณไม่จำเป็นต้องสันนิษฐานว่าวิดีโอหรือรูปแบบธุรกิจของลูกค้าของคุณจะเข้ากันได้กับข้อกำหนดในการให้บริการ

Amazon ใช้พื้นที่จัดเก็บและองค์ประกอบพื้นฐานในการประมวลผล S3 (Simple Storage Service) และ EC2 (Elastic Compute Cloud) ผสานกับ Auto Scaling และ SNS (Simple Notification Service) เพื่อให้ความสามารถในการขยายขนาดขึ้นและลงแทบจะในทันที

การติดตั้ง aws-sdk นั้นง่ายมาก เนื่องจาก Amazon มีแพ็คเกจ Composer ที่สามารถติดตั้งได้ เพียงเพิ่ม ”aws/aws-sdk-php": "2.*" ลงในไฟล์ composer.json ของคุณและทำการ composer update

เห็นได้ชัดว่าการเข้าถึง Amazon Elastic Transcoder ต้องใช้บัญชี Amazon ดังนั้นคุณจะต้องตั้งค่าหากคุณ (หรือลูกค้าของคุณ) ยังไม่มี

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

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

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

สตรีมมิ่ง

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

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

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

นอกเหนือจากข้อเท็จจริงที่ว่าเทคโนโลยี Video on Demand (VOD) ยังคงพัฒนาอยู่ ปัญหาอื่นที่เราเผชิญคือการเข้าถึงกล้องไม่ได้รับการสนับสนุนเป็นอย่างดีและมีเฉพาะการเชื่อมต่อแบบ P2P นอกจากนี้ เป้าหมายของเราคือให้บริการออกอากาศออนไลน์สำหรับผู้ใช้หลายรายพร้อมกัน นอกจากนี้ การรองรับ getUserMedia/Stream API (ก่อนหน้านี้ถูกมองว่าเป็นองค์ประกอบ <device> ) นั้นยังไม่สอดคล้องกันในเบราว์เซอร์สมัยใหม่ จากปัจจัยเหล่านี้ ฉันตัดสินใจใช้เทคโนโลยี Flash เนื่องจากเป็นตัวเลือกเดียวที่สมเหตุสมผลจริงๆ ทั้งสองแอปพลิเคชัน (แดชบอร์ดและโปรแกรมดู) จึงถูกใช้งานโดยใช้ Flex และ ActionScript

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

Wowza สตรีมมิ่งเครื่องยนต์

เราใช้แอปพลิเคชัน LiveStream ที่มาพร้อมกับ Wowza หากต้องการกำหนดค่า ให้ปล่อย applications/app_name ว่างไว้และใน conf/app_name ให้คัดลอกไฟล์ Application.xml จากแค็ตตาล็อก conf แก้ไขไฟล์เพื่อกำหนดค่าส่วน <Streams> ดังนี้:

 <Streams> <StreamType>live</StreamType> <StorageDir>${com.wowza.wms.context.VHostConfigHome}/content</StorageDir> <KeyDir>${com.wowza.wms.context.VHostConfigHome}/keys</KeyDir> <LiveStreamPacketizers></LiveStreamPacketizers> <Properties></Properties> </Streams>

พารามิเตอร์หลักคือ <StreamType>live</StreamType> ซึ่งกำหนดว่านี่จะเป็นสตรีมจากฟีดวิดีโอสด (เช่น กล้อง) โปรดทราบว่าหลังจากแก้ไขและบันทึกไฟล์นี้ คุณจะต้องรีสตาร์ท Wowza

แอปพลิเคชัน Flash (Flex/ActionScript)

Flash จัดเตรียมระบบแบบครบวงจรในการเชื่อมต่อกล้องและไมโครโฟนกับเซิร์ฟเวอร์สตรีมมิ่ง Wowza สิ่งนี้มีประโยชน์อย่างยิ่งหากคุณมีประสบการณ์กับ ActionScript อย่างจำกัด

แอปพลิเคชันทั้งหมดมีพื้นฐานมาจากการโต้ตอบระหว่างอ็อบเจ็กต์ต่อไปนี้:

  • เน็ตคอนเนคชั่น. คลาส NetConnection สร้างการเชื่อมต่อแบบสองทางระหว่างไคลเอนต์และเซิร์ฟเวอร์ ลูกค้าสามารถเป็นโปรแกรม Flash Player หรือ AIR เซิร์ฟเวอร์สามารถเป็นเว็บเซิร์ฟเวอร์, Flash Media Server, แอปพลิเคชันเซิร์ฟเวอร์ที่ใช้ Flash Remoting หรือบริการ Adobe Stratus
  • กล้อง. คลาส Camera ใช้เพื่อจับภาพวิดีโอจากระบบไคลเอนต์หรือกล้องของอุปกรณ์
  • ไมโครโฟน. คลาสไมโครโฟนใช้เพื่อตรวจสอบหรือบันทึกเสียงจากไมโครโฟน
  • เน็ตสตรีม คลาส NetStream เปิดช่องทางการสตรีมทางเดียวผ่าน NetConnection

ขั้นแรก เราเชื่อมต่อกับเซิร์ฟเวอร์การสตรีม Wowza โดยใช้อินสแตนซ์ NetConnection จากนั้นแนบตัวรับฟังเหตุการณ์ที่จะรับฟังการเปลี่ยนแปลงในสถานะการเชื่อมต่อเครือข่าย:

 nc = new NetConnection(); nc.connect(serverAddress:string); nc.addEventListener( NetStatusEvent.NET_STATUS, // event type eNetStatus, // listener function false, // use capture? 0, // priority true // use weak reference? );

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

 private function eNetStatus(e:NetStatusEvent):void { switch (e.info.code) { case "NetConnection.Connect.Success": camera = Camera.getCamera(); mic = Microphone.getMicrophone(); ns = new NetStream(nc); ns.publish(streamName, "live"); ns.attachCamera(camera); ns.attachAudio(mic); break; case "NetConnection.Connect.Closed": // debug trace... display user message break; }

รหัสไคลเอ็นต์คล้ายกันมาก ยกเว้นว่าเราจะแสดงอินพุตวิดีโอที่ฝั่งผู้ใช้เท่านั้น ทำได้โดยเชื่อมต่อสตรีมกับออบเจ็กต์ Video ดังที่แสดงในตัวอย่างง่ายๆ นี้:

 if(event.info.code == "NetConnection.Connect.Success") { ns = new NetStream(nc); ns.client = nsClient; ns.addEventListener(NetStatusEvent.NET_STATUS, nsClient.onNetStatus); ns.play(streamName); video = new Video(); addChild(video); // this will display video video.attachNetStream(ns); // connect NetStream to video }

สรุป

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