[NoInterfaceObject] interface WDTStream { typedef (HTMLCanvasElement or HTMLImageElement or HTMLVideoElement) StreamSource; const GLenum STREAM_CONNECTING = 0; const GLenum STREAM_EMPTY = 1; const GLenum STREAM_NEW_FRAME_AVAILABLE = 2; const GLenum STREAM_OLD_FRAME_AVAILABLE = 3; const GLenum STREAM_DISCONNECTED = 4; readonly attribute WebGLTexture consumer; readonly attribute WDTStreamFrameInfo consumerFrame; readonly attribute WDTStreamFrameInfo producerFrame; readonly attribute WDTNanoTime minFrameDuration; readonly attribute GLenum state; attribute WDTNanotime acquireTimeout; attribute WDTNanoTime consumerLatency; void connectSource(StreamSource source); void disconnect(); StreamSource? getSource(); boolean acquireImage(); void releaseImage(); };

XXX IGNORE THIS SAMPLE CODE. IT HAS NOT YET BEEN UPDATED TO MATCH THE NEW SPEC TEXT. XXX

This shows fragments from an application that renders a spinning cube textured with a live video.

<html>
<script type="text/javascript">

  ///////////////////////////////////////////////////////////////////////
  // Create a video texture and bind a source to it.
  ///////////////////////////////////////////////////////////////////////

  // Array of files currently loading
  g_loadingFiles = [];

  // Clears all the files currently loading.
  // This is used to handle context lost events.
  function clearLoadingFiles() {
    for (var ii = 0; ii < g_loadingFiles.length; ++ii) {
      g_loadingFiles[ii].onload = undefined;
    }
    g_loadingFiles = [];
  }

  //
  // createVideoTexture
  //
  // Load video from the passed HTMLVideoElement id, bind it to a new WebGLTexture object
  // and return the WebGLTexture.
  //
  // Is there a constructor for an HTMLVideoElement so you can do like "new Image()?"
  //
  function createVideoTexture(ctx, videoId)
  {
    var texture = ctx.createTexture();
    var video = document.getElementById(videoId);
    g_loadingFiles.push(video);
    video.onload = function() { doBindVideo(ctx, video, texture) }
    return texture;
  }

  function doBindVideo(ctx, video, texture)
  {
    g_loadingFiles.splice(g_loadingFiles.indexOf(image), 1);
    ctx.bindTexture(ctx.TEXTURE_EXTERNAL_OES, texture);
    ctx.dynamicTextureSetSource(video);
    // These are the default values of these properties so the following
    // 4 lines are not necessary.
    ctx.texParameteri(ctx.TEXTURE_EXTERNAL_OES, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);
    ctx.texParameteri(ctx.TEXTURE_EXTERNAL_OES, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);
    ctx.texParameteri(ctx.TEXTURE_EXTERNAL_OES, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
    ctx.texParameteri(ctx.TEXTURE_EXTERNAL_OES, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
    ctx.bindTexture(ctx.TEXTURE_EXTERNAL_OES, null);
  }

  ///////////////////////////////////////////////////////////////////////
  // Initialize the application.
  ///////////////////////////////////////////////////////////////////////

  var g = {};
  var videoTexture;

  function init()
  {
    // Initialize
    var gl = initWebGL(
        // The id of the Canvas Element
        "example");
    if (!gl) {
      return;
    }
    var program = simpleSetup(
        gl,
        // The ids of the vertex and fragment shaders
        "vshader", "fshader",
        // The vertex attribute names used by the shaders.
        // The order they appear here corresponds to their index
        // used later.
        [ "vNormal", "vColor", "vPosition"],
        // The clear color and depth values
        [ 0, 0, 0.5, 1 ], 10000);

    // Set some uniform variables for the shaders
    gl.uniform3f(gl.getUniformLocation(program, "lightDir"), 0, 0, 1);
    // Use the default texture unit 0 for the video
    gl.uniform1i(gl.getUniformLocation(program, "samplerExternal"), 0);

    // Create a box. On return 'gl' contains a 'box' property with
    // the BufferObjects containing the arrays for vertices,
    // normals, texture coords, and indices.
    g.box = makeBox(gl);

    // Load an image to use. Returns a WebGLTexture object
    videoTexture = createVideoTexture(gl, "video");
    // Bind the video texture
    gl.bindTexture(gl.TEXTURE_EXTERNAL_OES, videoTexture);

    // Create some matrices to use later and save their locations in the shaders
    g.mvMatrix = new J3DIMatrix4();
    g.u_normalMatrixLoc = gl.getUniformLocation(program, "u_normalMatrix");
    g.normalMatrix = new J3DIMatrix4();
    g.u_modelViewProjMatrixLoc =
            gl.getUniformLocation(program, "u_modelViewProjMatrix");
    g.mvpMatrix = new J3DIMatrix4();

    // Enable all of the vertex attribute arrays.
    gl.enableVertexAttribArray(0);
    gl.enableVertexAttribArray(1);
    gl.enableVertexAttribArray(2);

    // Set up all the vertex attributes for vertices, normals and texCoords
    gl.bindBuffer(gl.ARRAY_BUFFER, g.box.vertexObject);
    gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, g.box.normalObject);
    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, g.box.texCoordObject);
    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);

    // Bind the index array
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, g.box.indexObject);

    return gl;
  }

  // ...

  ///////////////////////////////////////////////////////////////////////
  // Draw a frame
  ///////////////////////////////////////////////////////////////////////
  function draw(gl)
  {
    // Make sure the canvas is sized correctly.
    reshape(gl);

    // Clear the canvas
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Make a model/view matrix.
    g.mvMatrix.makeIdentity();
    g.mvMatrix.rotate(20, 1,0,0);
    g.mvMatrix.rotate(currentAngle, 0,1,0);

    // Construct the normal matrix from the model-view matrix and pass it in
    g.normalMatrix.load(g.mvMatrix);
    g.normalMatrix.invert();
    g.normalMatrix.transpose();
    g.normalMatrix.setUniform(gl, g.u_normalMatrixLoc, false);

    // Construct the model-view * projection matrix and pass it in
    g.mvpMatrix.load(g.perspectiveMatrix);
    g.mvpMatrix.multiply(g.mvMatrix);
    g.mvpMatrix.setUniform(gl, g.u_modelViewProjMatrixLoc, false);

    // Acquire the latest video image
    gl.dynamicTextureAcquireImage();

    // Draw the cube
    gl.drawElements(gl.TRIANGLES, g.box.numIndices, gl.UNSIGNED_BYTE, 0);

    // Allow updates to the image again
    gl.dynamicTextureReleaseImage();

    // Show the framerate
    framerate.snapshot();

    currentAngle += incAngle;
    if (currentAngle > 360)
      currentAngle -= 360;
  }
</script>

<body onload="start()">
<video id="video" src="resources/video.ogv" autoplay="true" style="visibility: hidden">
</video>
<canvas id="example">
    If you're seeing this your web browser doesn't support the &lt;canvas&gt; element. Ouch!
</canvas>
<div id="framerate"></div>
</body>

</html>

5.14.8.1 External textures

5.16 Dynamic Textures

5.16.1 WDTStreamFrameInfo

5.16.1.1 Attributes

5.16.2 WDTStream

5.16.2.1 Attributes

5.16.2.2 commands

6.25 External Texture Support