rhodonite
    Preparing search index...

    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.

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

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

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

    Accessors

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

    Methods

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

    Constructors

    Properties

    Protected Optional__canvasContext

    __canvasContext?: CanvasRenderingContext2D

    Protected__engine

    __engine: Engine

    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__isDummyTexture

    __isDummyTexture: boolean = false

    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: boolean = false
    autoResize: boolean = true
    currentMaxObjectCount: number = 0

    Current maximum object count for UID generation

    InvalidObjectUID: -1

    Invalid object UID constant

    Accessors

    • 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

    • get htmlImageElement(): HTMLImageElement | undefined

      Gets the HTML image element associated with this texture.

      Returns HTMLImageElement | undefined

      The HTML image element or undefined if not available

    • get isDummyTexture(): boolean

      Checks whether this texture is marked as a dummy (placeholder) texture.

      Returns boolean

      True if the texture is marked as dummy, false otherwise

    • get isTextureReady(): boolean

      Checks if the texture is ready for use.

      Returns boolean

      True if the texture is ready, false otherwise

    • get isTransparent(): boolean

      Checks if the texture contains transparent pixels.

      Returns boolean

      True if the texture has transparency, false otherwise

    • get objectUID(): number

      Gets the unique object identifier

      Returns number

      The object's UID

    • 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

      const currentRate = videoTexture.playbackRate;
      console.log(`Current playback rate: ${currentRate}`);
    • set playbackRate(value: number): 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

      videoTexture.playbackRate = 2.0; // Play at double speed
    • get startedToLoad(): boolean

      Checks if the texture has started loading.

      Returns boolean

      True if loading has started, false otherwise

    • get uniqueName(): string

      Gets the unique name of this object

      Returns string

      The unique name string

    • get uri(): string | undefined

      Gets the URI/URL of the texture source.

      Returns string | undefined

      The texture URI or undefined if not set

    Methods

    _copyFrom

    • Creates an HTMLCanvasElement containing the texture data read from GPU. This is useful for displaying texture previews when htmlImageElement is not available. Works with both WebGL and WebGPU backends.

      Returns Promise<HTMLCanvasElement | undefined>

      Promise resolving to an HTMLCanvasElement with the texture content, or undefined if the texture is not ready or reading fails

    • 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: {
            _level?: number;
            format?: EnumIO;
            generateMipmap?: boolean;
            internalFormat?: TextureFormatEnum;
            mutedAutoPlay?: boolean;
            playButtonDomElement?: undefined;
            type?: ComponentTypeClass<"UNSIGNED_BYTE">;
        } = {}

        Configuration options for texture generation

        • Optional_level?: number
        • Optionalformat?: EnumIO

          Pixel format (default: RGBA)

        • OptionalgenerateMipmap?: boolean

          Whether to generate mipmaps (default: false)

        • OptionalinternalFormat?: TextureFormatEnum

          Internal pixel format (default: RGBA8)

        • OptionalmutedAutoPlay?: boolean

          Whether to enable muted autoplay (default: true)

        • OptionalplayButtonDomElement?: undefined

          Optional button element to trigger manual playback

        • Optionaltype?: ComponentTypeClass<"UNSIGNED_BYTE">

          Component type (default: UnsignedByte)

      Returns Promise<void>

      Promise that resolves when the texture is ready

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

    • 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: {
            _level?: number;
            format?: EnumIO;
            generateMipmap?: boolean;
            internalFormat?: TextureFormatEnum;
            mutedAutoPlay?: boolean;
            type?: ComponentTypeClass<"UNSIGNED_BYTE">;
        } = {}

        Configuration options for texture generation

        • Optional_level?: number
        • Optionalformat?: EnumIO

          Pixel format (default: RGBA)

        • OptionalgenerateMipmap?: boolean

          Whether to generate mipmaps (default: false)

        • OptionalinternalFormat?: TextureFormatEnum

          Internal pixel format (default: RGBA8)

        • OptionalmutedAutoPlay?: boolean

          Whether to enable muted autoplay (default: true)

        • Optionaltype?: ComponentTypeClass<"UNSIGNED_BYTE">

          Component type (default: UnsignedByte)

      Returns Promise<void>

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

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

      Returns (number | Uint8Array<ArrayBufferLike> | undefined)[]

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

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

    • 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

    • 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

    • Retrieves a complete tag object (name and value) for the specified tag name

      Parameters

      • tagName: string

        The name of the tag to retrieve

      Returns Tag

      A Tag object containing the name and value

    • 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

    • Reads the texture data from GPU and returns it as a Uint8Array. This method works with both WebGL and WebGPU backends. Useful for textures that don't have an associated htmlImageElement (e.g., dummy textures).

      Returns Promise<Uint8Array<ArrayBufferLike> | undefined>

      Promise resolving to the pixel data as a Uint8Array in RGBA format, or undefined if the texture is not ready or reading fails

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

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

    • 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

    • 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 WeakRef<RnObject> | undefined

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

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods