English | 繁體中文

Virtual Background Tool 線上會議背景生成器

基於 MediaPipe AI 與 Fabric.js 打造的網頁版虛擬背景編輯器。專為線上會議設計，使用者能輕鬆自訂背景、加入名片資訊與 QR Code。

🌟 主要功能 (Key Features)

• ✂️ AI 去背：整合 MediaPipe Tasks Vision，即時自動辨識人像並移除背景，模擬線上會議真實情境。
• 🎨 自由畫布編輯：整合 Fabric.js 強大的編輯功能，支援拖放文字、圖片、背景調整。
• 📱 即時 QR Code：輸入網址即可動態生成 QR Code 並插入畫布，方便會議中進行外部連結分享。
• 👀 多視角預覽：提供「單人聚焦」與「多人會議」兩種排版預覽模式，確保背景設計在不同情境下的可讀性。
• 💾 一鍵匯出：將設計好的畫布與設定一鍵下載為圖片檔案。

🛠 技術棧 (Tech Stack)

類別	技術/套件	說明
Core	Vite + TypeScript	高效的建置工具與型別安全開發環境
Canvas Engine	Fabric.js v7	處理複雜的 2D 畫布操作與物件管理
AI Model	MediaPipe (Selfie Segmenter)	Google 高效能邊緣運算 AI，實現即時人像分割
Styling	Tailwind CSS v4	最新版 Utility-first CSS 框架
Icons	Google Material Icons	Google Fonts 提供的 Material Symbols
Helpers	iro.js, qrcodejs2	拾色器與二維碼生成工具

🏗 專案架構 (Project Architecture)

本專案採用 Manager Pattern 設計模式，將「畫布編輯」與「AI 影像運算」的職責解耦，確保代碼結構清晰且易於維護。

透過封裝第三方套件的實作細節，簡化了 main.ts 的邏輯樞紐，並利用 config.ts 集中管理參數。

• 📂 src/core/CanvasManager.ts
  • 負責 Fabric.js 實例的生命週期管理。
  • 封裝畫布物件的增刪與樣式修改邏輯。
• 📂 src/core/CameraManager.ts
  • 處理 navigator.mediaDevices 鏡頭串流。
  • 負責 MediaPipe 模型加載與即時推理。
• 📂 src/main.ts
  • 應用程式進入點。
  • 作為 Controller 角色，協調 UI 事件觸發與 Manager 之間的方法調用。

💡 技術挑戰與解決方案 (Technical Challenges)

挑戰：AI 影像與 Fabric.js 畫布的完美疊加與效能優化

在整合 MediaPipe 分割後的人像與 Fabric.js 的虛擬背景時，遇到了層級管理與渲染效能的問題。

• 問題點：
  • 若將 Video 直接繪製在 Canvas 上，每幀重繪 (Re-render) 會導致 Fabric.js 物件操作卡頓。
• 解決方案：
  • 採用 雙層 Canvas 策略 (Dual-Layer Strategy)：
  • 底層：使用 Fabric.js 處理靜態背景、文字與 QR Code 元素。
  • 頂層：利用 CSS Positioning 將處理後的 AI 人像 Canvas 覆蓋於背景之上。

🚀 如何執行 (Getting Started)

確保你的環境已安裝 Node.js (建議 v18+)。

1. Clone 專案

   git clone https://github.com/bbdaii/Virtual-Background-Tool.git
   cd Virtual-Background-Tool

2. 安裝依賴

   npm install

3. 啟動開發伺服器

   npm run dev

   打開瀏覽器訪問 http://localhost:5173 即可使用。

---

© 2026 ChengHsuan