WebAR FácilOpen exampleEspañol

MP4 video and chroma key

<webar-target src="./poster.jpg" target-id="poster">
  <webar-video src="./clip.mp4" width="0.3" orientation="upright"
    chroma-key muted loop></webar-video>
</webar-target>

Set orientation="upright" to stand the video up or orientation="flat" to lay it along the marker. Use chroma-key for a uniform key background and tune key-color, similarity, smoothness and spill using the actual footage. A compatible MP4 with a flat, evenly lit background produces a cleaner cutout. Muted playback works with more autoplay policies. For audio, provide a user action that starts playback and handle browser rejection.

In a custom Three.js scene, ThreeARVideo provides the equivalent programmatic content. Manage its playback and disposal with the scene lifecycle. If a remote video plays as a plain HTML element but fails as a texture, check its CORS response headers.

Support WebAR Fácil