การประมวลผลวิดีโอบนเบราว์เซอร์ด้วย FFmpeg.wasm

บทนำ

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

บันเดิลสำหรับเบราว์เซอร์ที่ยังได้รับการดูแลเผยแพร่ในชื่อ @ffmpeg/ffmpeg (พร้อม @ffmpeg/util สำหรับตัวช่วยอย่าง fetchFile) บทความสอนรุ่นเก่าใช้ชื่อแพ็กเกจ ffmpeg.wasm และ API แบบ run() ส่วนโค้ดปัจจุบันใช้ FFmpeg, load(), exec() และระบบไฟล์เสมือนในหน่วยความจำ (writeFile / readFile) ตัวอย่างโค้ดด้านล่างใช้ exec() กับรายการอาร์กิวเมนต์เดียวกับที่คุณจะส่งให้ FFmpeg CLI แต่คุณยังต้องโหลดไบต์ของไฟล์อินพุตลงในระบบไฟล์เสมือนก่อนรันคำสั่ง

ทำความรู้จัก FFmpeg และ WebAssembly

FFmpeg คืออะไร?

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

WebAssembly (Wasm) คืออะไร?

WebAssembly คือรูปแบบคำสั่งแบบไบนารีที่เป็นเป้าหมายคอมไพล์แบบพกพาได้สำหรับภาษาระดับสูงอย่าง C, C++ และ Rust Wasm ช่วยให้เว็บแอปพลิเคชันทำงานได้ด้วยประสิทธิภาพใกล้เคียงโค้ดเนทีฟ จึงเหมาะกับงานที่เดิมต้องประมวลผลฝั่งเซิร์ฟเวอร์ การใช้ WebAssembly ทำให้นักพัฒนาถ่ายโอนการคำนวณที่ซับซ้อนไปไว้ฝั่งไคลเอนต์ ลดภาระของเซิร์ฟเวอร์ และปรับปรุงประสบการณ์ผู้ใช้

ประโยชน์ของ FFmpeg.wasm

การใช้ FFmpeg.wasm ในเว็บแอปพลิเคชันมีข้อดีหลายประการ

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

การตั้งค่าสภาพแวดล้อม FFmpeg.wasm

หากต้องการเริ่มต้นใช้ FFmpeg.wasm คุณต้องตั้งค่าสภาพแวดล้อมสำหรับการพัฒนา ส่วนนี้สรุปสิ่งที่ต้องมีและขั้นตอนการติดตั้ง

สิ่งที่ต้องมี

ก่อนเริ่ม ตรวจสอบให้แน่ใจว่าติดตั้งสิ่งต่อไปนี้แล้ว

• Node.js: รันไทม์ JavaScript สำหรับรันโค้ด JavaScript นอกเว็บเบราว์เซอร์
• npm: Node Package Manager ใช้ติดตั้งและจัดการแพ็กเกจ JavaScript

ขั้นตอนการติดตั้ง

1. ติดตั้ง Node.js LTS และ npm: ติดตั้งรุ่น LTS ปัจจุบันจากเว็บไซต์ทางการของ Node.js เพื่อให้ได้รับการอัปเดตด้านความปลอดภัย

2. ติดตั้ง FFmpeg สำหรับเบราว์เซอร์: ใช้ npm ติดตั้งแพ็กเกจที่ยังได้รับการดูแล

   npm install @ffmpeg/ffmpeg @ffmpeg/util
   

3. เริ่มต้นโปรเจกต์: สร้างไดเรกทอรีใหม่สำหรับโปรเจกต์ของคุณและเริ่มต้นโปรเจกต์ Node.js ใหม่

   mkdir browser-ffmpeg
   cd browser-ffmpeg
   npm init -y
   

4. ติดตั้ง Webpack: Webpack คือตัวรวมโมดูลที่ช่วยจัดการและรวมโค้ด JavaScript ของคุณ

   npm install --save-dev webpack webpack-cli
   

5. กำหนดค่า Webpack: สร้างไฟล์ webpack.config.js เพื่อกำหนดค่า Webpack

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist'),
     },
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env'],
             },
           },
         },
       ],
     },
   };
   

