AI & AR Web Platform

這是一套提供給品牌客戶使用的 B2B AR Web Platform。客戶可以將虛擬試妝功能嵌入自有網站，讓消費者直接透過手機或電腦的相機，即時預覽彩妝產品的使用效果。

我主要負責前端架構、Web SDK 功能開發、瀏覽器與行動裝置相容性處理，以及產品事件追蹤。

可嵌入式 Web SDK

專案透過 Webpack 打包出單一入口檔案 sdk.js，讓客戶能以 <script> 的形式將虛擬試妝功能嵌入自有網站。SDK 對外提供初始化、開啟試妝介面、切換產品及監聽狀態等 API。

介面層使用 React 開發，負責拍照操作、臉部偵測結果提示、載入狀態及錯誤訊息等使用者互動。核心層則透過 JavaScript 串接 WebAssembly 與渲染引擎，取得相機的 MediaStream，並將 AR 效果即時呈現在瀏覽器中。

為了支援產品分析與客戶端營運需求，平台同時整合 GA4 與 Countly。我與業務團隊共同梳理使用者流程，定義試妝介面開啟、產品切換、相機授權、拍照及錯誤發生等事件，讓團隊能分析使用者行為與功能使用情況。

不同作業系統與瀏覽器對 MediaStream、相機權限及裝置選擇的實作並不完全一致。問題可能發生在權限請求、前後鏡頭切換、影像擷取或畫面渲染等不同階段。

面對這類問題，我會先依裝置、作業系統、瀏覽器版本及錯誤發生階段進行分類，再建立可重現的測試情境，逐步確認問題來自瀏覽器行為、MediaStream 狀態，或後續渲染流程。

對於無法透過統一方式解決的問題，則會針對特定平台加入相容性處理與替代方案，並避免影響其他已正常運作的環境。

由於產品使用者高度集中於 iOS 裝置，每次 iOS 與 Safari 發布新版本後，都需要優先進行相容性驗證。

專案同時涉及 React UI、WebGL、渲染引擎、MediaStream 與相機硬體，因此系統更新影響的不只是畫面樣式，也可能造成相機無法啟動、影像尺寸改變或渲染異常。

當問題發生在剛發布的系統版本時，通常缺乏完整的公開資料。我會先建立最小可重現案例，確認問題所屬的技術層級，再參考 Apple Developer Forums、瀏覽器官方文件及相關規格進行調查。

若短期內無法等待平台端修正，則會設計影響範圍明確的相容性解法，避免改動影響其他系統或瀏覽器，並持續追蹤後續版本的修正狀況。

在這個專案中，我主要負責 Web SDK 與 React 介面的開發，並處理瀏覽器、行動裝置及相機 MediaStream 的相容性問題。

透過統一的 SDK API，虛擬試妝功能能以相同的整合方式嵌入不同客戶的網站，減少各專案重複開發核心功能的需求。我也參與 GA4 與 Countly 的事件規格整理，讓產品與業務團隊能以一致的方式追蹤使用者操作與錯誤狀況。

在跨瀏覽器問題處理上，我將問題依裝置、系統版本、瀏覽器及發生階段分類，建立可重現的測試方式，並針對特定平台加入影響範圍明確的相容性處理。