VideoStack object from the global
More examples below provide further instructions on using VideoStack.
VideoStack works by layering rendered videos and images, including camera feeds.
Each video or image is considered a
To instantiate a new image or video, simply call the constructor with a DOM element or url to the requested media.
Renderer controls how layers are drawn onto a
Once instantiated, call
start on a
Renderer to begin executing shaders on the layers
stop when the
Renderer no longer needs to be run.
||DOM Element|| Canvas element to be rendered to (optional).
Default: a canvas element is created and can be accessed via the instance's
Add a layer in the appropriate position of the renderer's stack.
||VideoLayer or ImageLayer||Layer to be added in the rendering loop.|
||Number||Position of the layer. Index
Starts rendering an animation loop in which the canvas is redrawn for each cycle of the loop.
||Function||Callback function that fires once per animation. No arguments are provided as this is primarily used to handle the logic for calling
||Object||Context in which to invoke the callback (optional).|
Stops executing the
callback function that is passed into the
updateUniforms for each
Layer of the instance of
Each layer receives the values as indicated in the argument.
See image and video layers for more details.
Image and video layers
Renderer's work by stacking several image and video layers on top of one another until the desired animation is achieved. Each of these layers is constructed separately.
Creates a new layer for an image or video.
||String or DOM Element||String specifying a url (or base-64 encoding for images). DOM elements may also be used.|
||Object||Object describing requested constraints on camera feed (optional). (Note: these requests are not guaranteed to be followed, as browser implementations vary.)
||Object||Object updated values for some of the uniforms used in the vertex and fragment shaders. Uniform property names should match the values in the shaders exactly and the property values should be the updated values.|
Start playing a video.
Stop playing a video.