@hzab/camera-previewer

APP 视频预览组件

• [email protected]

组件

示例

import CameraPreviewer from "@hzab/camera-previewer";

function Test({ facingMode }) {
  const [img, setImg] = useState(null);
  const cameraPreviewerRef = useRef(null);
  function init(params) {
    cameraPreviewerRef.current = params;
  }
  function onPlay() {
    cameraPreviewerRef.current?.onPlay();
  }
  function onClose() {
    cameraPreviewerRef.current?.onClose();
  }
  function getPic() {
    cameraPreviewerRef.current?.getPicBase64()?.then((res) => {
      console.log(res);
      setImg(res);
    });
  }

  return (
    <CameraPreviewer init={init} videoConf={{ facingMode }}>
      <button onClick={onPlay}>开启</button>
      <button onClick={getPic}>截图</button>
      <button onClick={onClose}>关闭</button>
    </CameraPreviewer>
  );
}

API

InfoPanel Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------ | -------------------- | ---- | ------ | ---------------------------------------------------------------------------------------------------- | | className | string | 否 | - | 容器类名 | | wrapStyle | Object | 否 | - | 容器 style | | autoStart | boolean | 否 | true | 是否自动开始 | | mode | string | 否 | - | 预览模式 video/pluginCameraPreview | | init | Function | 否 | - | 加载成功回调 (params: IInitParams) => void | | videoConf | Object | 否 | - | 视频流配置 | | videoStyle | Object | 否 | - | video 元素 style 配置 | | getContainer | HTMLElement/Function | 否 | - | 指定挂载的节点，但依旧为全局展示，false 为挂载在当前位置 HTMLElement | (() => HTMLElement) | false | | children | ReactNode | 否 | - | 子元素 |

videoConf 视频流配置

• 摄像头参数已进行归一化处理 facingMode，其余个性化配置查看各自模式配置

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ---------- | ----------------------- | ---- | ------ | ---------------------------- | | facingMode | "user" | "environment" | 否 | - | 摄像头 默认为前置摄像头 user |

videoConf video 配置

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ---------- | ----------------------- | ---- | ------ | ---------------------------- | | facingMode | "user" | "environment" | 否 | - | 摄像头 默认为前置摄像头 user | | width | number | 否 | - | 视频宽度 | | height | number | 否 | - | 视频高度 |

pluginConf 插件配置

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------------------- | ----------------- | ---- | ------ | ------------------------------------------------------------------------------------------- | | x | number | 否 | - | 预览视频播放 x 轴位置 默认为 0 | | y | number | 否 | - | 预览视频播放 y 轴位置 默认为 0 | | camera | "back" | "front" | 否 | - | 摄像头 默认为前置摄像头 front | | isFrontCamera | boolean | 否 | - | 是否使用前置摄像头 | | toBack | boolean | 否 | - | html 位于预览视频前面，则设置为 true | | tapPhoto | boolean | 否 | - | 如果 toBack 设置为 false 则不起作用，在这种情况下您使用 takePicture 方法 默认为 true | | tapFocus | boolean | 否 | - | 当视图位于前景时允许用户点击以聚焦 默认为 false | | previewDrag | boolean | 否 | - | 如果 toBack 设置为 false 则不起作用 默认为 false | | storeToFile | boolean | 否 | - | 将图像捕获到文件并返回文件路径，而不是返回 base64 编码数据 默认为 false | | disableExifHeaderStripping | boolean | 否 | - | -仅适用于 Android - 禁用图像的自动旋转，并让浏览器处理它（继续阅读如何实现它） 默认为 false |

组件开发流程

• 在 config/webpack.config.js 中按需修改 library 配置的文件名
• 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
• 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
• npm run dev

文件目录

• example 本地开发测试代码
• src 组件源码

命令

• Mac 执行该命令，设置 pre-commit 为可执行文件

  • npm run mac-chmod
  • chmod +x .husky && chmod +x .husky/pre-commit

• 生成文档：npm run docs

• 本地运行：npm run dev

• 打包编译：npm run build

发布

• 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！

• 命令：npm publish --access public

• 发布目录：

  • src

配置

配置文件

• 本地配置文件：config/config.js

webpack 配置文件

• config/webpack.config.js