BioPass ID Face SDK JavaScript. (原始内容存档于2018-09-29).
关键特性 二. 支助 自定义 二. 支助 演示 二. 支助 第一步 二. 支助 安装 二. 支助 如何使用 二. 支助 示例 二. 支助 支助
关键特性
- 脸部检测
- 我们保证只有一张面孔
- 脸部定位
- 确保您在抓取时的面部位置, 以便更好的注册和匹配 .
- 自动抓取
- 当一个面孔被检测到时,捕获将在您配置的几秒内进行.
- 分辨率控制
- 配置图像大小思考图像质量与API响应时间之间的取舍.
- 光谱比控
- 完全自定义的接口
自定义
在不损害用户体验的情况下,增强应用程序的安全性.
所有可用的定制 :
- 标题文本
- 帮助文本
- 正在装入文本
- 字体家族
- 面框
- 重叠
- 默认相机
- 抓取按钮
启用或禁用组件 :
- 标点文字
- 帮助文本
- 抓取按钮
- 按钮图标
- 翻转相机按钮
- 闪光按钮
更改所有颜色 :
- 重叠颜色和不透明
- 抓取按钮颜色
- 抓取按钮文本颜色
- 翻转相机颜色
- 闪光按钮颜色
- 文本颜色
演示
探索我们的特性 让你的应用程序做更多.
网络演示 - BioPass ID Face SDK JavaScript 和 API's
第一步
首先在您的应用程序的静态文件目录中创建一个名为模型的文件夹 。 装入并添加此两个文件
您的文件夹结构将像这样 :
/assets
/js
/css
/models
- tiny_face_detector_model-shard1
- tiny_face_detector_model-weights_manifest.json
/index.html
安装
通过捆绑器
安装依赖 :
npm i --save @biopassid/face-sdk
在您的工程中使用 :
import { camera } from '@biopassid/face-sdk'
通过CDN
将脚本添加到工程中, 模块将注入一个名为 faceSdk 的对象内:
<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/face-sdk.min.js"></script>
<script>
const {takePicture} = faceSdk.camera();
async function handleTakePicture() {
const resp = await takePicture({
element: document.querySelector("#elementId"),
})
}
handleTakePicture();
</script>
如何使用
基本用途
import { camera } from '@biopassid/face-sdk'
<script>
const {takePicture} = camera();
async function handleTakePicture() {
const resp = await takePicture({
element: document.querySelector("#elementId"),
})
}
handleTakePicture();
</script>
添加面部验证
取Picture函数有一个叫"面相检测Adapter"的参数,这个函数负责进行验证处理,FaceSDK有一个用于面相检测的标准适配器. 还需要运行负责装入模型的函数
import { camera, faceDetectionAdapter, loadFaceDetectorModels } from '@biopassid/face-sdk'
const { takePicture } = camera();
async function handleTakePicture() {
await loadFaceDetectorModels(); // Carregamento dos modelos
const resp = await takePicture({
element: document.querySelector("#elementId"),
faceDetectionAdapter: faceDetectionAdapter,
})
}
添加自动抓取
要添加自动捕获,只需在选项参数内激活功能.
import { camera, faceDetectionAdapter, loadFaceDetectorModels } from '@biopassid/face-sdk'
const { takePicture } = camera();
async function handleTakePicture() {
await loadFaceDetectorModels();
const resp = await takePicture({
element: document.querySelector("#elementId"),
faceDetectionAdapter: faceDetectionAdapter,
options: {
faceDetection: {
autoCapture: true
}
},
})
}
国际化
可以通过参数i18n定义在面部检测时显示的文本.
import { camera, faceDetectionAdapter } from '@biopassid/face-sdk'
const { takePicture } = camera();
async function handleTakePicture() {
const resp = await takePicture({
element: document.querySelector("#elementId"),
faceDetectionAdapter: faceDetectionAdapter,
i18n: {
noFacesDetected: "Nenhuma face detectada",
multipleFacesDetected: "Multiplas faces detectadas",
moveFaceLeft: "Mova o rosto para a esquerda",
moveFaceRight: "Mova o rosto para a direita",
moveFaceUp: "Mova o rosto para cima",
moveFaceDown: "Mova o rosto para baixo",
moveFaceBack: "Mova o rosto para trás",
moveFaceCloser:: "Mova o rosto para frente"
keepStill: "Mantenha o rosto parado",
},
options: {
faceDetection: {
autoCapture: true
}
},
})
}
示例
带有全部属性的示例
所有元素都是可选的
const resp = await takePicture({
element: document.querySelector("#camera"),
options: {
mask: {
enabled: true,
type: "face",
backgroundColor: "black",
backgroundOpacity: 0.6,
frameColor: "white",
frameThickness: 3,
},
backButton: {
enabled: true,
size: "30px",
backgroundColor: "transparent",
label: {
enabled: false,
content: "",
fontSize: "1rem",
fontWeight: "normal",
color: "white",
},
icon: {
enabled: true,
source: null,
color: "white",
size: "30px",
},
padding: "0",
},
captureButton: {
enabled: true,
size: "30px",
backgroundColor: "white",
label: {
enabled: false,
content: "",
fontSize: "1rem",
fontWeight: "normal",
color: "black",
},
icon: {
enabled: true,
source: null,
color: "black",
size: "30px",
},
padding: string,
},
cancelButton: {
enabled: true,
size: "30px",
backgroundColor: "red",
label: {
enabled: false,
content: "",
fontSize: "1rem",
fontWeight: "normal",
color: "white",
},
icon: {
enabled: true,
source: null,
color: "white",
size: "30px",
},
padding: "0",
},
confirmButton: {
enabled: true,
size: "30px",
backgroundColor: "white",
label: {
enabled: false,
content: "",
fontSize: "1rem",
fontWeight: "normal",
color: "black",
},
icon: {
enabled: true,
source: null,
color: "black",
size: "30px",
},
padding: string,
},
legend: {
title: {
enabled: true,
content: "Captura Facial",
fontSize: "1.5rem",
fontWeight: "600",
color: "white",
},
subtitle: {
enabled: true,
content: "",
fontSize: "1rem",
fontWeight: "normal",
color: "white",
},
},
faceDetection: {
enabled: true,
autoCapture: false,
timeToCapture: 3000,
timeToCaptureFeedbackColor: "#FF0000",
multipleFacesEnabled: true,
scoreThreshold: 0.1,
},
width: "100%",
height: "100%",
modelsDirectory: "/models",
cameraPresets: {
aspectRatio: 16 / 9,
preferredResolution: 480,
deviceId: null,
facingMode: "environment",
},
fontFamily: "inherit",
formatImage: "image/jpeg",
},
});
选项
要了解更多 SDK 的选项和方法,你可以查看我们完整的文件
更改日志
1.3.46 (中文(简体) )
中断更改
- 在通过CDN使用插件时,功能被存储在一个名为faceSdk的对象上.
<!-- After -->
<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/face-sdk.min.js"></script>
<script>
const { takePicture } = faceSdk.camera();
</script>
<!-- Before -->
<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/face-sdk.min.js"></script>
<script>
const { takePicture } = camera();
</script>