WebcamTexture

Display a live webcam feed with customizable object-fit modes

Props

objectFit"cover" | "contain" | "fill" | "scale-down" | "none"

Default:cover

How the webcam feed should be sized within the viewport

objectFit

"cover" | "contain" | "fill" | "scale-down" | "none"Default: cover

How the webcam feed should be sized within the viewport

mirrorboolean

Default:true

Mirror the webcam feed horizontally (selfie mode)

mirror

booleanDefault: true

Mirror the webcam feed horizontally (selfie mode)

Usage

<Shader>
  <WebcamTexture />
</Shader>

<Shader>
  <WebcamTexture />
</Shader>

<Shader>
  <WebcamTexture />
</Shader>

<Shader>
  <WebcamTexture />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'WebcamTexture', props: {} }
  ]
})

Weave

ZoomBlur

Documentation

WebcamTexture

Props

Usage