WebGL2RenderingContext: isSampler() method - Web APIs

WebGL2RenderingContext: isSampler() method
==========================================

 The **`WebGL2RenderingContext.isSampler()`** method of the WebGL 2 API returns `true` if the
 passed object is a valid `WebGLSampler` object.

Syntax
------

```js
isSampler(sampler)
```

### Parameters

`sampler`

A `WebGLSampler` object to test.

### Return value

 A `GLboolean` indicating whether the given object is a valid
 `WebGLSampler` object (`true`) or not (`false`).

Examples
--------

`gl` must be a `WebGL2RenderingContext`.
 `WebGLSampler` objects are not available in WebGL 1.

```js
const sampler = gl.createSampler();

// …

gl.isSampler(sampler);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.13 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLSampler`


WebGL2RenderingContext: getTransformFeedbackVarying() method - Web APIs

WebGL2RenderingContext: getTransformFeedbackVarying() method
============================================================

 The **`WebGL2RenderingContext.getTransformFeedbackVarying()`**
 method of the WebGL 2 API returns
 information about varying variables from `WebGLTransformFeedback` buffers.

Syntax
------

```js
getTransformFeedbackVarying(program, index)
```

### Parameters

`program`

A `WebGLProgram`.

`index`

 A `GLuint` specifying the index of the varying variable whose
 information to retrieve`.`

### Return value

A `WebGLActiveInfo` object.

Examples
--------

```js
activeInfo = gl.getTransformFeedbackVarying(program, 0);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.15 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLTransformFeedback`


WebGL2RenderingContext: vertexAttribIPointer() method - Web APIs

WebGL2RenderingContext: vertexAttribIPointer() method
=====================================================

 The **`WebGL2RenderingContext.vertexAttribIPointer()`** method
 of the WebGL 2 API specifies integer data
 formats and locations of vertex attributes in a vertex attributes array.

Syntax
------

```js
vertexAttribIPointer(index, size, type, stride, offset)
```

### Parameters

`index`

 A `GLuint` specifying the index of the vertex attribute that is to be
 modified.

`size`

 A `GLint` specifying the number of components per vertex attribute.
 Must be 1, 2, 3, or 4.

`type`

 A `GLenum` specifying the data type of each component in the array.
 Must be one of: `gl.BYTE`, `gl.UNSIGNED_BYTE`,
 `gl.SHORT`, `gl.UNSIGNED_SHORT`, `gl.INT`, or
 `gl.UNSIGNED_INT`.

`stride`

 A `GLsizei` specifying the offset in bytes between the beginning of
 consecutive vertex attributes.

`offset`

 A `GLintptr` specifying an offset in bytes of the first component in
 the vertex attribute array. Must be a multiple of `type`.

### Return value

None (`undefined`).

Description
-----------

 Very similar to `WebGLRenderingContext.vertexAttribPointer()`. The main
 difference is that while values specified by `vertexAttribPointer` are
 always interpreted as floating-point values in the shader (even if they were originally
 specified as integers in the buffer), this method allows specifying values which are
 interpreted as integers in the shader.

Examples
--------

### Linear Blend Skinning

```js
//Describe the layout of the buffer:
//1. position
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
gl.enableVertexAttribArray(0);
//2. bone weights, normalized to [0, 1]
gl.vertexAttribPointer(1, 4, gl.UNSIGNED\_BYTE, true, 20, 12);
gl.enableVertexAttribArray(1);
//3. bone indices, interpreted as integer
gl.vertexAttribIPointer(2, 4, gl.UNSIGNED\_BYTE, 20, 16);
gl.enableVertexAttribArray(2);

//Connect to attributes from the vertex shader
gl.bindAttribLocation(shaderProgram, 0, "position");
gl.bindAttribLocation(shaderProgram, 1, "boneWeights");
gl.bindAttribLocation(shaderProgram, 2, "boneIndices");
```

```html
<script id="shader-vs" type="x-shader/x-vertex">
 #version 300 es

 uniform mat4 mvMatrix;
 uniform mat4 bones[120];

 in vec3 position;
 in vec4 boneWeights;
 in uvec4 boneIndices;//read as 4-component unsigned integer

 void main() {
 vec4 skinnedPosition =
 bones[boneIndices.s] \* vec4(position, 1.0) \* boneWeights.s +
 bones[boneIndices.t] \* vec4(position, 1.0) \* boneWeights.t +
 bones[boneIndices.p] \* vec4(position, 1.0) \* boneWeights.p +
 bones[boneIndices.q] \* vec4(position, 1.0) \* boneWeights.q;
 gl\_Position = mvMatrix \* skinnedPosition;
 }
</script>
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.8 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.vertexAttribPointer()`


WebGL2RenderingContext: isTransformFeedback() method - Web APIs

WebGL2RenderingContext: isTransformFeedback() method
====================================================

 The **`WebGL2RenderingContext.isTransformFeedback()`** method
 of the WebGL 2 API returns `true`
 if the passed object is a valid `WebGLTransformFeedback` object.

Syntax
------

```js
isTransformFeedback(transformFeedback)
```

### Parameters

`transformFeedback`

A `WebGLTransformFeedback` object to test.

### Return value

 A `GLboolean` indicating whether the given object is a valid
 `WebGLTransformFeedback` object (`true`) or not
 (`false`).

Examples
--------

`gl` must be a `WebGL2RenderingContext`.
 `WebGLTransformFeedback` objects are not available in WebGL 1.

```js
const transformFeedback = gl.createTransformFeedback();

// …

gl.isTransformFeedback(transformFeedback);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.15 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLTransformFeedback`


WebGL2RenderingContext: copyBufferSubData() method - Web APIs

WebGL2RenderingContext: copyBufferSubData() method
==================================================

 The **`WebGL2RenderingContext.copyBufferSubData()`** method of
 the WebGL 2 API copies part of the data of a
 buffer to another buffer.

Syntax
------

```js
copyBufferSubData(readTarget, writeTarget, readOffset, writeOffset, size)
```

### Parameters

`readTarget writeTarget`

 A `GLenum` specifying the binding point (target) from whose data store
 should be read or written. Possible values:

* `gl.ARRAY_BUFFER`: Buffer containing vertex attributes, such as
 vertex coordinates, texture coordinate data, or vertex color data.
* `gl.ELEMENT_ARRAY_BUFFER`: Buffer used for element indices.
* `gl.COPY_READ_BUFFER`: Buffer for copying from one buffer object to
 another (provided specifically for copy operations).
* `gl.COPY_WRITE_BUFFER`: Buffer for copying from one buffer object to
 another (provided specifically for copy operations).
* `gl.TRANSFORM_FEEDBACK_BUFFER`: Buffer for transform feedback
 operations.
* `gl.UNIFORM_BUFFER`: Buffer used for storing uniform blocks.
* `gl.PIXEL_PACK_BUFFER`: Buffer used for pixel transfer operations.
* `gl.PIXEL_UNPACK_BUFFER`: Buffer used for pixel transfer operations.

`readOffset writeOffset`

 A `GLintptr` specifying the byte offset from which to start reading
 from or writing to the buffer.

`size`

 A `GLsizei` in bytes specifying the size of the data to be copied from
 `readTarget` to `writeTarget`.

### Return value

None (`undefined`).

Examples
--------

```js
const srcBuffer = gl.createBuffer();
const dstBuffer = gl.createBuffer();

const data = new Float32Array(vertices);
const length = vertices.length \* 4;

gl.bindBuffer(gl.ARRAY\_BUFFER, srcBuffer);
gl.bufferData(gl.ARRAY\_BUFFER, data, gl.STATIC\_DRAW);
gl.bindBuffer(gl.COPY\_READ\_BUFFER, srcBuffer);

gl.bindBuffer(gl.ARRAY\_BUFFER, dstBuffer);
gl.bufferData(gl.ARRAY\_BUFFER, new Float32Array(length), gl.STATIC\_DRAW);

gl.copyBufferSubData(gl.COPY\_READ\_BUFFER, gl.ARRAY\_BUFFER, 0, 0, length);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.bufferData()`
* `WebGLRenderingContext.bufferSubData()`
* `WebGLRenderingContext.getBufferParameter()`
* `WebGL2RenderingContext.getBufferSubData()`


WebGL2RenderingContext: isSync() method - Web APIs

WebGL2RenderingContext: isSync() method
=======================================

 The **`WebGL2RenderingContext.isSync()`** method of the WebGL 2 API returns `true` if the
 passed object is a valid `WebGLSync` object.

Syntax
------

```js
isSync(sync)
```

### Parameters

`sync`

A `WebGLSync` object to test.

### Return value

 A `GLboolean` indicating whether the given object is a valid
 `WebGLSync` object (`true`) or not (`false`).

Examples
--------

`gl` must be a `WebGL2RenderingContext`. `WebGLSync`
 objects are not available in WebGL 1.

```js
const sync = gl.fenceSync(gl.SYNC\_GPU\_COMMANDS\_COMPLETE, 0);

// …

gl.isSync(sync);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.14 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLSync`


WebGL2RenderingContext: getFragDataLocation() method - Web APIs

WebGL2RenderingContext: getFragDataLocation() method
====================================================

 The **`WebGL2RenderingContext.getFragDataLocation()`** method
 of the WebGL 2 API returns the binding of
 color numbers to user-defined varying out variables.

Syntax
------

```js
getFragDataLocation(program, name)
```

### Parameters

`program`

A `WebGLProgram` to query.

`name`

 A string specifying the name of the user-defined varying out
 variable.

### Return value

 A `GLint` indicating the assigned color number binding, or `-1`
 otherwise.

Examples
--------

```js
// program is a linked WebGLProgram

gl.getFragDataLocation(program, "fragColor");
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.7 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`


WebGL2RenderingContext: bindBufferRange() method - Web APIs

WebGL2RenderingContext: bindBufferRange() method
================================================

 The **`WebGL2RenderingContext.bindBufferRange()`** method of
 the WebGL 2 API binds a range of a given
 `WebGLBuffer` to a given binding point (`target`) at a given
 `index`.

Syntax
------

```js
bindBufferRange(target, index, buffer, offset, size)
```

### Parameters

`target`

 A `GLenum` specifying the target for the bind operation. Possible
 values:

* `gl.TRANSFORM_FEEDBACK_BUFFER`
* `gl.UNIFORM_BUFFER`

`index`

A `GLuint` specifying the index of the `target`.

`buffer`

 A `WebGLBuffer` which to bind to the binding point
 (`target`).

`offset`

A `GLintptr` specifying the starting offset.

`size`

 A `GLsizeiptr` specifying the amount of data that can be read from the
 buffer.

### Return value

None (`undefined`).

Examples
--------

```js
gl.bindBufferRange(gl.TRANSFORM\_FEEDBACK\_BUFFER, 1, buffer, 0, 4);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.16 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGL2RenderingContext.bindBufferBase()`


WebGL2RenderingContext: texSubImage3D() method - Web APIs

WebGL2RenderingContext: texSubImage3D() method
==============================================

 The **`WebGL2RenderingContext.texSubImage3D()`** method of the
 WebGL API specifies a sub-rectangle of the
 current texture.

Syntax
------

```js
texSubImage3D(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, pixels)
texSubImage3D(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, offset)
texSubImage3D(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, srcData)
texSubImage3D(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, srcData, srcOffset)
```

### Parameters

`target`

 A `GLenum` specifying the binding point (target) of the active texture.
 Possible values:

* `gl.TEXTURE_3D`: A three-dimensional texture.
* `gl.TEXTURE_2D_ARRAY`: A two-dimensional array texture.

`level`

 A `GLint` specifying the level of detail. Level 0 is the base image
 level and level *n* is the n-th mipmap reduction level.

`xoffset`

A `GLint` specifying the x offset within the texture image.

`yoffset`

A `GLint` specifying the y offset within the texture image.

`zoffset`

A `GLint` specifying the z offset within the texture image.

`width`

A `GLsizei` specifying the width of the texture.

`height`

A `GLsizei` specifying the height of the texture.

`depth`

A `GLsizei` specifying the depth of the texture.

`format`

A `GLenum` specifying the format of the texel data. Possible values:

* `gl.ALPHA`: Discards the red, green and blue components and reads the
 alpha component.
* `gl.RGB`: Discards the alpha components and reads the red, green and
 blue components.
* `gl.RGBA`: Red, green, blue and alpha components are read from the
 color buffer.
* `gl.LUMINANCE`: Each color component is a luminance component, alpha
 is 1.0.
* `gl.LUMINANCE_ALPHA`: Each component is a luminance/alpha component.
* `gl.R8`
* `gl.R16F`
* `gl.R32F`
* `gl.R8UI`
* `gl.RG8`
* `gl.RG16F`
* `gl.RG32F`
* `gl.RGUI`
* `gl.RGB8`
* `gl.SRGB8`
* `gl.RGB565`
* `gl.R11F_G11F_B10F`
* `gl.RGB9_E5`
* `gl.RGB16F`
* `gl.RGB32F`
* `gl.RGB8UI`
* `gl.RGBA8`
* `gl.SRGB_ALPHA8`
* `gl.RGB5_A1`
* `gl.RGBA4444`
* `gl.RGBA16F`
* `gl.RGBA32F`
* `gl.RGBA8UI`

`type`

A `GLenum` specifying the data type of the texel data. Possible values:

* `gl.UNSIGNED_BYTE`: 8 bits per channel for `gl.RGBA`
* `gl.UNSIGNED_SHORT_5_6_5`: 5 red bits, 6 green bits, 5 blue bits.
* `gl.UNSIGNED_SHORT_4_4_4_4`: 4 red bits, 4 green bits, 4 blue bits, 4
 alpha bits.
* `gl.UNSIGNED_SHORT_5_5_5_1`: 5 red bits, 5 green bits, 5 blue bits, 1
 alpha bit.
* `gl.BYTE`
* `gl.UNSIGNED_SHORT`
* `gl.SHORT`
* `gl.UNSIGNED_INT`
* `gl.INT`
* `gl.HALF_FLOAT`
* `gl.FLOAT`
* `gl.UNSIGNED_INT_2_10_10_10_REV`
* `gl.UNSIGNED_INT_10F_11F_11F_REV`
* `gl.UNSIGNED_INT_5_9_9_9_REV`
* `gl.UNSIGNED_INT_24_8`
* `gl.FLOAT_32_UNSIGNED_INT_24_8_REV` (pixels must be
 `null`)

`pixels`

One of the following objects can be used as a pixel source for the texture:

* `Uint8Array` (must be used if `type` is `gl.UNSIGNED_BYTE`)
* `Uint16Array` (must be used if `type` is either
 `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`,
 `gl.UNSIGNED_SHORT_5_5_5_1`, or `ext.HALF_FLOAT_OES`)
* `Float32Array` (must be used if `type` is `gl.FLOAT`)
* `ImageBitmap`
* `ImageData`
* `HTMLImageElement`
* `HTMLCanvasElement`
* `HTMLVideoElement`

`srcData`

A `TypedArray` or a `DataView` object.

`offset`

 A `GLintptr` byte offset into the `WebGLBuffer`'s data
 store. Used to upload data to the currently bound `WebGLTexture` from the
 `WebGLBuffer` bound to the `PIXEL_UNPACK_BUFFER` target.

### Return value

None (`undefined`).

Examples
--------

```js
gl.texSubImage3D(
  gl.TEXTURE\_3D,
  0,
  0,
  0,
  0,
  image.width,
  image.height,
  1,
  gl.RGBA,
  gl.UNSIGNED\_BYTE,
  image,
);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.6 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createTexture()`
* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.texImage2D()`
* `WebGLRenderingContext.compressedTexImage2D()`
* `WebGLRenderingContext.copyTexImage2D()`
* `WebGLRenderingContext.getTexParameter()`


WebGL2RenderingContext: uniform[1234][uif][v]() method - Web APIs

WebGL2RenderingContext: uniform[1234][uif][v]() method
======================================================

 The **`WebGL2RenderingContext.uniform[1234][uif][v]()`**
 methods of the WebGL API specify values of
 uniform variables.

**Note:** `ui` stands for *unsigned integer*, `i` for *integer*, `f` for *float*, and `v` for *vector*.
 Not all combinations are valid: `u` cannot be combined with `f`.
 See the syntax table below. Equivalent Regex: `uniform[1234](u?i|f)v?`

Syntax
------

```js
uniform1ui(location, v0)
uniform2ui(location, v0, v1)
uniform3ui(location, v0, v1, v2)
uniform4ui(location, v0, v1, v2, v3)

uniform1fv(location, data)
uniform1fv(location, data, srcOffset)
uniform1fv(location, data, srcOffset, srcLength)

uniform2fv(location, data)
uniform2fv(location, data, srcOffset)
uniform2fv(location, data, srcOffset, srcLength)

uniform3fv(location, data)
uniform3fv(location, data, srcOffset)
uniform3fv(location, data, srcOffset, srcLength)

uniform4fv(location, data)
uniform4fv(location, data, srcOffset)
uniform4fv(location, data, srcOffset, srcLength)

uniform1iv(location, data)
uniform1iv(location, data, srcOffset)
uniform1iv(location, data, srcOffset, srcLength)

uniform2iv(location, data)
uniform2iv(location, data, srcOffset)
uniform2iv(location, data, srcOffset, srcLength)

uniform3iv(location, data)
uniform3iv(location, data, srcOffset)
uniform3iv(location, data, srcOffset, srcLength)

uniform4iv(location, data)
uniform4iv(location, data, srcOffset)
uniform4iv(location, data, srcOffset, srcLength)

uniform1uiv(location, data)
uniform1uiv(location, data, srcOffset)
uniform1uiv(location, data, srcOffset, srcLength)

uniform2uiv(location, data)
uniform2uiv(location, data, srcOffset)
uniform2uiv(location, data, srcOffset, srcLength)

uniform3uiv(location, data)
uniform3uiv(location, data, srcOffset)
uniform3uiv(location, data, srcOffset, srcLength)

uniform4uiv(location, data)
uniform4uiv(location, data, srcOffset)
uniform4uiv(location, data, srcOffset, srcLength)
```

### Parameters

`location`

 A `WebGLUniformLocation` object containing the location of the uniform
 attribute to modify.

`data, v0, v1, v2, v3`

A new value to be used for the uniform variable. Possible types:

* A `Number` for unsigned integer values (methods with
 `ui`), for integer values (methods with `i`), or for floats
 (methods with `f`).
* A `Uint32Array` for unsigned integer vector methods (methods with
 `uiv`).

### Return value

None (`undefined`).

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.8 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.uniform()`


WebGL2RenderingContext: createQuery() method - Web APIs

WebGL2RenderingContext: createQuery() method
============================================

 The **`WebGL2RenderingContext.createQuery()`** method of the WebGL 2 API creates and initializes
 `WebGLQuery` objects, which provide ways to asynchronously query for
 information.

Syntax
------

```js
createQuery()
```

### Parameters

None.

### Return value

A `WebGLQuery` object.

Examples
--------

`gl` must be a `WebGL2RenderingContext`.
 `WebGLQuery` objects are not available in WebGL 1.

```js
const query = gl.createQuery();
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.12 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLQuery`


WebGL2RenderingContext: samplerParameter[if]() method - Web APIs

WebGL2RenderingContext: samplerParameter[if]() method
=====================================================

 The **`WebGL2RenderingContext.samplerParameter[if]()`** methods
 of the WebGL 2 API set
 `WebGLSampler` parameters.

Syntax
------

```js
samplerParameteri(sampler, pname, param)
samplerParameterf(sampler, pname, param)
```

### Parameters

`sampler`

A `WebGLSampler` object.

`pname`

A `GLenum` specifying which parameter to set. Possible values:

`gl.TEXTURE_COMPARE_FUNC`

 A `GLenum` specifying the
 texture comparison function.

`gl.TEXTURE_COMPARE_MODE`

 A `GLenum` specifying the
 texture comparison mode.

`gl.TEXTURE_MAG_FILTER`

 A `GLenum` specifying the
 texture magnification filter.

`gl.TEXTURE_MAX_LOD`

 A `GLfloat` specifying the maximum
 level-of-detail value.

`gl.TEXTURE_MIN_FILTER`

 A `GLenum` specifying the
 texture minification filter

`gl.TEXTURE_MIN_LOD`

 A `GLfloat` specifying the minimum
 level-of-detail value.

`gl.TEXTURE_WRAP_R`

 A `GLenum` specifying the texture
 wrapping function for the texture coordinate r.

`gl.TEXTURE_WRAP_S`

 A `GLenum` specifying the texture
 wrapping function for the texture coordinate s.

`gl.TEXTURE_WRAP_T`

 A `GLenum` specifying the texture
 wrapping function for the texture coordinate t.

`param`

 A `GLint` (`samplerParameteri`) or a `GLfloat`
 (`samplerParameterf`) specifying a value for `pname`.

### Return value

None (`undefined`).

Examples
--------

```js
const sampler = gl.createSampler();
gl.samplerParameteri(sampler, gl.TEXTURE\_MAG\_FILTER, gl.NEAREST);
```

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLSampler`


WebGL2RenderingContext: endQuery() method - Web APIs

WebGL2RenderingContext: endQuery() method
=========================================

 The **`WebGL2RenderingContext.endQuery()`** method of the WebGL 2 API marks the end of a given query
 target.

Syntax
------

```js
endQuery(target)
```

### Parameters

`target`

A `GLenum` specifying the target of the query. Possible values:

`gl.ANY_SAMPLES_PASSED`

 Specifies an occlusion query: these queries
 detect whether an object is visible (whether the scoped drawing commands pass the
 depth test and if so, how many samples pass).

`gl.ANY_SAMPLES_PASSED_CONSERVATIVE`

 Same as above, but less
 accurate and faster version.

`gl.TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN`

 Number of primitives that
 are written to transform feedback buffers.

### Return value

None (`undefined`).

Examples
--------

```js
const query = gl.createQuery();
gl.beginQuery(gl.ANY\_SAMPLES\_PASSED, query);

// …

gl.endQuery(gl.ANY\_SAMPLES\_PASSED);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.12 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLQuery`


WebGL2RenderingContext: drawElementsInstanced() method - Web APIs

WebGL2RenderingContext: drawElementsInstanced() method
======================================================

 The **`WebGL2RenderingContext.drawElementsInstanced()`** method
 of the WebGL 2 API renders primitives from
 array data like the `gl.drawElements()` method. In addition, it can execute multiple instances of a set
 of elements.

**Note:** When using WebGL 1, the `ANGLE_instanced_arrays` extension can provide this method,
 too.

Syntax
------

```js
drawElementsInstanced(mode, count, type, offset, instanceCount)
```

### Parameters

`mode`

 A `GLenum` specifying the type primitive to render. Possible values
 are:

* `gl.POINTS`: Draws a single dot.
* `gl.LINE_STRIP`: Draws a straight line to the next vertex.
* `gl.LINE_LOOP`: Draws a straight line to the next vertex, and
 connects the last vertex back to the first.
* `gl.LINES`: Draws a line between a pair of vertices.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: Draws a triangle for a group of three vertices.

`count`

A `GLsizei` specifying the number of elements to be rendered.

`type`

 A `GLenum` specifying the type of the values in the element array
 buffer. Possible values are:

* `gl.UNSIGNED_BYTE`
* `gl.UNSIGNED_SHORT`
* `gl.UNSIGNED_INT` When using the `OES_element_index_uint` extension.

`offset`

 A `GLintptr` specifying an offset in the element array buffer. Must be
 a valid multiple of the size of the given `type`.

`instanceCount`

 A `GLsizei` specifying the number of instances of the set of elements
 to execute.

### Return value

None (`undefined`).

### Exceptions

* If `mode` is not one of the accepted values, a
 `gl.INVALID_ENUM` error is thrown.
* If `offset` is a valid multiple of the size of the given type, a
 `gl.INVALID_OPERATION` error is thrown.
* If `count` or `instanceCount` are negative, a
 `gl.INVALID_VALUE` error is thrown.
Examples
--------

```js
gl.drawElementsInstanced(gl.POINTS, 2, gl.UNSIGNED\_SHORT, 0, 4);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `ext.drawArraysInstancedANGLE()`
* `ext.vertexAttribDivisorANGLE()`
* `WebGLRenderingContext.drawArrays()`
* `WebGLRenderingContext.drawElements()`
* `WebGL2RenderingContext.drawArraysInstanced()`
* `WebGL2RenderingContext.vertexAttribDivisor()`
* `WEBGL_multi_draw.multiDrawElementsInstancedWEBGL()`


WebGL2RenderingContext: pauseTransformFeedback() method - Web APIs

WebGL2RenderingContext: pauseTransformFeedback() method
=======================================================

 The **`WebGL2RenderingContext.pauseTransformFeedback()`**
 method of the WebGL 2 API pauses a transform
 feedback operation.

Syntax
------

