p-camera-h5 📷

一款轻量级 H5 相机插件，支持拍照、录像、文字图片水印与高度样式定制化，适配现代浏览器，为 Web 应用提供原生级摄像头体验。

✨ 核心特性

• 即时捕获
  📸 拍照（PNG 格式） | 🎥 录像（WEBM 格式，最长 60 秒）
• 动态水印
  🖼️ 支持文字内容、位置、颜色、字体大小灵活配置
• 无缝集成
  ⚡ 极简 API 设计 | 🔧 CSS 样式与交互行为全定制
• 跨平台
  🌍 完整适配桌面端与移动端浏览器

📦 安装

NPM

npm install p-camera-h5 --save

CDN

<script src="https://unpkg.com/p-camera-h5@latest/dist/p-camera-h5.umd.js"></script>

🚀 快速接入

<div id="el" style="width: 300px; height: 500px"></div>

import pCameraH5 from "p-camera-h5";

const camera = new pCameraH5({
  el: document.querySelector("#el"), // 容器选择器
  style: `
    #p-camera-h5 #p-record-time {
      color: rgba(255, 255, 255, 0.9);
    }
  `, // 自定义样式
  watermark: {
    visible: true,
    x: 10,
    y: 290,
    text: {
      text: "pCameraH5",
      color: "rgba(255, 255, 255, 0.5)",
      fontSize: "18px",
    }, // 文字水印
  },
});

// 事件监听
camera.on("capture", (file) => {
  console.log("📷 照片已捕获:", file);
  camera.downloadFile(file, "photo.png"); // 自动下载
});

camera.on("record", (file) => {
  console.log("🎥 视频已生成:", file);
  camera.downloadFile(file, "video.mp4");
});

⚙️ 配置项

| 参数 | 类型 | 默认值 | 说明 | | ------------ | ----------- | ------------------ | ----------------------------------------- | | el | HTMLElement | 必填 | 挂载容器元素 | | facingMode | string | environment | 摄像头方向，默认后置，可选 user（前置） | | isAudio | boolean | false | 是否开启音频录制，默认关闭 | | style | string | "" | 自定义 CSS 样式字符串 | | watermark | object | { visible: true} | 水印配置对象 |

水印配置对象说明：

| 参数 | 类型 | 默认值 | 说明 | | --------- | ------- | --------------------------------------------------------------------------- | ---------------- | | visible | boolean | false | 是否显示水印 | | x | number | 10 | 水印 x 坐标 | | y | number | 10 | 水印 y 坐标 | | text | object | { text: 'pCameraH5', fontSize: '18px', color: 'rgba(255, 255, 255, 0.5)'} | 文字水印配置对象 | | image | object | { url: '', width: 100, height: 100 } | 图片水印配置对象 |

📚 API 方法

| 方法 | 说明 | 示例 | | ------------------ | -------------------- | ------------------------------- | | init() | 初始化摄像头 | camera.api.init() | | capture() | 拍摄照片 | camera.api.capture() | | startRecording() | 开始录像 | camera.api.startRecording() | | stopRecording() | 停止录像 | camera.api.stopRecording() | | destroy() | 销毁实例（释放资源） | camera.api.destroy() | | downloadFile() | 下载文件 | camera.api.downloadFile(file) |

🔌 事件系统

// 监听事件
camera.on("capture", handlePhoto);
camera.on("record", handleVideo);

// 移除事件
camera.off("capture", handlePhoto);

📝 样式自定义

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>

默认样式参考

#p-camera-h5 {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: relative;
}
#p-camera-h5 div {
  box-sizing: border-box;
}
#p-camera-h5 #p-loading,
#p-camera-h5 #p-error {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  color: #fff;
  line-height: 30px;
  text-align: center;
  padding: 50px;
  font-size: 18px;
  z-index: 200;
}
#p-camera-h5 #p-error {
  display: none;
  z-index: 900;
}

#p-camera-h5 #p-container {
  width: 100%;
  height: calc(100% - 150px);
  position: absolute;
  top: 50px;
  left: 0;
}
#p-camera-h5 #p-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
#p-camera-h5 #p-canvas {
  width: 100%;
  height: 100%;
}
#p-camera-h5 #p-capture-btn,
#p-camera-h5 #p-record-btn {
  width: 80px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #fff;
}
#p-camera-h5 #p-capture-btn {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 90px);
}
#p-camera-h5 #p-record-btn {
  position: absolute;
  bottom: 30px;
  left: calc(50% + 10px);
}
#p-camera-h5 #p-watermark-btn {
  position: absolute;
  top: 15px;
  right: 10px;
  z-index: 100;
  width: 60px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #fff;
  font-size: 12px;
}
#p-camera-h5 #p-record-time {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  line-height: 50px;
  color: white;
  font-size: 18px;
  text-align: center;
}

🚨 重要说明

1. 安全协议
   需在 HTTPS 环境或 localhost 下运行（浏览器安全策略要求）
2. 权限管理
   首次使用需用户授权摄像头和麦克风权限
3. 格式说明
   录像实际输出为 WEBM 格式，MP4 下载通过自动转换实现

🛠️ 开发构建

git clone https://github.com/pbstar/p-camera-h5.git
npm install
npm run build

欢迎通过 Issues 提交建议或贡献代码！🚀