6. ติดตั้ง Babel: Babel คือคอมไพเลอร์ที่แปลง JavaScript สมัยใหม่ให้เป็นโค้ดที่เข้ากันได้กับรุ่นเก่า

   npm install --save-dev @babel/core @babel/preset-env babel-loader
   

7. สร้างจุดเริ่มต้น: สร้างไฟล์ src/index.js เป็นจุดเริ่มต้นของโปรเจกต์

   import { FFmpeg } from '@ffmpeg/ffmpeg';
   
   const ffmpeg = new FFmpeg();
   ffmpeg.load().then(() => {
     console.log('FFmpeg loaded successfully');
   });
   

8. บิลด์และรัน: ใช้ Webpack บิลด์โปรเจกต์ แล้วเปิดให้บริการผ่านเว็บเซิร์ฟเวอร์

   npx webpack
   

   คุณสามารถเปิดให้บริการไฟล์ที่บิลด์แล้วด้วย HTTP เซิร์ฟเวอร์ง่าย ๆ

   python -m http.server 8000
   

คำสั่ง FFmpeg พื้นฐานในเบราว์เซอร์

เมื่อตั้งค่า FFmpeg.wasm เรียบร้อยแล้ว คุณก็เริ่มใช้งานเพื่อทำงานประมวลผลวิดีโอพื้นฐานในเบราว์เซอร์ได้

การโหลด FFmpeg.wasm

หากต้องการโหลด FFmpeg.wasm ต้องเรียกฟังก์ชัน load ที่โมดูล FFmpeg.wasm จัดเตรียมไว้ ฟังก์ชันนี้คืนค่าเป็น promise ที่จะ resolve เมื่อ FFmpeg พร้อมใช้งาน

import { FFmpeg } from '@ffmpeg/ffmpeg';

const ffmpeg = new FFmpeg();
ffmpeg.load().then(() => {
  console.log('FFmpeg loaded successfully');
});

การรันคำสั่งพื้นฐาน

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

ตัดวิดีโอ

หากต้องการตัดวิดีโอให้เหลือช่วงเวลาที่กำหนด ใช้ตัวเลือก -ss และ -t

ffmpeg.exec([
  '-i', 'input.mp4',
  '-ss', '00:00:05', // Start at 5 seconds
  '-t', '00:00:10',  // Duration of 10 seconds
  'output.mp4'
]).then(() => {
  console.log('Video trimmed successfully');
});

เข้ารหัสวิดีโอ

หากต้องการเข้ารหัสวิดีโอเป็นรูปแบบอื่น ให้ระบุรูปแบบเอาต์พุตและโคเดก

ffmpeg.exec([
  '-i', 'input.mp4',
  '-c:v', 'libx264',  // H.264 video codec
  '-c:a', 'aac',      // AAC audio codec
  'output.mp4'
]).then(() => {
  console.log('Video encoded successfully');
});

การประมวลผลวิดีโอฝั่งไคลเอนต์

FFmpeg.wasm รองรับงานประมวลผลวิดีโอฝั่งไคลเอนต์ได้หลากหลาย รวมถึงการทรานส์โค้ด การใส่ฟิลเตอร์ และการไลฟ์สตรีมมิง

การทรานส์โค้ดรูปแบบวิดีโอ

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

ffmpeg.exec([
  '-i', 'input.mp4',
  '-c:v', 'libvpx-vp9', // VP9 video codec
  '-b:v', '1M',         // Video bitrate
  '-c:a', 'libopus',     // Opus audio codec
  'output.webm'
]).then(() => {
  console.log('Video transcoded successfully');
});

การใช้ฟิลเตอร์วิดีโอ

FFmpeg รองรับฟิลเตอร์วิดีโอหลายแบบที่นำไปใช้กับวิดีโออินพุตได้ ตัวอย่างเช่น ใช้ฟิลเตอร์ crop เพื่อตัดขนาดของภาพวิดีโอ