```js
pauseTransformFeedback()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

```js
const transformFeedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM\_FEEDBACK, transformFeedback);
gl.beginTransformFeedback(gl.TRIANGLES);
gl.pauseTransformFeedback();
// …
gl.resumeTransformFeedback();
gl.drawArrays(gl.TRIANGLES, 0, 3);
gl.endTransformFeedback();
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.15 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLTransformFeedback`


WebGL2RenderingContext: drawRangeElements() method - Web APIs

WebGL2RenderingContext: drawRangeElements() method
==================================================

 The **`WebGL2RenderingContext.drawRangeElements()`** method of
 the WebGL API renders primitives from array
 data in a given range.

Syntax
------

```js
drawRangeElements(mode, start, end, count, type, offset)
```

### Parameters

`mode`

 A `GLenum` specifying the type primitive to render. Possible values
 are:

* `gl.POINTS`: Draws a single dot.
* `gl.LINE_STRIP`: Draws a straight line to the next vertex.
* `gl.LINE_LOOP`: Draws a straight line to the next vertex, and
 connects the last vertex back to the first.
* `gl.LINES`: Draws a line between a pair of vertices.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: Draws a triangle for a group of three vertices.

`start`

 A `GLuint` specifying the minimum array index contained in
 `offset`.

`end`

 A `GLuint` specifying the maximum array index contained in
 `offset`.

`count`

A `GLsizei` specifying the number of elements to be rendered.

`type`

 A `GLenum` specifying the type of the values in the element array
 buffer. Possible values are:

* `gl.UNSIGNED_BYTE`
* `gl.UNSIGNED_SHORT`
* `gl.UNSIGNED_INT`

`offset`

 A `GLintptr` specifying an offset in the element array buffer. Must be
 a valid multiple of the size of the given `type`.

### Return value

None (`undefined`).

### Exceptions

* If `mode` is not one of the accepted values, a
 `gl.INVALID_ENUM` error is thrown.
* If `offset` is a valid multiple of the size of the given type, a
 `gl.INVALID_OPERATION` error is thrown.
* If `count` is negative, a `gl.INVALID_VALUE` error is thrown.
Examples
--------

```js
gl.drawRangeElements(gl.POINTS, 0, 7, 8, gl.UNSIGNED\_BYTE, 0);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.drawElements()`


WebGL2RenderingContext: getIndexedParameter() method - Web APIs

WebGL2RenderingContext: getIndexedParameter() method
====================================================

 The **`WebGL2RenderingContext.getIndexedParameter()`** method
 of the WebGL 2 API returns indexed
 information about a given `target`.

Syntax
------

```js
getIndexedParameter(target, index)
```

### Parameters

`target`

 A `GLenum` specifying the target for which to return information.
 Possible values:

* `gl.TRANSFORM_FEEDBACK_BUFFER_BINDING`: Returns a
 `WebGLBuffer`.
* `gl.TRANSFORM_FEEDBACK_BUFFER_SIZE`: Returns a
 `GLsizeiptr`.
* `gl.TRANSFORM_FEEDBACK_BUFFER_START`: Returns a
 `GLintptr`.
* `gl.UNIFORM_BUFFER_BINDING`: Returns a `WebGLBuffer`.
* `gl.UNIFORM_BUFFER_SIZE`: Returns a `GLsizeiptr`.
* `gl.UNIFORM_BUFFER_START`: Returns a `GLintptr`.

When using the `OES_draw_buffers_indexed` WebGL 2 extension, the following values are available additionally:

* `gl.BLEND_EQUATION_RGB`: Returns the RGB blend equation for the draw buffer at `index`.
* `gl.BLEND_EQUATION_ALPHA`: Returns the alpha blend equation for the draw buffer at `index`.
* `gl.BLEND_SRC_RGB`: Returns the source RGB blend function for the draw buffer at `index`.
* `gl.BLEND_SRC_ALPHA`: Returns the source alpha blend function for the draw buffer at `index`.
* `gl.BLEND_DST_RGB`: Returns the destination RGB blend function for the draw buffer at `index`.
* `gl.BLEND_DST_ALPHA`: Returns the destination alpha blend function for the draw buffer at `index`.
* `gl.COLOR_WRITEMASK`: Returns an array containing color components are enabled for the draw buffer at `index`.

`index`

 A `GLuint` specifying the index of the `target` that is
 queried.

### Return value

Depends on the requested information (as specified with `target`).

Examples
--------

```js
const binding = gl.getIndexedParameter(gl.TRANSFORM\_FEEDBACK\_BUFFER\_BINDING, 0);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.2 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.getParameter()`


WebGL2RenderingContext: invalidateSubFramebuffer() method - Web APIs

WebGL2RenderingContext: invalidateSubFramebuffer() method
=========================================================

 The **`WebGL2RenderingContext.invalidateSubFramebuffer()`**
 method of the WebGL 2 API invalidates
 portions of the contents of attachments in a framebuffer.

Syntax
------

```js
invalidateSubFramebuffer(target, attachments, x, y, width, height)
```

### Parameters

`target`

A `GLenum` specifying the binding point (target). Possible values:

`gl.FRAMEBUFFER`

 Collection buffer data storage of color, alpha,
 depth and stencil buffers used to render an image.

`gl.DRAW_FRAMEBUFFER`

Equivalent to `gl.FRAMEBUFFER`.

`gl.READ_FRAMEBUFFER`

Used as a source for reading operations.

`attachments`

 An `Array` of `GLenum` specifying the attachment points to
 invalidate. Possible values:

`gl.COLOR_ATTACHMENT{0-15}`

 Invalidates one of the framebuffer's
 color buffers.

`gl.DEPTH_ATTACHMENT`

Invalidates the framebuffer's depth buffer.

`gl.STENCIL_ATTACHMENT`

 Invalidates the framebuffer's stencil
 buffer.

`gl.DEPTH_STENCIL_ATTACHMENT`

 Invalidates both the framebuffer's
 depth and stencil buffer.

`x`

 A `GLint` specifying the left origin of the pixel rectangle to
 invalidate.

`y`

 A `GLint` specifying the bottom origin of the pixel rectangle to
 invalidate.

`width`

A `GLsizei` specifying the width of the pixel rectangle to invalidate.

`height`

A `GLsizei` specifying the height of the pixel rectangle to invalidate.

### Return value

None (`undefined`).

Examples
--------

```js
gl.invalidateSubFramebuffer(
  gl.READ\_FRAMEBUFFER,
  [gl.COLOR\_ATTACHMENT0, gl.COLOR\_ATTACHMENT1],
  0,
  0,
  256,
  256,
);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.4 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGL2RenderingContext.invalidateFramebuffer()`


WebGL2RenderingContext: vertexAttribDivisor() method - Web APIs

WebGL2RenderingContext: vertexAttribDivisor() method
====================================================

 The **`WebGL2RenderingContext.vertexAttribDivisor()`** method
 of the WebGL 2 API modifies the rate at
 which generic vertex attributes advance when rendering multiple instances of primitives
 with `gl.drawArraysInstanced()` and
 `gl.drawElementsInstanced()`.

**Note:** When using WebGL 1, the `ANGLE_instanced_arrays` extension can provide this method,
 too.

Syntax
------

```js
vertexAttribDivisor(index, divisor)
```

### Parameters

`index`

A `GLuint` specifying the index of the generic vertex attributes.

`divisor`

 A `GLuint` specifying the number of instances that will pass between
 updates of the generic attribute.

### Return value

None (`undefined`).

Examples
--------

```js
gl.vertexAttribDivisor(0, 2);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.9 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `ANGLE_instanced_arrays.vertexAttribDivisorANGLE()`


WebGL2RenderingContext: framebufferTextureLayer() method - Web APIs

WebGL2RenderingContext: framebufferTextureLayer() method
========================================================

 The **`WebGL2RenderingContext.framebufferTextureLayer()`**
 method of the WebGL 2 API attaches a single
 layer of a texture to a framebuffer.

 This method is similar to `WebGLRenderingContext.framebufferTexture2D()`,
 but only a given single layer of the texture level is attached to the attachment point.

Syntax
------

```js
framebufferTextureLayer(target, attachment, texture, level, layer)
```

### Parameters

`target`

A `GLenum` specifying the binding point (target). Possible values:

* `gl.FRAMEBUFFER`: Collection buffer data storage of color, alpha,
 depth and stencil buffers used to render an image.
* `gl.DRAW_FRAMEBUFFER`: Equivalent to `gl.FRAMEBUFFER`.
* `gl.READ_FRAMEBUFFER`: Used as a source for reading operations.

`attachment`

 A `GLenum` specifying the attachment point for the
 `texture`. Possible values:

* `gl.COLOR_ATTACHMENT{0-15}`: Attaches the texture to one of the
 framebuffer's color buffers.
* `gl.DEPTH_ATTACHMENT`: Attaches the texture to the framebuffer's
 depth buffer.
* `gl.STENCIL_ATTACHMENT`: Attaches the texture to the framebuffer's
 stencil buffer.
* `gl.DEPTH_STENCIL_ATTACHMENT`: depth and stencil buffer.

`texture`

A `WebGLTexture` object whose image to attach.

`level`

A `GLint` specifying the mipmap level of the texture image to attach.

`layer`

A `GLint` specifying the layer of the texture image to attach.

### Return value

None (`undefined`).

Examples
--------

```js
gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR\_ATTACHMENT0, texture, 0, 8);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.4 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.framebufferTexture2D()`


WebGL2RenderingContext: invalidateFramebuffer() method - Web APIs

WebGL2RenderingContext: invalidateFramebuffer() method
======================================================

 The **`WebGL2RenderingContext.invalidateFramebuffer()`** method
 of the WebGL 2 API invalidates the contents
 of attachments in a framebuffer.

Syntax
------

```js
invalidateFramebuffer(target, attachments)
```

### Parameters

`target`

A `GLenum` specifying the binding point (target). Possible values:

`gl.FRAMEBUFFER`

 Collection buffer data storage of color, alpha,
 depth and stencil buffers used to render an image.

`gl.DRAW_FRAMEBUFFER`

Equivalent to `gl.FRAMEBUFFER`.

`gl.READ_FRAMEBUFFER`

Used as a source for reading operations.

`attachments`

 An `Array` of `GLenum` specifying the attachment points to
 invalidate. Possible values:

`gl.COLOR_ATTACHMENT{0-15}`

 Invalidates one of the framebuffer's
 color buffers.

`gl.DEPTH_ATTACHMENT`

Invalidates the framebuffer's depth buffer.

`gl.STENCIL_ATTACHMENT`

 Invalidates the framebuffer's stencil
 buffer.

`gl.DEPTH_STENCIL_ATTACHMENT`

 Invalidates both the framebuffer's
 depth and stencil buffer.

### Return value

None (`undefined`).

Examples
--------

```js
gl.invalidateFramebuffer(gl.READ\_FRAMEBUFFER, [
  gl.COLOR\_ATTACHMENT0,
  gl.COLOR\_ATTACHMENT1,
]);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.4 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGL2RenderingContext.invalidateSubFramebuffer()`


WebGL2RenderingContext: beginQuery() method - Web APIs

WebGL2RenderingContext: beginQuery() method
===========================================

 The **`WebGL2RenderingContext.beginQuery()`** method of the WebGL 2 API starts an asynchronous query. The
 `target` parameter indicates which kind of query to begin.

Syntax
------

```js
beginQuery(target, query)
```

### Parameters

`target`

A `GLenum` specifying the target of the query. Possible values:

`gl.ANY_SAMPLES_PASSED`

 Specifies an occlusion query: these queries
 detect whether an object is visible (whether the scoped drawing commands pass the
 depth test and if so, how many samples pass).

`gl.ANY_SAMPLES_PASSED_CONSERVATIVE`

 Same as above, but less
 accurate and faster version.

`gl.TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN`

 Number of primitives that
 are written to transform feedback buffers.

`query`

A `WebGLQuery` object for which to start the querying.

### Return value

None (`undefined`).

Examples
--------

```js
const query = gl.createQuery();
gl.beginQuery(gl.ANY\_SAMPLES\_PASSED, query);

// …
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.12 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLQuery`


WebGL2RenderingContext: isVertexArray() method - Web APIs

WebGL2RenderingContext: isVertexArray() method
==============================================

 The **`WebGL2RenderingContext.isVertexArray()`** method of the
 WebGL API returns `true` if the
 passed object is a valid `WebGLVertexArrayObject` object.

Syntax
------

```js
isVertexArray(vertexArray)
```

### Parameters

`vertexArray`

A `WebGLVertexArrayObject` (VAO) object to test.

### Return value

 A `GLboolean` indicating whether the given object is a valid
 `WebGLVertexArrayObject` object (`true`) or not
 (`false`).

Examples
--------

```js
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

// …

gl.isVertexArray(vao);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.17 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLVertexArrayObject`


WebGL2RenderingContext: readBuffer() method - Web APIs

WebGL2RenderingContext: readBuffer() method
===========================================

 The **`WebGL2RenderingContext.readBuffer()`** method of the WebGL 2 API selects a color buffer as the
 source for pixels for subsequent calls to
 `copyTexImage2D`,
 `copyTexSubImage2D`,
 `copyTexSubImage3D` or
 `readPixels`.

