# @hzab/camera-previewer

APP 视频预览组件

- node@16.16.0

# 组件

## 示例

```jsx
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                  | 否   | -      | 视频高度                        |
| y          | number                  | 否   | -      | 预览视频播放 top 位置 默认为 0  |
| x          | number                  | 否   | -      | 预览视频播放 left 位置 默认为 0 |

##### pluginConf 插件配置 https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview

| 参数                       | 类型              | 必填 | 默认值 | 说明                                                                                        |
| -------------------------- | ----------------- | ---- | ------ | ------------------------------------------------------------------------------------------- |
| x                          | number            | 否   | -      | 预览视频播放 x 轴位置 默认为 0                                                              |
| y                          | number            | 否   | -      | 预览视频播放 y 轴位置 默认为 0                                                              |
| width                      | number            | 否   | -      | 视频宽度                                                                                    |
| height                     | number            | 否   | -      | 视频高度                                                                                    |
| 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 组件源码

## 命令

- 生成文档：npm run docs
- 本地运行：npm run dev
- 打包编译：npm run build

## 发布

- npm 源和云效源都需要发布

- 命令：npm publish --access public
- 发布目录：
  - src

### nrm

- 安装
  npm install -g nrm
- 增加源
  nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
- 切换源
  nrm use aliyun
  nrm use npm
- 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看）
  npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/

## 配置

### 配置文件

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

### webpack 配置文件

- config/webpack.config.js