Class VideoTexture

A texture class that handles video content as texture data. Extends AbstractTexture to provide video-specific functionality including video loading, playback control, and real-time texture updates.

Example

const videoTexture = new VideoTexture();
await videoTexture.generateTextureFromUri('path/to/video.mp4');
videoTexture.play();

Hierarchy (view full)

Constructors

constructor

Properties

__canvasContext? __format __hasTransparentPixels __height __htmlCanvasElement? __htmlImageElement? __img? __internalFormat __isTextureReady __level __mipLevelCount __name __startedToLoad __type __uri? __width _recommendedTextureSampler? _samplerResourceUid _tags _textureResourceUid _textureViewAsRenderTargetResourceUid _textureViewResourceUid autoDetectTransparency autoResize InvalidObjectUID currentMaxObjectCount

Accessors

height htmlCanvasElement htmlImageElement isTextureReady isTransparent name objectUID playbackRate startedToLoad textureUID uniqueName uri width

Methods

_copyFrom createInternalCanvasContext generateTextureFromUri generateTextureFromVideo getCurrentFramePixelData getHeightAtMipLevel getImageData getPixelAs getPixelAsArray getTag getTagValue getTextureDataFloat getWidthAtMipLevel hasTag matchTag matchTags matchTagsAsFreeStrings pause play removeTag setPixel setPixelAtChannel tryToSetTag tryToSetUniqueName unregister updateTexture validateTagString _reset getRnObject getRnObjectByName searchByTag

Constructors

constructor

Properties

Protected Optional__canvasContext

__canvasContext?: CanvasRenderingContext2D

Protected__format

__format: EnumIO = PixelFormat.RGBA

Protected__hasTransparentPixels

__hasTransparentPixels: boolean = false

Protected__height

__height: number = 0

Protected Optional__htmlCanvasElement

__htmlCanvasElement?: HTMLCanvasElement

Protected Optional__htmlImageElement

__htmlImageElement?: HTMLImageElement

Protected Optional__img

__img?: HTMLImageElement

Protected__internalFormat

__internalFormat: TextureFormatEnum = TextureFormat.RGBA8

Protected__isTextureReady

__isTextureReady: boolean = false

Protected__level

__level: number = 0

Protected__mipLevelCount

__mipLevelCount: number = 1

Protected__name

__name: string = 'untitled'

Protected__startedToLoad

__startedToLoad: boolean = false

Protected__type

__type: ComponentTypeEnum = ComponentType.UnsignedByte

Protected Optional__uri

__uri?: string

Protected__width

__width: number = 0

Optional_recommendedTextureSampler

_recommendedTextureSampler?: Sampler

_samplerResourceUid

_samplerResourceUid: number = -1

_tags

_tags: RnTags = {}

Collection of tags associated with this object

_textureResourceUid

_textureResourceUid: number = -1

_textureViewAsRenderTargetResourceUid

_textureViewAsRenderTargetResourceUid: number = -1

_textureViewResourceUid

_textureViewResourceUid: number = -1

autoDetectTransparency

autoDetectTransparency: boolean = false

autoResize

autoResize: boolean = true

Static ReadonlyInvalidObjectUID

InvalidObjectUID: -1 = -1

Invalid object UID constant

StaticcurrentMaxObjectCount

currentMaxObjectCount: number = 0

Current maximum object count for UID generation

Accessors

height

htmlCanvasElement

  • get htmlCanvasElement(): HTMLCanvasElement

  • Gets or creates an HTML canvas element with the texture content. If an image element exists, it will be drawn onto the canvas.

    Returns HTMLCanvasElement

    The HTML canvas element containing the texture data

htmlImageElement

  • get htmlImageElement(): undefined | HTMLImageElement

  • Gets the HTML image element associated with this texture.

    Returns undefined | HTMLImageElement

    The HTML image element or undefined if not available

isTextureReady

  • get isTextureReady(): boolean

  • Checks if the texture is ready for use.

    Returns boolean

    True if the texture is ready, false otherwise

isTransparent

  • get isTransparent(): boolean

  • Checks if the texture contains transparent pixels.

    Returns boolean

    True if the texture has transparency, false otherwise

name

objectUID

  • get objectUID(): number

  • Gets the unique object identifier

    Returns number

    The object's UID

playbackRate

  • get playbackRate(): number

  • Gets the current playback rate of the video.

    Returns number

    The current playback rate, or 1 if no video element is available

    Example

    const currentRate = videoTexture.playbackRate;
    console.log(`Current playback rate: ${currentRate}`);
  • set playbackRate(value): void

  • Sets the playback rate of the video.

    Parameters

    • value: number

      Playback rate multiplier (1.0 = normal speed, 2.0 = double speed, 0.5 = half speed)

    Returns void

    Example

    videoTexture.playbackRate = 2.0; // Play at double speed