Syntax
------

```js
readBuffer(source)
```

### Parameters

`source`

A `GLenum` specifying a color buffer. Possible values:

`gl.BACK`

Reads from the back color buffer.

`gl.NONE`

Reads from no color buffer.

`gl.COLOR_ATTACHMENT{0-15}`

Reads from one of the 16 color attachment buffers.

### Return value

None (`undefined`).

Examples
--------

```js
gl.readBuffer(gl.COLOR\_ATTACHMENT0);
```

Specifications
--------------

| Specification |
| --- |
| WebGL 2.0 Specification # 3.7.4 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.copyTexImage2D()`
* `WebGLRenderingContext.copyTexSubImage2D()`
* `WebGL2RenderingContext.copyTexSubImage3D()`
* `WebGLRenderingContext.readPixels()`


TextTrackCueList: getCueById() method - Web APIs

TextTrackCueList: getCueById() method
=====================================

The **`getCueById()`** method of the `TextTrackCueList` interface returns the first `VTTCue` in the list represented by the `TextTrackCueList` object whose identifier matches the value of `id`.

Syntax
------

```js
getCueById(id)
```

### Parameters

`id`

A string which is an identifier for the cue.

### Return value

A `VTTCue` object.

Examples
--------

The `TextTrack.cues` property returns a `TextTrackCueList` containing the current cues for that particular track. Calling `cues.getCueById("second")` returns the `VTTCue` with an ID of "second".
```

WEBVTT

first
00:00:00.000 --> 00:00:00.999 line:80%
Hildy!

second
00:00:01.000 --> 00:00:01.499 line:80%
How are you?
```

```js
const video = document.getElementById("video");
video.onplay = () => {
  console.log(video.textTracks[0].cues.getCueById("second")); // a VTTCue object;
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-texttrackcuelist-getcuebyid |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


TextTrackCueList: length property - Web APIs

TextTrackCueList: length property
=================================

The **`length`** read-only property of the `TextTrackCueList` interface returns the number of cues in the list.

Value
-----

An `unsigned long` which is the number of cues in the list.

Examples
--------

The `TextTrack.cues` property returns a `TextTrackCueList` containing the current cues for that particular track. Calling `cues.length` returns the number of cues in the list. Using the WebVTT track below, the value of `length` is 5.
```

WEBVTT

first
00:00:00.000 --> 00:00:00.999  line:80%
Hildy!

second
00:00:01.000 --> 00:00:01.499 line:80%
How are you?

third
00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the ruler of the universe in?

fourth
00:00:03.000 --> 00:00:04.299 line:80%
Yes, they're in - in a bad humor

fifth
00:00:04.300 --> 00:00:06.000 line:80%
Somebody must've stolen the crown jewels
```

```js
const video = document.getElementById("video");
video.onplay = () => {
  console.log(video.textTracks[0].cues.length); // 5
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-texttrackcuelist-length |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VideoEncoder: reset() method - Web APIs

VideoEncoder: reset() method
============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`reset()`** method of the `VideoEncoder` interface synchronously cancels all pending encodes and callbacks, frees all underlying resources and sets the `state` to "unconfigured".
 After calling `reset()`, `configure()` must be called before resuming `encode()` calls.

**Note:** To avoid discarding frames queued via `encode()`, `flush()` should be called and completed before calling `reset()`.

Syntax
------

```js
reset()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the `state` is `"closed"`.

Examples
--------

The following example resets the `VideoEncoder`.

```js
VideoEncoder.reset();
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-videoencoder-reset |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VideoEncoder: encode() method - Web APIs

VideoEncoder: encode() method
=============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`encode()`** method of the `VideoEncoder` interface asynchronously encodes a `VideoFrame`.
 Encoded data (`EncodedVideoChunk`) or an error will eventually be returned via the callbacks provided to the `VideoEncoder` constructor.

Syntax
------

```js
encode(frame)
encode(frame, options)
```

### Parameters

`frame`

A `VideoFrame` object.

`options` Optional

An object containing the following members:

`keyFrame` Optional

A `boolean`, defaulting to `false` giving the user agent flexibility to decide if this frame should be encoded as a key frame. If `true` this indicates that the given frame must be encoded as a key frame.

`vp9` Optional

Encode options for the VP9 codec.

`quantizer`

Frame quantizer value 0 to 63. Only effective if `VideoEncoder` was configured with `quantizer` bitrate mode.

`av1` Optional

Encode options for the AV1 codec.

`quantizer`

Frame quantizer value 0 to 63. Only effective if `VideoEncoder` was configured with `quantizer` bitrate mode.

`avc` Optional

Encode options for the AVC (H.264) codec.

`quantizer`

Frame quantizer value 0 to 51. Only effective if `VideoEncoder` was configured with `quantizer` bitrate mode.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the `state` is not `"configured"`.

`DataError` `DOMException`

Thrown if the `chunk` cannot be decoded due to relying on other frames for decoding.

Examples
--------

In the following example `encode` is passed a `VideoFrame`, and the options parameter indicating that this frame should be considered a keyframe.

```js
encoder.encode(frame, { keyFrame: true });
```

Setting per-frame QP value for encoding individual frames.

```js
const encoder = new VideoEncoder(init);
const encoderConfig = {
  codec: "vp09.00.10.08",
  width: 800,
  height: 600,
  bitrateMode: "quantizer",
  framerate: 30,
  latencyMode: "realtime",
};
encoder.configure(encoderConfig);

const encodeOptions = { keyFrame: false };
const qp = calculateQp(codec, frame);

if (codec.includes("vp09")) {
  encodeOptions.vp9 = { quantizer: qp };
} else if (codec.includes("av01")) {
  encodeOptions.av1 = { quantizer: qp };
} else if (codec.includes("avc")) {
  encodeOptions.avc = { quantizer: qp };
}

encoder.encode(frame, encodeOptions);
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-videoencoder-encode |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VideoEncoder: state property - Web APIs

VideoEncoder: state property
============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`state`** read-only property of the `VideoEncoder` interface returns the current state of the underlying codec.

Value
-----

A string containing one of the following values:

`"unconfigured"`

The codec is not configured for decoding.

`"configured"`

The codec has a valid configuration and is ready.

`"closed"`

The codec is no longer usable and system resources have been released.

Examples
--------

The following example prints the state of the `VideoEncoder` to the console.

```js
console.log(VideoEncoder.state);
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-videoencoder-state |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VideoEncoder: dequeue event - Web APIs

VideoEncoder: dequeue event
===========================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`dequeue`** event of the `VideoEncoder` interface fires to signal a decrease in `VideoEncoder.encodeQueueSize`.

This eliminates the need for developers to use a `setTimeout()` poll to determine when the queue has decreased, and more work should be queued up.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
addEventListener("dequeue", (event) => {});

ondequeue = (event) => {};
```

Example
-------

```js
videoEncoder.addEventListener("dequeue", (event) => {
  // Queue up more encoding work
});
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # eventdef-videencoder-dequeue |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VideoEncoder: encodeQueueSize property - Web APIs

VideoEncoder: encodeQueueSize property
======================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`encodeQueueSize`** read-only property of the `VideoEncoder` interface returns the number of pending encode requests in the queue.

Value
-----

An integer containing the number of requests.

Examples
--------

The following example prints the size of the queue to the console.

```js
console.log(VideoEncoder.encodeQueueSize);
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-videoencoder-encodequeuesize |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VideoEncoder: close() method - Web APIs

VideoEncoder: close() method
============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`close()`** method of the `VideoEncoder` interface ends all pending work and releases system resources.

Syntax
------

```js
close()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

The following example closes the `VideoEncoder`.

```js
VideoEncoder.close();
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-videoencoder-close |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VideoEncoder: VideoEncoder() constructor - Web APIs

VideoEncoder: VideoEncoder() constructor
========================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`VideoEncoder()`** constructor creates a new `VideoEncoder` object with the provided `options.output` callback assigned as the output callback, the provided `options.error` callback as the error callback, and sets the `VideoEncoder.state` to `"unconfigured"`.

Syntax
------

```js
new VideoEncoder(options)
```

### Parameters

`options`

An object containing two required callbacks.

`output`

A callback which takes an `EncodedVideoChunk` object as the first argument, and an optional metadata object as the second. The metadata object has three members:

`decoderConfig` Optional

An object containing:

`codec`

A string containing a valid codec string.

`description` Optional

An `ArrayBuffer`, a `TypedArray`, or a `DataView` containing a sequence of codec-specific bytes, commonly known as "extradata".

`codedWidth` Optional

An integer representing the width of the `VideoFrame` in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.

`codedHeight` Optional

An integer representing the height of the `VideoFrame` in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.

`displayAspectWidth` Optional

An integer representing the horizontal dimension of the `VideoFrame`'s aspect ratio when displayed.

`displayAspectHeight` Optional

An integer representing the vertical dimension of the `VideoFrame`'s aspect ratio when displayed.

`colorSpace` Optional

An object you pass to the `VideoColorSpace` constructor as the `init` argument, configuring the `VideoFrame.colorSpace` for `VideoFrames` associated with this `decoderConfig` object. If `colorSpace` exists, the provided values will override any in-band values from the bitstream.

`hardwareAcceleration` Optional

A string that configures hardware acceleration for this codec. Defaults to `"no-preference"`. Options are:

* `"no-preference"`
* `"prefer-hardware"`
* `"prefer-software"`

`optimizeForLatency` Optional

A boolean representing whether the selected decoder should be configured to minimize the number of `EncodedVideoChunks` that have to be decoded before a `VideoFrame` is output.

`svc` Optional

An optional object with only one member: `temporalLayerId`, which is a number that identifies the temporal layer for the associated `EncodedVideoChunk`.

`alphaSideData` Optional

 An `ArrayBuffer`, a `TypedArray`, or a `DataView`
 that contains the `EncodedVideoChunk`'s extra alpha channel data.

`error`

A callback which takes an `Error` object as its only argument.

Examples
--------

In the following example a `VideoEncoder` is created with the two required callback functions, one to deal with the encoded frame and the other to handle errors.

```js
const videoEncoder = new VideoEncoder({
  output(chunk, metadata) {
    console.log(chunk.timestamp);
    console.log(chunk.byteLength);
    console.log(JSON.stringify(metadata));
  },
  error(error) {
    console.log(error);
  },
});
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-videoencoder-videoencoder |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VideoEncoder: configure() method - Web APIs

VideoEncoder: configure() method
================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`configure()`** method of the `VideoEncoder` interface changes the `state` of the encoder to "configured" and asynchronously prepares the encoder to accept `VideoEncoder`s for encoding with the specified parameters. If the encoder doesn't support the specified parameters or can't be initialized for other reasons an error will be reported via the error callback provided to the `VideoEncoder` constructor.

If the `VideoEncoder` has been previously configured, the new configuration will not be applied until all previous tasks have completed.

Syntax
------

```js
configure(config)
```

### Parameters

`config`

A dictionary object containing the following members:

`codec`

A string containing a valid codec string. See "codecs" parameter for details on codec string construction.

`width` Optional

An integer representing the width of each output `EncodedVideoChunk` in pixels, before any ratio adjustments.

`height` Optional

An integer representing the height of each output `EncodedVideoChunk` in pixels, before any ratio adjustments.

`displayWidth` Optional

An integer representing the intended display width of each output `EncodedVideoChunk` in pixels when displayed.

`displayHeight` Optional

An integer representing the vertical dimension of each output `EncodedVideoChunk` in pixels when displayed.

`hardwareAcceleration`

A hint that configures the hardware acceleration method of this codec. One of:

* `"no-preference"`
* `"prefer-hardware"`
* `"prefer-software"`

`bitrate`

An integer containing the average bitrate of the encoded video in units of bits per second.

`framerate`

An integer containing the expected frame rate in frames per second.

`alpha`

A string indicating whether the alpha component of the `VideoFrame` inputs should be kept or discarded prior to encoding. One of:

* `"discard"` (default)
* `"keep"`

`scalabilityMode`

A string containing an encoding scalability mode identifier as defined in WebRTC.

`bitrateMode` Optional

A string containing a bitrate mode. One of:

`"constant"`

The encoder will target constant bitrate.

`"variable"` (default)

The encoder will target a variable bitrate, allowing more space to be used for complex signals and less space for less complex signals.

`"quantizer"`

The encoder will disregard the `bitrate` option and instead it will use codec-specific quantizer values specified for each frame in the `options` parameter to `VideoEncoder.encode()`.

`latencyMode` Optional

A string containing a value that configures the latency behavior of this codec. One of:

`"quality"` (default)

The encoder should optimize for encoding quality.

`"realtime"`

The encoder should optimize for low latency and may even drop frames to honor `framerate`.

### Return value

None (`undefined`).

### Exceptions

`TypeError`

Thrown if the provided `config` is invalid.

`InvalidStateError` `DOMException`

Thrown if the `state` is `"closed"`.

`NotSupportedError` `DOMException`

Thrown if the provided `config` is valid but the user agent cannot provide a codec that can decode this profile.

Examples
--------

The following example creates a new `VideoEncoder` and configures it with some of the available options.

```js
const init = {
  output: handleChunk,
  error: (e) => {
    console.log(e.message);
  },
};

let config = {
  codec: "vp8",
  width: 640,
  height: 480,
  bitrate: 2\_000\_000, // 2 Mbps
  framerate: 30,
};

let encoder = new VideoEncoder(init);
encoder.configure(config);
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-videoencoder-configure |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VideoEncoder: flush() method - Web APIs

VideoEncoder: flush() method
============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`flush()`** method of the `VideoEncoder` interface forces all pending encodes to complete.

Syntax
------

```js
flush()
```

### Parameters

None.

### Return value

A `Promise` that resolves once the encoder's initialization is completed and all pending `EncodedVideoChunk`s are returned.

### Exceptions

`InvalidStateError` `DOMException`

Returned if the Promise is rejected because the `state` is not `configured`.

Examples
--------

The following example flushes the `VideoEncoder`.

```js
VideoEncoder.flush();
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-videoencoder-flush |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VideoEncoder: isConfigSupported() static method - Web APIs

VideoEncoder: isConfigSupported() static method
===============================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`isConfigSupported()`** static method of the `VideoEncoder` interface checks if `VideoEncoder` can be successfully configured with the given config.

Syntax
------

```js
VideoEncoder.isConfigSupported(config)
```

### Parameters

`config`

The dictionary object accepted by `VideoEncoder.configure`

### Return value

A `Promise` that resolves with an object containing the following members:

`supported`

A boolean value which is `true` if the given config is supported by the encoder.

`config`

A copy of the given config with all the fields recognized by the encoder.

### Exceptions

`TypeError`

Thrown if the provided `config` is invalid; that is, if doesn't have required values (such as an empty `codec` field) or has invalid values (such as a negative `width`)

Examples
--------

 The following example tests if the browser supports accelerated and un-accelerated
 versions of several video codecs.

```js
const codecs = ["avc1.42001E", "vp8", "vp09.00.10.08", "av01.0.04M.08"];
const accelerations = ["prefer-hardware", "prefer-software"];

const configs = [];
for (const codec of codecs) {
  for (const acceleration of accelerations) {
    configs.push({
      codec,
      hardwareAcceleration: acceleration,
      width: 1280,
      height: 720,
      bitrate: 2\_000\_000,
      bitrateMode: "constant",
      framerate: 30,
      not\_supported\_field: 123,
    });
  }
}

for (const config of configs) {
  const support = await VideoEncoder.isConfigSupported(config);
  console.log(
    `VideoEncoder's config ${JSON.stringify(support.config)} support: ${
 support.supported
 }`,
  );
}
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-videoencoder-isconfigsupported |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


DocumentType: remove() method - Web APIs

DocumentType: remove() method
=============================

The **`DocumentType.remove()`** method removes a document's `doctype`.

Syntax
------

```js
remove()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Using `remove()`

