pCameraH5 v2.0：轻量级 H5 相机插件全新升级，支持拍照、录像与自定义水印

在现代 Web 应用开发中，用户对多媒体功能的需求日益增长，尤其是在移动端应用中，相机功能已成为许多产品的核心需求之一。但是原生 API 调用复杂，兼容性处理繁琐，水印功能需要手动 canvas 绘制，性能堪忧。为了满足这一需求，我们推出了轻量级 H5 相机插件 pCameraH5 的全新 v2.0 版本。

在线演示：pbstar.github.io/p-camera-h5

GitHub 仓库：github.com/pbstar/p-ca...

为什么选择 pCameraH5？

pCameraH5 是一款专为现代浏览器设计的轻量级 H5 相机插件，它具有以下核心特性：

即时捕获：支持拍照和录像功能，满足用户多样化的媒体采集需求。
自定义水印：支持文字和图片水印，可自定义位置、颜色、字体大小等属性。
无缝集成：极简的 API 设计，不依赖任何外部库，轻松集成到现有项目中。
跨平台兼容：完整适配桌面端与移动端浏览器，提供一致的用户体验。

相比 v1.0 版本，pCameraH5 v2.0 在功能和性能上都有显著提升：

重构核心代码：使包体积从 14kb 减少到 7kb，更轻量更稳定。
增强水印功能：支持更灵活的水印配置，包括文字水印的字体大小、颜色等自定义选项。
移除内置按钮：移除了 v1.0 版本中的内置按钮，用户由 api 完成交互，更灵活。
优化性能表现：改进了视频流处理逻辑，提升了渲染效率。
完善错误处理：增强了错误处理机制，提供更友好的错误提示。

快速开始

安装

通过 npm 安装：

bash 复制代码

npm install p-camera-h5 --save

或者通过 CDN 引入：

html 复制代码

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

基本使用

在 HTML 中创建一个容器元素：

html 复制代码

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

在 JavaScript 中初始化插件：

javascript 复制代码

import pCameraH5 from "p-camera-h5";

const camera = new pCameraH5({
  el: document.querySelector("#el"), // 容器选择器
  watermark: [
    {
      x: 10,
      y: 10,
      text: "p-camera-h5",
    },
  ],
});

API 方法

pCameraH5 提供了简洁的 API 接口：

capture()：拍摄照片，返回 Promise
startRecording()：开始录像
stopRecording()：停止录像，返回 Promise
destroy()：销毁实例（释放资源）

示例代码：

javascript 复制代码

// 拍照
const captureBtn = document.querySelector("#capture");
captureBtn.addEventListener("click", () => {
  camera.capture().then((file) => {
    // 处理照片文件
    console.log(file);
  });
});

// 录像
const recordBtn = document.querySelector("#record");
recordBtn.addEventListener("click", () => {
  if (recordBtn.textContent === "录像") {
    camera.startRecording();
    // 更新按钮状态
  } else {
    camera.stopRecording().then((file) => {
      // 处理视频文件
      console.log(file);
    });
  }
});

水印配置详解

pCameraH5 支持灵活的水印配置，可以同时添加多个文字或图片水印：

javascript 复制代码

const camera = new pCameraH5({
  el: document.querySelector("#el"),
  isMirror: true,
  watermark: [
    {
      x: 10,
      y: 28,
      text: {
        text: "📷 pCameraH5",
        fontSize: 18,
        color: "rgba(255, 255, 255, 0.5)",
      },
    },
    {
      x: 10,
      y: 58,
      text: "v2.0.0",
    },
    {
      x: 100,
      y: 100,
      img: {
        url: "watermark.png",
        width: 100,
        height: 100,
      },
    },
  ],
});

重要说明

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

结语

pCameraH5 v2.0 版本在保持轻量级特性的基础上，进一步增强了功能和性能，为 Web 应用提供了更优质的相机体验。无论是在桌面端还是移动端，都能为用户提供流畅的拍照和录像功能。

如果你正在寻找一款简单易用、功能强大的 H5 相机插件，不妨试试 pCameraH5。欢迎访问我们的GitHub 仓库了解更多详情，也欢迎通过Issues提交建议或贡献代码！