> 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/sdks/sdk-web/componentes/videoid-identificacion-en-video/instalacion.md).

# Instalación

## Instalar componente del widget desde un gestor de paquetes

El widget se puede instalar desde un registro de paquetes privado o un archivo tgz local.

### Instalar el componente del widget a través del registro de paquetes privado de Facephi (Recomendado)

1. Crea un archivo `.npmrc` con las credenciales proporcionadas por el equipo de Facephi en el directorio raíz.

```bash
# Credenciales npm de 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. Añade la dependencia del paquete del widget en `package.json` con la versión deseada.

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

> La versión de la dependencia podría ser diferente. El equipo de Facephi recomienda usar la última versión disponible.

### Instalar el componente del widget desde un archivo de paquete tgz local

1. Localiza el archivo tgz proporcionado por el equipo de Facephi en la ubicación deseada.

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

2. Instala el paquete con un gestor de paquetes.

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

> El nombre o la versión del archivo tgz podría ser diferente.

***

### Definición del componente personalizado del widget

Para poder instanciar el componente del widget en el DOM, debe ser definido.

Una vez que se haya definido con éxito, el componente del widget se implementará a través de la etiqueta `<facephi-video-id>` en el DOM.

#### Definir el elemento personalizado de VideoID

El componente del widget debe ser definido para poder ser implementado.

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

defineFacephiVideoID(window);
```

#### Compilar para ES5

En algunos casos, los "polyfills" pueden ser aplicados si se requieren.

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

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

{% hint style="info" %}
Se recomienda definir el elemento personalizado de VideoID en el archivo `index.js`.
{% endhint %}

Finalmente, el widget debería estar instalado con éxito en tu proyecto.