```js
document.doctype; // "<!DOCTYPE html>'
document.doctype.remove();
document.doctype; // null
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-remove① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Document.doctype`


DocumentType: systemId property - Web APIs

DocumentType: systemId property
===============================

The read-only **`systemId`** property of the `DocumentType` returns the URL of the associated DTD.

For synthetic `DocumentType`, this property reflects the value given in parameter to `DOMImplementation.createDocumentType()`.

For HTML documents, browsers always set it up to `html`, whatever the actual `DOCTYPE` in the source code is. For SVG documents, for example, it can be `"http://www.w3.org/2000/svg"`.

Value
-----

A string.

Examples
--------

```js
const docType = document.implementation.createDocumentType(
  "svg",
  "",
  "http://www.w3.org/2000/svg",
);

console.log(docType.systemId); // Displays "http://www.w3.org/2000/svg"
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-documenttype-systemid |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


DocumentType: after() method - Web APIs

DocumentType: after() method
============================

 The **`DocumentType.after()`** method inserts a set of
 `Node` objects or strings in the children list of the
 `DocumentType`'s parent, just after the `DocumentType`.
 Strings are inserted as equivalent `Text` nodes.

Syntax
------

```js
after(param1)
after(param1, param2)
after(param1, param2, /\* …, \*/ paramN)
```

### Parameters

`param1`, …, `paramN`

A set of `Node` objects or strings to insert.

### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples
--------

```js
let docType = document.implementation.createDocumentType("html", "", "");
let myDoc = document.implementation.createDocument("", "", docType);

docType.after(document.createElement("html"));

myDoc.childNodes;
// NodeList [<!DOCTYPE html>, <html>]
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-after① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `DocumentType.before()`


DocumentType: before() method - Web APIs

DocumentType: before() method
=============================

 The **`DocumentType.before()`** method inserts a set of
 `Node` objects or strings in the children list of the
 `DocumentType`'s parent, just before the `DocumentType`.
 Strings are inserted as equivalent `Text` nodes.

Syntax
------

```js
before(param1)
before(param1, param2)
before(param1, param2, /\* …, \*/ paramN)
```

### Parameters

`param1`, …, `paramN`

A set of `Node` objects or strings to insert.

### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples
--------

### Adding a conditional comment

 Comment nodes are valid before doctype declarations but not advisable
 given they trigger quirks mode in IE. A
 conditional comment
 works for IE as well, though:

```js
let docType = document.implementation.createDocumentType("html", "", "");
let myDoc = document.implementation.createDocument("", "", docType);

docType.before(
  document.createComment("<!--[if !IE]> conditional comment <![endif]-->"),
);

myDoc.childNodes;
// NodeList [<!--[if !IE]> conditional comment <![endif]-->, <!DOCTYPE html>]
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-before① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `DocumentType.after()`


DocumentType: replaceWith() method - Web APIs

DocumentType: replaceWith() method
==================================

The **`DocumentType.replaceWith()`** method replaces the document type with a set of given nodes.

Syntax
------

```js
replaceWith(node1)
replaceWith(node1, node2)
replaceWith(node1, node2, /\* …, \*/ nodeN)
```

### Parameters

`node1`, …, `nodeN`

A set of nodes to replace the `DocumentType` with.

### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples
--------

### Using `replaceWith()`

```js
let svg_dt = document.implementation.createDocumentType(
  "svg:svg",
  "-//W3C//DTD SVG 1.1//EN",
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd",
);