startedToLoad

  • get startedToLoad(): boolean

  • Checks if the texture has started loading.

    Returns boolean

    True if loading has started, false otherwise

textureUID

uniqueName

  • get uniqueName(): string

  • Gets the unique name of this object

    Returns string

    The unique name string

uri

  • get uri(): undefined | string

  • Gets the URI/URL of the texture source.

    Returns undefined | string

    The texture URI or undefined if not set

width

Methods

_copyFrom

createInternalCanvasContext

generateTextureFromUri

  • generateTextureFromUri(videoUri, options?): Promise<void>

  • Generates a texture from a video file URI. Creates a video element, loads the specified video, and sets up texture generation. Supports both automatic playback and manual playback via a play button.

    Parameters

    • videoUri: string

      URI of the video file to load

    • options: {
          format: undefined | EnumIO;
          generateMipmap: undefined | boolean;
          internalFormat: undefined | TextureFormatEnum;
          level: undefined | number;
          mutedAutoPlay: undefined | boolean;
          playButtonDomElement: undefined;
          type: undefined | ComponentTypeClass<"UNSIGNED_BYTE">;
      } = {}

      Configuration options for texture generation

      • format: undefined | EnumIO

        Pixel format (default: RGBA)

      • generateMipmap: undefined | boolean

        Whether to generate mipmaps (default: false)

      • internalFormat: undefined | TextureFormatEnum

        Internal pixel format (default: RGBA8)

      • level: undefined | number

        Mipmap level (default: 0)

      • mutedAutoPlay: undefined | boolean

        Whether to enable muted autoplay (default: true)

      • playButtonDomElement: undefined

        Optional button element to trigger manual playback

      • type: undefined | ComponentTypeClass<"UNSIGNED_BYTE">

        Component type (default: UnsignedByte)

    Returns Promise<void>

    Promise that resolves when the texture is ready

    Example

    const playButton = document.getElementById('playBtn');
    await videoTexture.generateTextureFromUri('video.mp4', {
      mutedAutoPlay: false,
      playButtonDomElement: playButton
    });

generateTextureFromVideo

  • generateTextureFromVideo(video, options?): Promise<void>

  • Generates a texture from an existing HTMLVideoElement. Sets up the video element for playback and creates the corresponding WebGL texture.

    Parameters

    • video: HTMLVideoElement

      The HTMLVideoElement to use as texture source

    • options: {
          format: undefined | EnumIO;
          generateMipmap: undefined | boolean;
          internalFormat: undefined | TextureFormatEnum;
          level: undefined | number;
          mutedAutoPlay: undefined | boolean;
          type: undefined | ComponentTypeClass<"UNSIGNED_BYTE">;
      } = {}

      Configuration options for texture generation

      • format: undefined | EnumIO

        Pixel format (default: RGBA)

      • generateMipmap: undefined | boolean

        Whether to generate mipmaps (default: false)

      • internalFormat: undefined | TextureFormatEnum

        Internal pixel format (default: RGBA8)

      • level: undefined | number

        Mipmap level (default: 0)

      • mutedAutoPlay: undefined | boolean

        Whether to enable muted autoplay (default: true)

      • type: undefined | ComponentTypeClass<"UNSIGNED_BYTE">

        Component type (default: UnsignedByte)

    Returns Promise<void>

    Example

    const video = document.getElementById('myVideo') as HTMLVideoElement;
    await videoTexture.generateTextureFromVideo(video, {
      generateMipmap: true,
      mutedAutoPlay: false
    });

getCurrentFramePixelData

  • getCurrentFramePixelData(): (undefined | number | Uint8Array)[]

  • Retrieves the pixel data of the current video frame. Useful for image processing or analysis of video content.

    Returns (undefined | number | Uint8Array)[]

    A tuple containing [pixelData, width, height] where pixelData is a Uint8Array of RGBA values, or [undefined, width, height] if texture is not ready

    Example

    const [pixels, width, height] = videoTexture.getCurrentFramePixelData();
    if (pixels) {
      // Process pixel data
      console.log(`Frame size: ${width}x${height}, pixels: ${pixels.length}`);
    }

getHeightAtMipLevel

getImageData

  • getImageData(x, y, width, height): ImageData

  • Retrieves image data from a rectangular region of the texture. Creates an internal canvas context if one doesn't exist.

    Parameters

    • x: number

      The x-coordinate of the top-left corner

    • y: number

      The y-coordinate of the top-left corner

    • width: number

      The width of the region

    • height: number

      The height of the region

    Returns ImageData

    ImageData object containing the pixel data

