> For the complete documentation index, see [llms.txt](https://docs.facephi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facephi.com/docs.facephi-pt-br/sdks/sdk-web/componentes/videoid-identificacion-en-video/instalacion.md).

# Instalação

## Instalar o componente do widget a partir de um gerenciador de pacotes

O widget pode ser instalado a partir de um registro de pacotes privado ou de um arquivo tgz local.

### Instalar o componente do widget por meio do registro de pacotes privado da Facephi (Recomendado)

1. Crie um arquivo `.npmrc` com as credenciais fornecidas pela equipe da Facephi no diretório raiz.

```bash
# Credenciais npm da Facephi
registry=https://registry.npmjs.org/
@facephi:registry=https://facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:_password=PASSWORDBASE64
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:username=EMAIL
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:email=EMAIL
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:always-auth=true
```

2. Adicione a dependência do pacote do widget em `package.json` com a versão desejada.

```json
"dependencies": {
    "@facephi/sdk-video-id": "1.0.0",
    (...)
}
```

> A versão da dependência pode ser diferente. A equipe da Facephi recomenda usar a última versão disponível.

### Instalar o componente do widget a partir de um arquivo de pacote tgz local

1. Localize o arquivo tgz fornecido pela equipe da Facephi no local desejado.

```
facephi/
  sdk-video-id-1.0.0.tgz
src/
package.json
...
```

2. Instale o pacote com um gerenciador de pacotes.

```bash
npm install ./facephi/sdk-video-id-1.0.0.tgz
```

> O nome ou a versão do arquivo tgz pode ser diferente.

***

### Definição do componente personalizado do widget

Para poder instanciar o componente do widget no DOM, ele deve ser definido.

Uma vez definido com sucesso, o componente do widget será implementado por meio da tag `<facephi-video-id>` no DOM.

#### Definir o elemento personalizado de VideoID

O componente do widget deve ser definido para poder ser implementado.

```javascript
import { defineCustomElements as defineFacephiVideoID } from '@facephi/sdk-video-id/loader';

defineFacephiVideoID(window);
```

#### Compilar para ES5

Em alguns casos, os "polyfills" podem ser aplicados, se necessário.

```javascript
import { applyPolyfills, defineCustomElements as defineFacephiVideoID } from '@facephi/sdk-video-id/loader';

applyPolyfills().then(() => {
  defineFacephiVideoID(window);
});
```

{% hint style="info" %}
Recomenda-se definir o elemento personalizado de VideoID no arquivo `index.js`.
{% endhint %}

Por fim, o widget deve estar instalado com sucesso no seu projeto.