document.doctype.replaceWith(svg_dt);
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-replacewith① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Element.replaceWith()`


DocumentType: name property - Web APIs

DocumentType: name property
===========================

The read-only **`name`** property of the `DocumentType` returns the type of the document.

For synthetic `DocumentType`, this property reflects the value given in parameter to `DOMImplementation.createDocumentType()`.

For HTML documents, browsers always set it up to `html`, whatever the actual `DOCTYPE` in the source code is.

Value
-----

A string.

Examples
--------

```js
const docType = document.implementation.createDocumentType("html", "", "");

console.log(docType.name); // Displays `html`
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-documenttype-name |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


DocumentType: publicId property - Web APIs

DocumentType: publicId property
===============================

The read-only **`publicId`** property of the `DocumentType` returns a formal identifier of the document.

For synthetic `DocumentType`, this property reflects the value given in parameter to `DOMImplementation.createDocumentType()`.

For HTML documents, browsers always set it up to `html`, whatever the actual `DOCTYPE` in the source code is. For SVG documents, for example, it can be `"-//W3C//DTD SVG 1.1//EN"`.

Value
-----

A string.

Examples
--------

```js
const docType = document.implementation.createDocumentType(
  "svg",
  "-//W3C//DTD SVG 1.1//EN",
  "http://www.w3.org/2000/svg",
);

console.log(docType.publicId); // Displays "-//W3C//DTD SVG 1.1//EN"
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-documenttype-publicid |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


MediaStreamTrackGenerator: MediaStreamTrackGenerator() constructor - Web APIs

MediaStreamTrackGenerator: MediaStreamTrackGenerator() constructor
==================================================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`MediaStreamTrackGenerator()`** constructor creates a new `MediaStreamTrackGenerator` object which consumes a stream of media frames and exposes a `MediaStreamTrack`.

Syntax
------

```js
new MediaStreamTrackGenerator(options)
```

### Parameters

`options`

An object containing the property `kind`, which is one of the following strings:

`"audio"`

Specifies that the stream accepts `AudioTrack` objects.

`"video"`

Specifies that the stream accepts `VideoTrack` objects.

Exceptions
----------

`TypeError`

Thrown if `init.kind` is not `"video"` or `"audio"`.

Examples
--------

In the following example a new video `MediaStreamTrackGenerator` is created.

```js
const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });
```

Specifications
--------------

#### No specification found

No specification data found for `api.MediaStreamTrackGenerator.MediaStreamTrackGenerator`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Insertable streams for MediaStreamTrack


MediaStreamTrackGenerator: writable property - Web APIs

MediaStreamTrackGenerator: writable property
============================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`writable`** property of the `MediaStreamTrackGenerator` interface returns a `WritableStream`. This allows the writing of media frames to the `MediaStreamTrackGenerator`. The frames will be audio or video. The type is dictated by the kind of `MediaStreamTrackGenerator` that was created.

Value
-----

A `WritableStream`.

Examples
--------

In the following example video frames are transformed then written to the `WritableStream` accessed with `MediaStreamTrackGenerator.writable`.

```js
const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });

/\* \*/

trackProcessor.readable
  .pipeThrough(transformer)
  .pipeTo(trackGenerator.writable);
```

Specifications
--------------

#### No specification found

No specification data found for `api.MediaStreamTrackGenerator.writable`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


VirtualKeyboard: hide() method - Web APIs

VirtualKeyboard: hide() method
==============================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`hide()`** method of the `VirtualKeyboard` interface programmatically hides the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic by using the VirtualKeyboard API.

This method only works if the currently-focused element's `virtualKeyboardPolicy` attribute is set to `manual` and `inputmode` isn't set to `none`.

The `hide()` method always returns `undefined` and triggers a `geometrychange` event.

Syntax
------

```js
hide()
```

### Parameters

None.

### Return value

Undefined.

Example
-------

The code snippet below shows how to use the `virtualkeyboardpolicy` attribute to prevent the browser from showing the virtual keyboard on click or tap. The code also uses the `navigator.virtualKeyboard.show()` and `navigator.virtualKeyboard.hide()` methods to show and hide the virtual keyboard when a button is clicked:

```js
<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
<button id="edit-button">Edit</button>
<script>
  if ("virtualKeyboard" in navigator) {
    const editor = document.getElementById("editor");
    const editButton = document.getElementById("edit-button");
    let isEditing = false;

    editButton.addEventListener("click", () => {
      if (isEditing) {
        navigator.virtualKeyboard.hide();
        editButton.textContent = "Edit";
      } else {
        editor.focus();
        navigator.virtualKeyboard.show();
        editButton.textContent = "Save changes";
      }

      isEditing = !isEditing;
    });
  }
</script>
```

Specifications
--------------

| Specification |
| --- |
| VirtualKeyboard API # dom-virtualkeyboard-hide |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The VirtualKeyboard API
* Full control with the VirtualKeyboard API


VirtualKeyboard: show() method - Web APIs

VirtualKeyboard: show() method
==============================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`show()`** method of the `VirtualKeyboard` interface programmatically shows the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic, especially when using the `virtualkeyboardpolicy` attribute on `contenteditable` elements as explained in Control the virtual keyboard on `contenteditable` elements.

This method only works if the currently-focused element is a form control — such as an `<input>` or `<textarea>` element — or if the focused element is `contenteditable`, and the currently-focused element's `virtualKeyboardPolicy` attribute is set to `manual` and `inputmode` isn't set to `none`.

The `show()` method always returns `undefined` and triggers a `geometrychange` event.

Syntax
------

```js
show()
```

### Parameters

None.

### Return value

Undefined.

Example
-------

The code snippet below shows how to use the `virtualkeyboardpolicy` attribute to prevent the browser from showing the virtual keyboard on click or tap. The code also uses the `navigator.virtualKeyboard.show()` and `navigator.virtualKeyboard.hide()` methods to show and hide the virtual keyboard when a button is clicked:

```js
<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
<button id="edit-button">Edit</button>
<script>
  if ("virtualKeyboard" in navigator) {
    const editor = document.getElementById("editor");
    const editButton = document.getElementById("edit-button");
    let isEditing = false;

    editButton.addEventListener("click", () => {
      if (isEditing) {
        navigator.virtualKeyboard.hide();
        editButton.textContent = "Edit";
      } else {
        editor.focus();
        navigator.virtualKeyboard.show();
        editButton.textContent = "Save changes";
      }

      isEditing = !isEditing;
    });
  }
</script>
```

Specifications
--------------

| Specification |
| --- |
| VirtualKeyboard API # dom-virtualkeyboard-show |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The VirtualKeyboard API
* Full control with the VirtualKeyboard API


VirtualKeyboard: geometrychange event - Web APIs

VirtualKeyboard: geometrychange event
=====================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`geometrychange`** event of the `VirtualKeyboard`
 interface fires when the on-screen virtual keyboard is toggled between shown and hidden states.

The `geometrychange` event is useful to detect when the virtual keyboard appears and disappears, so you can adjust the layout as appropriate. This is necessary when using the Virtual Keyboard API to disable the browser's default automatic resizing of the viewport when the virtual keyboard is shown and hidden.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.

```js
navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {});

navigator.virtualKeyboard.ongeometrychange = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

The following code snippet uses the `geometrychange` event to detect when the virtual keyboard geometry changes, and then accesses the `boundingRect` property to query the size and position of the virtual keyboard:

```js
if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;

  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
  });
}
```

Specifications
--------------

| Specification |
| --- |
| VirtualKeyboard API # dom-virtualkeyboard-ongeometrychange |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The VirtualKeyboard API
* Full control with the VirtualKeyboard API


VirtualKeyboard: overlaysContent property - Web APIs

VirtualKeyboard: overlaysContent property
=========================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`overlaysContent`** property of the VirtualKeyboard interface can be used to opt out of the automatic way in which browsers handle on-screen virtual keyboards by reducing the size of the viewport to make space for them.

If the `overlaysContent` property is set to `true`, the browser no longer resizes the viewport when the virtual keyboard appears. The virtual keyboard instead overlays the content of the web page, and you can adapt the page layout as appropriate using the Virtual Keyboard API and your own custom CSS and JavaScript.

Value
-----

A boolean. `false` by default, set it to `true` to opt out of the browser's automatic handling of the on-screen virtual keyboard.

Example
-------

```js
if ("virtualKeyboard" in navigator) {
  console.log(navigator.virtualKeyboard.overlaysContent); // false
  navigator.virtualKeyboard.overlaysContent = true; // Opt out of the automatic handling.
}
```

Specifications
--------------

| Specification |
| --- |
| VirtualKeyboard API # dom-virtualkeyboard-overlayscontent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The VirtualKeyboard API
* Full control with the VirtualKeyboard API


VirtualKeyboard: boundingRect property - Web APIs

VirtualKeyboard: boundingRect property
======================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`boundingRect`** property of the `VirtualKeyboard` interface contains a `DOMRect` indicating the position and size of the on-screen virtual keyboard that overlays the web page.

The on-screen virtual keyboard will overlay the viewport when the Virtual Keyboard API is used to prevent the browser from resizing the viewport automatically. This is done by setting the `overlaysContent` property to `true`.

Value
-----

A `DOMRect` which indicates the position and size of the virtual keyboard in the viewport.

The `x`, `y`, `width`, and `height` coordinates of the rectangle are useful to reposition content in the webpage that needs to be visible even when the virtual keyboard is displayed.

