		@@ -1,9 +0,123 @@
		# BioPass ID Face SDK Web
		<h1 align="center">
		<br>
		<a href="http://www.biopassid.com"><img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0d4cec83bbddea006d27a_biopassamarelo.svg" alt="BioPass ID" width="200"></a>
		<br>

		Componente web de integração do BioPass ID
		<br>
		</h1>

		<h4 align="center">BioPass ID Face SDK JavaScript.</h4>

		# Getting started
		Primeiramente crie uma pasta chamada models no diretório de arquivos estáticos da sua aplicação, e adicione os arquivos tiny_face_detector_model-shard1 e tiny_face_detector_model-weights_manifest.json. Sua estrutura de pastas ficará semelhante a isso:
		```
		<p align="center">
		<a href="#">
		<img src="https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black">
		</a>
		<a href="https://www.npmjs.com/package/@biopassid/face-sdk"><img src="https://badge.fury.io/js/@biopassid%2Fface-sdk.svg" alt="npm version" height="18"></a>
		</a>
		<a href="https://www.instagram.com/biopassid/"><img src="https://img.shields.io/badge/Instagram-E4405F?logo=instagram&logoColor=white"></a>
		<a href="https://www.biopassid.com/">
		<img src="https://img.shields.io/badge/BioPass%20ID-C59F64.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAASCAYAAABrXO8xAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFASURBVHgBfVKBVcJQDEx5DFAnoBvYDVo3qBMgG7CBMAEygTKBOgHdgDqBOIHdoN7RC4Yvz7x37zfXXq7JTzYMw8HMcmChcw5s7TduyWdZtg6cTfSxRw+UCXcDNDAootBIAA8hr4mQP+tcXrxLheJWoUgs+jmMMZva/zFHb4uQv7NncF/ssQEqVIl9dcgf9WGMDrjnAx17kXEAFVADd4mwgFvvwpYPIF7sskcW8WF0wcBceC342zsUW6kQi+zdhDFJFZriW+LAQnEp/goRFZxaF8qtBPeEc+3XM7nitlNaSLT0/nEexedpj0UYEnd0Y+MOn52BGfvNRNT6uGVVcLzbVxun6Xd5VM537TRxcxGLcUBb9WvB1U6cdnWvvdz4EotvgijnDM5LosX9lqgIKPWuDM8HLxRX7iP06tFpIDE/xQ/gt+sCdAaM0AAAAABJRU5ErkJggg==">
		</a>
		</a>
		<a href="https://www.biopassid.com/contacts">
		<img src="https://img.shields.io/badge/Contact-us-1abc9c.svg">
		</a>
		</p>

		<p align="center">
		<a href="#key-features">Key Features</a> •
		<a href="#customizations">Customizations</a> •
		<a href="#demo">Demo</a> •
		<a href="#firststeps">First Steps</a> •
		<a href="#nstalling">Installing</a> •
		<a href="#how-to-use">How To Use</a> •
		<a href="#example">Example</a> •
		<a href="https://www.biopassid.com/contacts">Support</a>
		</p>



		## Key Features

		* Face Detection
		- We ensure that there will be only one face in the capture
		* Face Positioning
		- Ensure face position in your capture for better enroll and match.
		* Auto Capture
		- When a face is detected the capture will be performed in how many seconds you configure.
		* Resolution Control
		- Configure the image size thinking about the tradeoff between image quality and API's response time.
		* Aspect Ratio Control
		* Fully customizable interface


		## Customizations

		<p align="center">
		<a href="https://www.biopassid.com/sdk/face-sdk">
		<img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0bca342c10af38e3e5bd1_62b9ac85b996b1dcb029dbce_tela-6.png">
		</a>
		<a href="https://www.biopassid.com/sdk/face-sdk">
		<img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0bca30c9cb42c9b39652d_62b9ac8549699712ef691028_tela-4.png">
		</a>
		<a href="https://www.biopassid.com/sdk/face-sdk">
		<img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0bca353ee8649d6524ba0_62b9ac858e98680c7f5c178f_tela-5.png">
		</a>
		</p>

		Increase the security of your applications without harming your user experience.

		All customization available:
		- Title Text
		- Help Text
		- Loading Text
		- Font Family
		- Face Frame
		- Overlay
		- Default Camera
		- Capture button

		Enable or disable components:
		- Tittle text
		- Help Text
		- Capture button
		- Button icons
		- Flip Camera button
		- Flash button

		Change all colors:
		- Overlay color and opacity
		- Capture button color
		- Capture button text color
		- Flip Camera color
		- Flash Button color
		- Text colors


		## Demo

		Explore our features that make your apps do more.

		[Web Demo](https://demo.biopassid.com/sdk) - of BioPass ID Face SDK JavaScript and API'S


		<p align="center">
		<a href="https://demo.biopassid.com/sdk">
		<img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0b07c2afd7e6307462d8b_demo.biopassid.com_sdk_1.gif">
		</a>
		</p>


		## First Steps

		First create a folder called models in your application's static files directory. Donwload and add this two files

		[tiny_face_detector_model-shard1](https://github.com/biopass-id/face-sdk-js/raw/main/models/tiny_face_detector_model-shard1.shard)

		[tiny_face_detector_model-weights_manifest](https://unpkg.com/@biopassid/face-sdk@1.3.6/models/tiny_face_detector_model-weights_manifest.json)


		Your folder structure will look like this:

		```bash
		/assets
		@@ -18,56 +132,62 @@ /js

		Após isso basta instalar o pacote.

		## Com um bundler
		## Installing

		Intale a dependencia:
		```
		> Through bundler

		Install the dependency:

		```bash
		npm i --save @biopassid/face-sdk
		```

		Utilize no seu projeto
		```
		Use in your project:

		```bash
		import { camera } from '@biopassid/face-sdk'
		```

		## Através de CDN
		> Through CDN

		Adicione o script ao projeto e os módulos serão injetados dentro de um objeto chamado faceSdk;
		Add the script to the project and the modules will be injected inside an object called faceSdk:

		```html
		<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/unpkg/face-sdk.min.js"></script>
		```bash
		<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/face-sdk.min.js"></script>
		<script>
		const { takePicture } = faceSdk.camera();
		const {takePicture} = faceSdk.camera();
		async function handleTakePicture() {
		const resp = await takePicture({
		element: document.querySelector("#elementId"),
		})
		}
		handleTakePicture();


		</script>
		```

		# Modulos
		- camera
		<br/>
		## How To Use

		# camera
		> Basic usage

		O módulo camera oferece as seguintes funcionalidades.

		# Uso básico

		```js
		```bash
		import { camera } from '@biopassid/face-sdk'
		<script>
		const {takePicture} = camera();
		async function handleTakePicture() {
		const resp = await takePicture({
		element: document.querySelector("#elementId"),
		})
		}
		handleTakePicture();
		</script>
		```

		const { takePicture } = camera();

		async function handleTakePicture() {
		const resp = await takePicture({
		element: document.querySelector("#elementId"),
		})
		}
		```
		> Adding Face Validation

		Para um funcionamento ideal da biblioteca, certifique-se de que a aceleração de hardware do seu navegador esteja ativada.
		The takePicture function has an argument called "faceDetectionAdapter", which is a function responsible for performing the validation processing, the FaceSDK has a standard adapter for face detection. It is also necessary to run the function responsible for loading the models

		# Adicionando validação facial
		A função takePicture possui um argumento chamado "faceDetectionAdapter", que é uma função responsável por realizar o processamento da validação, o FaceSDK possui um adapter padrão para a detecção facial.
		Também é necessário executar a função responsável pelo carregamento dos modelos

		```js
		```bash
		import { camera, faceDetectionAdapter, loadFaceDetectorModels } from '@biopassid/face-sdk'
		@@ -86,7 +206,7 @@
		```
		> Adding Auto Capture

		# Adicionando captura automática
		Para adicionar a captura automática, basta ativar a funcionalidade dentro do parâmetro de opções.
		To add automatic capture, simply activate the functionality within the options parameter.

		```js
		```bash
		import { camera, faceDetectionAdapter, loadFaceDetectorModels } from '@biopassid/face-sdk'
		@@ -111,6 +231,7 @@

		# Internacionalização
		É possível definir os textos apresentados durante a detecção facial através do parâmetro i18n.
		> Internationalization

		```js
		It is possible to define the texts displayed during face detection through parameter i18n.

		```bash
		import { camera, faceDetectionAdapter } from '@biopassid/face-sdk'
		@@ -142,97 +263,8 @@

		## Options
		O método takePicture() pode receber um parametro opcional "options", que possui as seguintes propriedades:
		## Example

		Nome \| Tipo \| Descrição \| Default
		-----\|------\|-----------\|--------
		mask \| MaskOptions \| Define as propriedades da máscara \| null
		backButton \| ButtonOptions \| Define as propriedades do botão de voltar \| null
		captureButton \| ButtonOptions \| Define as propriedades do botão de capturar a foto \| null
		cancelButton \| ButtonOptions \| Define as propriedades do botão de cancelar foto \| null
		confirmButton \| ButtonOptions \| Define as propriedades do botão de confirmar foto \| null
		switchButton \| ButtonOptions \| Define as propriedades do botão de trocar câmera \| null
		loading \| LoadingOptions \| Define as propriedades do loading \| null
		legend \| LegendOptions \| Define as propriedades da legenda com as informações da captura \| null
		faceDetection \| FaceDetectionOptions \| Define as propriedades do detector facial \| null
		width \| string \| Largura do container \| '100%'
		height \| string \| Altura do container \| '100%'
		modelsDirectory \| string \| Diretório dos models de reconhecimento facial \| '/models'
		cameraPresets \| CameraPresets \| Define as propriedades da camera \| null
		fontFamily \| string \| Fonte padrão dos textos \| 'inherit'
		formatImage \| ` 'image/png' \\| 'image/jpeg' \\| 'image/webp' `\| Define o formato da foto capturada \| 'image/png'
		> Example with all properties

		# Interfaces
		All elements are optional

		MaskOptions
		-----------
		Propriedades \| Tipo \| Descrição \| Default
		-------------\|------\|-----------\|--------
		enabled \| ``` boolean ``` \| Elemento ativo \| true
		type \| ``` 'face' \\| 'square' \\| 'ellipsis' ``` \| Formato da máscara \| "face"
		backgroundColor \| ``` string ``` \| Cor da máscara \| 'black'
		backgroundOpacity \| ``` number ``` \| Opacidade da mascara \| .6
		frameColor \| ``` string ``` \| Cor do frame \| "white"
		frameThickness \| ``` number ``` \| Espessura do frame \| 3


		ButtonOptions
		-----------
		Propriedades \| Tipo \| Descrição
		-------------\|------\|----------
		enabled \| ``` boolean ``` \| Elemento ativo
		size \| ``` string ``` \| Tamanho do botão
		backgroundColor \| ``` string ``` \| Cor do botão
		label \| ``` TextOptions ``` \| Opções do Label do botão
		icon \| ``` IconOptions ``` \| Opções do ícone do botão
		padding \| ``` number ``` \| Espaçamento lateral do botão

		TextOptions
		-----------
		Propriedades \| Tipo \| Descrição
		-------------\|------\|----------
		enabled \| ``` boolean ``` \| Elemento ativo
		content \| ``` string ``` \| Conteúdo do texto
		fontSize \| ``` string ``` \| Tamanho da fonte
		fontWeight \| ``` number ``` \| Peso da fonte
		color \| ``` string ``` \| Cor da fonte

		IconOptions
		-----------
		Propriedades \| Tipo \| Descrição
		-------------\|------\|----------
		enabled \| ``` boolean ``` \| Elemento ativo
		source \| ``` string ``` \| URL da imagem
		color \| ``` string ``` \| Cor do ícone (Funciona apenas de source não estiver definidio)
		size \| ``` string ``` \| Tamanho do ícone

		CameraPresets
		-----------
		Propriedades \| Tipo \| Descrição
		-------------\|------\|----------
		aspectRatio \| ``` number ``` \| Aspecto da camera ideal
		preferredResolution \| ``` number ``` \| Resolução da câmera ideal
		deviceId \| ``` string ``` \| ID padrão do dispositivo

		LegendOptions
		-----------
		Propriedades \| Tipo \| Descrição
		-------------\|------\|----------
		enabled \| ``` boolean ``` \| Elemento ativo
		title \| ``` boolean ``` \| Título da legenda
		subtitle \| ``` number ``` \| Subtítulo da legenda

		FaceDetectionOptions
		-----------
		Propriedades \| Tipo \| Descrição
		-------------\|------\|----------
		enabled \| ``` boolean ``` \| Elemento ativo
		autoCapture \| ``` boolean ``` \| Ativa a captura automática
		timeToCapture \| ```number``` \| Tempo para realizar a captura automática em milisegundos
		timeToCaptureFeedbackColor \| ```string``` \| Cor do feedback de deteção facial
		multipleFacesEnabled \| ```boolean``` \| Permite a captura de foto com duas ou mais faces
		scoreThreshold \| ```number``` \| Limite mínimo de confiança para uma detecção ser considerada válida. Deve ser um número entre 0 e 1, onde 0.1 apresente um nível de confiaça para detecção de rosto menor e 0.9 seria um maior nível de confiança. Default: 0.5

		## Exemplo com todas as propriedades
		Lembrando que todos os elementos são opcionais

		```js
		@@ -363,12 +395,20 @@ const resp = await takePicture({
		```
		# Changelog

		### Options

		To know more about all SDK options and methods you can visit our complete documentation

		[Documentation](https://docs.biopassid.com/#2ea0bce8-d144-4c8b-a44b-de3107ab9db1)


		## Changelog

		## 1.3.22

		### Breaking Changes
		- Ao utilizar o plugin via CDN as funções são armazenadas em um objeto de nome faceSdk.
		- When using the plugin via CDN, the functions are stored in an object named faceSdk.

		```html
		<!-- Forma atual -->
		<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/unpkg/face-sdk.min.js"></script>
		<!-- After -->
		<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/face-sdk.min.js"></script>
		<script>
		@@ -378,7 +418,7 @@ const { takePicture } = faceSdk.camera();

		<!-- Antes -->
		<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/unpkg/face-sdk.min.js"></script>
		<!-- Before -->
		<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/face-sdk.min.js"></script>
		<script>
		const { takePicture } = camera();
		</script>
		```
		```

@biopassid/face-sdk - npm Package Compare versions

Improved metrics