【開源推薦】p-camera-h5：一款輕量級H5相機插件開發實踐

一、插件背景

在Web開發中，原生攝像頭功能的集成往往面臨以下痛點：

• 瀏覽器兼容性問題
• 視頻流與水印疊加實現復雜
• 移動端適配困難
• 功能定制成本高

為此，p-camera-h5 —— 一款開箱即用的H5相機插件，支持拍照、錄像、動態水印與樣式高度定制化。

---

二、核心功能全景

• 即時捕獲：拍照（PNG）、錄像（WEBM/自動轉MP4）
• 動態水印：支持定位+樣式自定義
• 開放樣式：支持樣式自定義

三、快速集成指南

1. 基礎配置

<!-- 容器需設置明確尺寸 -->
<div id="camera-wrap" style="width: 300px; height: 500px"></div>

2. 進階配置

const camera = new pCameraH5({el: document.getElementById("camera-wrap"),style: `.p-camera-btn { box-shadow: 0 2px 8px rgba(0,0,0,0.1);}`,watermark: {text: `${new Date().toLocaleString()}`, // 動態水印position: "bottom-left",color: "rgba(255,50,50,0.7)",fontSize: "14px"}
});

2. 樣式定制化

dom結構參考

  <div id="p-camera-h5"><div id="p-loading">加載中...</div><div id="p-error"></div><div id="p-container"><video id="p-video" autoplay playsinline></video><canvas id="p-canvas" style="display:none;"></canvas></div><div id="p-watermark-btn">關閉水印</div><div id="p-capture-btn">拍照</div><div id="p-record-btn">錄制</div><div id="p-record-time">00:00</div></div>

---

四、核心實現解析

1. 視頻流處理架構

2. 關鍵技術點

• 雙流分離：原始流與處理流獨立，避免權限沖突
• Canvas優化：使用requestAnimationFrame實現60FPS繪制

---

五、避坑指南

1. 常見問題排查

現象	解決方案
黑屏無畫面	檢查https協議/攝像頭權限
水印位置偏移	確認容器是否為靜態布局
移動端畫面拉伸	添加width=device-width meta

---

六、項目資源

• GitHub倉庫
• 在線演示
• NPM包

如果本文對您有幫助，歡迎點贊/收藏/關注三連支持！?? 我們評論區見~