```js
const { x, y, width, height } = navigator.virtualKeyboard.boundingRect;
```

Specifications
--------------

| Specification |
| --- |
| VirtualKeyboard API # dom-virtualkeyboard-boundingrect |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The VirtualKeyboard API
* Full control with the VirtualKeyboard API


Lock: name property - Web APIs

Lock: name property
===================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`name`** read-only property of
 the `Lock` interface returns the *name* passed to
 `LockManager.request` selected when the lock was requested.

 The name of a lock is passed by script when the lock is requested. The name is selected
 by the developer to represent an abstract resource for which use is being coordinated
 across multiple tabs, workers, or other code within the origin. For example, if only one
 tab of a web application should be synchronizing network resources with an offline
 database, it could use a lock name such as `"net_db_sync"`.

**Note:** This feature is available in Web Workers

Value
-----

A string.

Examples
--------

 The following examples show how the name property passed in the call
 to `LockManager.request()`. `LockManager` is the object returned
 by `navigator.locks`.

```js
navigator.locks.request("net\_db\_sync", show_lock_properties);

function show\_lock\_properties(lock) {
  console.log(`The lock name is: ${lock.name}`);
  console.log(`The lock mode is: ${lock.mode}`);
}
```

Specifications
--------------

| Specification |
| --- |
| Web Locks API # dom-lock-name |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Lock: mode property - Web APIs

Lock: mode property
===================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`mode`** read-only property of the `Lock` interface returns the access mode passed to `LockManager.request()` when the lock was requested.
 The mode is either `"exclusive"` (the default) or `"shared"`.

**Note:** This feature is available in Web Workers

Value
-----

One of `"exclusive"` or `"shared"`.

Examples
--------

 The following examples show how the mode property is passed in the call to `LockManager.request()`.
 `LockManager` is the object returned by `navigator.locks`.

```js
// Should show "exclusive" (the default)
navigator.locks.request("my\_resource", show_lock_properties);

// Should show "exclusive"
navigator.locks.request(
  "my\_resource",
  { mode: "exclusive" },
  show_lock_properties,
);

// Should show "shared"
navigator.locks.request(
  "my\_resource",
  { mode: "shared" },
  show_lock_properties,
);

function show\_lock\_properties(lock) {
  console.log(`The lock name is: ${lock.name}`);
  console.log(`The lock mode is: ${lock.mode}`);
}
```

Specifications
--------------

| Specification |
| --- |
| Web Locks API # dom-lock-mode |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLStyleElement: sheet property - Web APIs

HTMLStyleElement: sheet property
================================

 The read-only **`sheet`** property of the `HTMLStyleElement` interface
 contains the stylesheet associated with that element.

An `StyleSheet` is always associated with a `HTMLStyleElement`, unless its `type` attribute is not `text/css`.

Value
-----

A `StyleSheet` object, or `null` if none is associated with the element.

Examples
--------

```html
<html>
  <header>
    <style media="print" />
    …
  </header>
</html>
```

The `sheet` property of the associated `HTMLStyleElement` object will return the `StyleSheet` object describing it.

Specifications
--------------

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLStyleElement: disabled property - Web APIs

HTMLStyleElement: disabled property
===================================

The **`HTMLStyleElement.disabled`** property can be used to get and set whether the stylesheet is disabled (`true`) or not (`false`).

Note that there is no corresponding `disabled` attribute on the HTML `<style>` element.

Value
-----

 Returns `true` if the stylesheet is disabled, or there is no associated stylesheet; otherwise `false`.
 The value is `false` by default (if there is an associated stylesheet).

 The property can be used to enable or disable an associated stylesheet.
 Setting the property to `true` when there is no associated stylesheet has no effect.

Examples
--------

### Disabling an inline style

 This example demonstrates programmatically setting the disabled property on a style that was defined in the HTML using the HTML `<style>` element.
 Note that you can also access any/all stylesheets in the document using `Document.styleSheets`.

#### HTML

The HTML contains an HTML `<style>` element that makes paragraph elements blue, a paragraph element, and a button that will be used to enabled and disable the style.

```html
<button>Enable</button>
<style id="InlineStyle">
 p {
 color: blue;
 }
</style>
<p>Text is black when style is disabled; blue when enabled.</p>
<p></p>
```

#### JavaScript

 The code below gets the `style` element using its id, and then sets it as disabled.
 As the style already exists, as it is defined in the SVG, this should succeed.

```js
const style = document.getElementById("InlineStyle");
style.disabled = true;
```

We then add an event handler for the button that toggles the `disabled` value and button text.

```js
const button = document.querySelector("button");

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  const buttonText = style.disabled ? "Enable" : "Disable";
  button.innerText = buttonText;
});
```

#### Result

 The result is shown below.
 Press the button to toggle the `disabled` property value on the style used for the paragraph text.

### Disabling a programmatically defined style

This example is very similar to the one above, except that the style is defined programmatically.

#### HTML

The HTML is similar to the previous case, but the definition does not include any default styling.

```html
<button>Enable</button>
<p>Text is black when style is disabled; blue when enabled.</p>
<p></p>
```

#### JavaScript

 First we create the new style element on the HTML.
 This is done by first creating a style element using `Document.createElement()`, creating and appending a text node with the style definition, and then appending the style element to the document body.

```js
// Create the `style` element
const style = document.createElement("style");
const node = document.createTextNode("p { color: blue; }");
style.appendChild(node);
document.body.appendChild(style);
```

 We can then disable the style as shown below.
 Note that this is the earliest point at which setting the property to `true` will succeed.
 Before this point the document did not have an associated style, and so the value defaults to `false`.

```js
//Disable the style
style.disabled = true;
```

Last of all we add an event handler for the button that toggles the disabled state and button text (this is the same as in the previous example).

```js
const button = document.querySelector("button");

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  const buttonText = style.disabled ? "Enable" : "Disable";
  button.innerText = buttonText;
});
```

#### Result

 The result is shown below.
 Press the button to toggle the `disabled` state on the style used for the text.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-style-disabled |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `SVGStyleElement.disabled`


HTMLStyleElement: media property - Web APIs

HTMLStyleElement: media property
================================

 The **`HTMLStyleElement.media`** property specifies the
 intended destination medium for style information.

Value
-----

A string describing a single medium or a comma-separated list.

Examples
--------

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test page</title>

    <link
 id="LinkedStyle"
 rel="stylesheet"
 href="document.css"
 media="screen" />
    <style id="InlineStyle" rel="stylesheet" media="screen, print">
 p {
 color: blue;
 }
 </style>
  </head>
  <body>
    <script>
 alert("LinkedStyle: " + document.getElementById("LinkedStyle").media); // 'screen'
 alert("InlineStyle: " + document.getElementById("InlineStyle").media); // 'screen, print'
 </script>
  </body>
</html>
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-style-media |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLStyleElement: type property - Web APIs

HTMLStyleElement: type property
===============================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The **`HTMLStyleElement.type`** property returns the type of the current style.
 The value mirrors the HTML `<style>` element's `type` attribute.

Authors should not use this property or rely on the value.

Value
-----

The permitted values are an empty string or a case-insensitive match for "text/css".

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-style-type |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `SVGStyleElement.type`


DeviceMotionEventAcceleration: z property - Web APIs

DeviceMotionEventAcceleration: z property
=========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`z`** read-only property of the `DeviceMotionEventAcceleration` interface indicates the amount of acceleration that occurred along the Z
 axis in a `DeviceMotionEventAcceleration`
 object.

Value
-----

 A `double` indicating the amount of acceleration along the Z axis.
 See Accelerometer values explained for details.

Specifications
--------------

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventacceleration-z |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


DeviceMotionEventAcceleration: x property - Web APIs

DeviceMotionEventAcceleration: x property
=========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`x`** read-only property of the `DeviceMotionEventAcceleration` interface indicates the amount of acceleration that occurred along the X
 axis in a `DeviceMotionEventAcceleration`
 object.

Value
-----

 A `double` indicating the amount of acceleration along the X axis.
 See Accelerometer values explained for details.

Specifications
--------------

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventacceleration-x |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


DeviceMotionEventAcceleration: y property - Web APIs

DeviceMotionEventAcceleration: y property
=========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`y`** read-only property of the `DeviceMotionEventAcceleration` interface indicates the amount of acceleration that occurred along the Y
 axis in a `DeviceMotionEventAcceleration`
 object.

Value
-----

 A `double` indicating the amount of acceleration along the Y axis.
 See Accelerometer values explained for details.

Specifications
--------------

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventacceleration-y |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RadioNodeList: value property - Web APIs

RadioNodeList: value property
=============================

 If the underlying element collection contains radio buttons, the
 **`RadioNodeList.value`** property represents the checked radio
 button. On retrieving the `value` property, the `value` of the
 currently `checked` radio button is returned as a string. If the collection
 does not contain any radio buttons or none of the radio buttons in the collection is in
 `checked` state, the empty string is returned. On setting the
 `value` property, the first radio button input element whose
 `value` property is equal to the new value will be set to
 `checked`.

Syntax
------

```js
value = radioNodeList.value
radioNodeList.value = string
```

Example
-------

### HTML

```html
<form>
  <label><input type="radio" name="color" value="blue" />Blue</label>
  <label><input type="radio" name="color" value="red" />Red</label>
</form>
```

### JavaScript

```js
// Get the form
const form = document.forms[0];

// Get the form's radio buttons
const radios = form.elements["color"];

// Choose the "red" option
radios.value = "red";
```

### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-radionodelist-value |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `<form>`, `<fieldset>`, `<input>`
 elements.