ffmpeg.exec([
  '-i', 'input.mp4',
  '-vf', 'crop=640:480', // Crop to 640x480
  'output.mp4'
]).then(() => {
  console.log('Video filtered successfully');
});

ข้อควรพิจารณาด้านประสิทธิภาพ

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

การใช้หน่วยความจำ

FFmpeg.wasm อาจใช้หน่วยความจำมาก โดยเฉพาะเมื่อประมวลผลไฟล์วิดีโอขนาดใหญ่ หากต้องการจัดการหน่วยความจำอย่างมีประสิทธิภาพ ลองพิจารณากลยุทธ์ต่อไปนี้

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

ffmpeg.exec([
  '-i', 'input.mp4',
  '-f', 'segment',
  '-segment_time', '10', // Process video in 10-second segments
  'output_%03d.mp4'
]).then(() => {
  console.log('Video processed in segments');
});

การปรับแต่งความเร็ว

หากต้องการเพิ่มความเร็วของ FFmpeg.wasm คุณปรับพารามิเตอร์ต่าง ๆ ได้ เช่น บิตเรตวิดีโอ เฟรมเรต และการตั้งค่าโคเดก

ffmpeg.exec([
  '-i', 'input.mp4',
  '-c:v', 'libx264',  // H.264 video codec
  '-b:v', '500k',     // Lower video bitrate for faster processing
  '-r', '15',         // Lower frame rate
  'output.mp4'
]).then(() => {
  console.log('Video optimized for speed');
});

การผสานรวมกับ dcast.tv

การประมวลผลวิดีโอฝั่งไคลเอนต์ด้วย FFmpeg.wasm ช่วยยกระดับบริการวิดีโอสตรีมมิงอย่าง dcast.tv ได้อย่างมาก การทรานส์โค้ดและใส่ฟิลเตอร์ฝั่งไคลเอนต์ช่วยลดภาระของเซิร์ฟเวอร์ และยกระดับคุณภาพการส่งมอบวิดีโอให้ผู้ใช้ปลายทาง

กรณีใช้งานจริง: การปรับแต่งการไลฟ์สตรีมมิง

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

ตัวอย่าง: การไลฟ์สตรีมมิง

การส่งภาพสดจากกล้องไปยัง RTMP ผ่าน FFmpeg.wasm แทบไม่ใช่การออกแบบสำหรับการใช้งานจริงที่เหมาะสม เพราะโดยปกติเบราว์เซอร์จะเผยแพร่ผ่าน WebRTC หรือ SDK ของผู้ให้บริการไปยังมีเดียเซิร์ฟเวอร์ ส่วน OBS หรือฮาร์ดแวร์เอนโค้ดเดอร์จะรับหน้าที่อินเจสต์ RTMP/SRT การส่งเฟรมจากแคนวาสผ่าน FFmpeg แบบ wasm กินซีพียูมากและเปราะบาง ควรมอง FFmpeg.wasm ว่าเหมาะที่สุดกับ การแปลงไฟล์ฝั่งไคลเอนต์ (ตัด ทรานส์โค้ดคลิปสั้น) ส่วนงานไลฟ์ให้ใช้เส้นทางอินเจสต์ที่มีมาตรฐานรองรับ

ผลกระทบด้านความปลอดภัย

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

มาตรการลดความเสี่ยง

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

อนาคตของ FFmpeg และ WebAssembly

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

การคาดการณ์

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

บทสรุป

FFmpeg.wasm คือความก้าวหน้าครั้งสำคัญของการประมวลผลวิดีโอฝั่งไคลเอนต์ ช่วยให้นักพัฒนาทำงานซับซ้อนได้โดยตรงในเบราว์เซอร์ การใช้ประโยชน์จาก WebAssembly ช่วยเพิ่มประสิทธิภาพ ปรับปรุงประสบการณ์ผู้ใช้ และทำให้การส่งมอบวิดีโอคล่องตัว เมื่อเทคโนโลยีพัฒนาต่อไป FFmpeg.wasm มีแนวโน้มจะกลายเป็นเครื่องมือสำคัญของนักพัฒนาเว็บและครีเอเตอร์คอนเทนต์