getPixelAs

  • getPixelAs(x, y, typeClass): any

  • Gets a single pixel value at the specified coordinates as a specific type. Supports various color and vector types for different use cases.

    Parameters

    • x: number

      The x-coordinate of the pixel

    • y: number

      The y-coordinate of the pixel

    • typeClass:
          | typeof Vector3
          | typeof Vector4
          | typeof MutableVector3
          | typeof MutableVector4
          | typeof ColorRgb
          | typeof ColorRgba

      The class type to return the pixel as (ColorRgb, ColorRgba, Vector3, etc.)

    Returns any

    An instance of the specified type containing the pixel data

getPixelAsArray

  • getPixelAsArray(x, y): Uint8ClampedArray

  • Gets the pixel data at the specified coordinates as a raw Uint8ClampedArray. This provides direct access to the RGBA values as 8-bit integers.

    Parameters

    • x: number

      The x-coordinate of the pixel

    • y: number

      The y-coordinate of the pixel

    Returns Uint8ClampedArray

    A Uint8ClampedArray containing the RGBA pixel data

getTag

getTagValue

  • getTagValue(tagName): any

  • Retrieves the value associated with a specific tag name

    Parameters

    • tagName: string

      The name of the tag whose value to retrieve

    Returns any

    The tag value, or undefined if the tag doesn't exist

getTextureDataFloat

getWidthAtMipLevel

hasTag

  • hasTag(tagName): boolean

  • Checks whether this object has a tag with the specified name

    Parameters

    • tagName: string

      The name of the tag to check for

    Returns boolean

    True if the tag exists (value is not null/undefined), false otherwise

matchTag

  • matchTag(tagName, tagValue): boolean

  • Checks if this object has a tag with the specified name and value

    Parameters

    • tagName: string

      The tag name to match

    • tagValue: string

      The tag value to match

    Returns boolean

    True if the object has a matching tag, false otherwise

matchTags

  • matchTags(tags): boolean

  • Checks if this object has all the specified tags with exactly matching values

    Parameters

    • tags: RnTags

      Object containing tag names as keys and expected values

    Returns boolean

    True if all specified tags exist with matching values, false otherwise

matchTagsAsFreeStrings

  • matchTagsAsFreeStrings(stringArray): boolean

  • Checks if the object's combined tag string contains all the provided search strings. This allows for flexible searching within tag names and values.

    Parameters

    • stringArray: string[]

      Array of strings that must all be present in the combined tag string

    Returns boolean

    True if all strings are found in the combined tag string, false otherwise

pause

play

removeTag

setPixel

setPixelAtChannel

  • setPixelAtChannel(x, y, channelIdx, value): void

  • Sets a specific channel value for a pixel at the given coordinates. Useful for modifying individual color channels (R, G, B, A).

    Parameters

    • x: number

      The x-coordinate of the pixel

    • y: number

      The y-coordinate of the pixel

    • channelIdx: number

      The channel index (0=R, 1=G, 2=B, 3=A)

    • value: number

      The new value for the channel (0-255)

    Returns void

tryToSetTag

  • tryToSetTag(tag): boolean

  • Attempts to set a tag on this object. If the tag already exists, it will be replaced.

    Parameters

    • tag: Tag

      The tag object containing the name and value to set

    Returns boolean

    True if the tag was successfully set, false if the tag name contains invalid characters

tryToSetUniqueName

  • tryToSetUniqueName(name, toAddNameIfConflict): boolean

  • Attempts to set a unique name for this object

    Parameters

    • name: string

      The desired unique name

    • toAddNameIfConflict: boolean

      If true, appends UID to make name unique when conflicts occur; if false, fails on conflict

    Returns boolean

    True if the name was successfully set, false if there was a conflict and toAddNameIfConflict was false

unregister

updateTexture

  • updateTexture(): void

  • Updates the texture with the current video frame. Should be called regularly (e.g., in a render loop) to keep the texture synchronized with the video playback.

    Returns void

    Example

    // In render loop
    function render() {
      videoTexture.updateTexture();
      // ... other rendering code
      requestAnimationFrame(render);
    }

validateTagString

  • validateTagString(val): boolean

  • Validates that a tag string contains only allowed characters (alphanumeric and underscore)

    Parameters

    • val: string

      The string to validate

    Returns boolean

    True if the string contains only valid characters, false if it contains invalid characters

Static_reset

StaticgetRnObject

StaticgetRnObjectByName

StaticsearchByTag

  • searchByTag(tag, value): undefined | WeakRef<RnObject>

  • Searches for the first object that has a specific tag with the given value

    Parameters

    • tag: string

      The tag name to search for

    • value: string

      The tag value to match

    Returns undefined | WeakRef<RnObject>

    WeakRef to the first matching object, or undefined if not found

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods