# A-Frame plugin
Documentation of the [A-Frame](https://aframe.io){ ._blank } plugin. Study the [demos](../demos.md) for elaborate examples.
*Since:* 0.3.0
## Basics
### Example
A basic augmented scene can be constructed as follows:
```html
```
[{ .responsive }](../img/demo-box.gif){ ._blank }
### encantar
The `encantar` component *enchants* ``, so that it displays content in AR.
**Properties**
* `mode: string`. The [session mode](./session.md#mode). Defaults to `"immersive"`.
* `stats: boolean`. Whether or not to display the built-in stats panel. It's useful during development. Defaults to `false`.
* `gizmos: boolean`. Whether or not to display the [gizmos](./session.md#gizmos). Defaults to `false`.
* `autoplay: boolean`. Whether or not to start the AR [session](./session.md) automatically. Defaults to `true`.
**Example**
```html
...
```
### ar-root
The `` primitive sets up a node of the virtual scene that is automatically aligned to the physical scene. Simply put, children of this node will augment physical reality. `` must be a direct child of ``. It does not have to be unique. See also: [ar-camera](#ar-camera).
**Properties**
* `reference-image: string`. The name of a [reference image](./reference-image.md) or the empty string. This node will be matched to the specified reference image, or to any reference image if this property is the empty string. Defaults to the empty string. See also: [ar-reference-image](#ar-reference-image).
**Example**
```html
...
...
...
...
```
## Visualization
### ar-viewport
The `` primitive sets up the [viewport](./viewport.md) that will be linked to the AR [session](./session.md). It must be unique and a direct child of ``. See also: [ar-hud](#ar-hud).
**Properties**
* `resolution: string`. The [resolution of the viewport](./viewport.md#resolution), which corresponds to the resolution of the virtual scene. See also: [Resolution](./resolution.md).
* `style: string`. The [style of the viewport](./viewport.md#style).
* `fullscreen-ui: component`. A component that controls the built-in fullscreen button. This button included as a convenience if the fullscreen mode is [available](./viewport.md#fullscreenavailable) on the target platform. The following properties are available:
* `enabled: boolean`. Whether or not to display the fullscreen button. Defaults to `true`.
**Example**
```html
...
...
...
```
### ar-hud
The `` primitive sets up a [Heads Up Display](./hud.md), a 2D overlay that is displayed in front of the augmented scene. It's meant to contain HTML elements. Additionally, it must be a direct child of ``. See also: [ar-viewport](#ar-viewport).
**Example**
```html
```
### ar-camera
`` sets up a virtual camera that is ready for AR. It should be unique and a direct child of ``. Do not confuse it with ``, the standard camera from A-Frame. See also: [ar-root](#ar-root).
**Example**
```html
...
...
```
## Sources
### ar-sources
The `` primitive is used to specify the [sources of data](./source.md) that will be linked to the AR [session](./session.md). It must be unique and a direct child of ``.
**Example**
```html
...
...
...
```
### ar-camera-source
`` sets up a [CameraSource](./camera-source.md), which is source of data linked to a webcam. It must be a direct child of ``.
**Properties**
* `resolution: string`. The preferred [resolution of the camera](./camera-source.md#resolution). See also: [Resolution](./resolution.md).
* `facing-mode: string`. The preferred camera on mobile devices. Typically `"environment"` (rear camera) or `"user"` (front camera). Defaults to `"environment"`.
**Example**
```html
```
### ar-video-source
`` sets up a [VideoSource](./video-source.md), which is a source of data linked to a `