recursal/MDN huggingface dataset:
MediaSource: sourceBuffers property
===================================

 The **`sourceBuffers`** read-only property of the
 `MediaSource` interface returns a `SourceBufferList` object
 containing the list of `SourceBuffer` objects associated with this
 `MediaSource`.

Value
-----

A `SourceBufferList`.

Examples
--------

The following snippet is based on a simple example written by Nick Desaulniers (view the full demo live, or download the source for further investigation). The function `getMediaSource()`, which is not defined here, returns a `MediaSource`.


```js
const mediaSource = getMediaSource();

function sourceOpen() {
  console.log(this.readyState); // open
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, (buf) => {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      console.log(mediaSource.sourceBuffers); // will contain the source buffer that was added above
      video.play();
      console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

// …
```

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

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-sourcebuffers |

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

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

See also
--------

* `SourceBuffer`
* `SourceBufferList`
MediaSource: canConstructInDedicatedWorker static property
==========================================================

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

The **`canConstructInDedicatedWorker`** static property of the `MediaSource` interface returns `true` if `MediaSource` worker support is implemented, providing a low-latency feature detection mechanism.

If this were not available, the alternative would be a much higher latency approach such as attempting the creation of a `MediaSource` object from a dedicated worker and transferring the result back to the main thread.

Value
-----

A boolean. Returns `true` if `MediaSource` worker support is implemented, or `false` otherwise.

Examples
--------


```js
if (MediaSource.canConstructInDedicatedWorker) {
  // MSE is available in workers; let's do this
}
```

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

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-canconstructindedicatedworker |

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

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

See also
--------

* MSE-in-Workers Demo by Matt Wolenetz
* Media Source Extensions API
* `MediaSource`
* `SourceBuffer`
MediaSource: readyState property
================================

 The **`readyState`** read-only property of the
 `MediaSource` interface returns an enum representing the state of the
 current `MediaSource`. The three possible values are:

* `closed`: The source is not currently attached to a media element.
* `open`: The source is attached to a media element and ready to receive
 `SourceBuffer` objects.
* `ended`: The source is attached to a media element but the stream has
 been ended via a call to `MediaSource.endOfStream()`.
Value
-----

A string.

Examples
--------

The following snippet is from a simple example written by Nick Desaulniers (view the full demo live, or download the source for further investigation). The function `getMediaSource()`, which is not defined here, returns a `MediaSource`.


```js
let mediaSource;

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  mediaSource = getMediaSource();
  console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error("Unsupported MIME type or codec: ", mimeCodec);
}

function sourceOpen() {
  console.log(this.readyState); // open
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, (buf) => {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      video.play();
      console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}
```

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

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-readystate |

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

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

See also
--------

* `SourceBuffer`
* `SourceBufferList`
PaymentRequestEvent: topOrigin property
=======================================

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

 The **`topOrigin`** read-only property of the
 `PaymentRequestEvent` interface returns the top-level payee origin where
 the `PaymentRequest` object was initialized.

Value
-----

A string.

Examples
--------


```js
self.addEventListener("paymentrequest", (e) => {
  console.log(e.topOrigin);
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-paymentrequestevent-toporigin |

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

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

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
PaymentRequestEvent: methodData property
========================================

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

 The **`methodData`** read-only property of the
 `PaymentRequestEvent` interface returns an array of
 `PaymentMethodData` objects containing payment method identifiers for the
 payment methods that the website accepts and any associated payment method-specific
 data.

Value
-----

An array of `PaymentMethodData` objects. Each object contains the following properties:

`supportedMethods`

A payment method identifier for a payment method that the merchant website accepts.

`data`

An object that provides optional information that might be needed by the supported payment methods. If supplied, it will be JSON-serialized.

Examples
--------


```js
self.addEventListener("paymentrequest", (e) => {
  console.log(e.methodData);
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-paymentrequestevent-methoddata |

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

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

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
PaymentRequestEvent: openWindow() method
========================================

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

The **`openWindow()`** method of the `PaymentRequestEvent` interface opens the specified URL in a new window, only if the given URL is on the same origin as the calling page. It returns a `Promise` that resolves with a reference to a `WindowClient`.

Syntax
------


```js
openWindow(url)
```

### Parameters

`url`

 The URL to open in the new window. It must be on the same origin as the calling
 page.


### Return value

 A `Promise` that resolves with a reference to a
 `WindowClient`.

Examples
--------


```js
…
self.addEventListener('paymentrequest', async e => {
…
  // Retain a promise for future resolution
  // Polyfill for PromiseResolver at link below.
  resolver = new PromiseResolver();

  // Pass a promise that resolves when payment is done.
  e.respondWith(resolver.promise);
  // Open the checkout page.
  try {
    // Open the window and preserve the client
    client = await e.openWindow(checkoutURL);
    if (!client) {
      // Reject if the window fails to open
      throw 'Failed to open window';
    }
  } catch (err) {
    // Reject the promise on failure
    resolver.reject(err);
  };
});
…
```


See Open the payment handler window to display the web-based payment app frontend for more details about how this would be used.

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

| Specification |
| --- |
| Payment Handler API # dom-paymentrequestevent-openwindow |

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

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

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
PaymentRequestEvent: paymentRequestId property
==============================================

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

 The **`paymentRequestId`** read-only property of the
 `PaymentRequestEvent` interface returns the ID of the
 `PaymentRequest` object.

Value
-----

A string containing the ID.

Examples
--------


```js
self.addEventListener("paymentrequest", (e) => {
  console.log(e.paymentRequestId);
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-paymentrequestevent-paymentrequestid |

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

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

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
PaymentRequestEvent: instrumentKey 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.

**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 **`instrumentKey`** read-only property of the
 `PaymentRequestEvent` interface returns a
 `PaymentInstrument` object reflecting the payment instrument selected by
 the user or an empty string if the user has not registered or chosen a payment
 instrument.

Value
-----

A `PaymentInstrument` object.

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

This feature is no longer part of any specification.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentRequestEvent: respondWith() method
=========================================

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

The **`respondWith()`** method of the `PaymentRequestEvent` interface prevents the default event handling and allows you to provide a `Promise` for a `PaymentResponse` object yourself.

Syntax
------


```js
respondWith(promise)
```

### Parameters

`promise`

A `Promise` that resolves with a `PaymentHandlerResponse` object.

### Return value

A `PaymentHandlerResponse` object. This contains the following properties:

`methodName`

The payment method identifier for the payment method that the user selected to fulfill the transaction.

`details`

A JSON-serializable object that provides a payment method-specific message used by the merchant to process the transaction and determine a successful fund transfer. See 7.1.2 details attribute for more details.

Examples
--------


```js
…
self.addEventListener('paymentrequest', async e => {
…
  // Retain a promise for future resolution
  // Polyfill for PromiseResolver at link below.
  resolver = new PromiseResolver();

  // Pass a promise that resolves when payment is done.
  e.respondWith(resolver.promise);
  // Open the checkout page.
  try {
    // Open the window and preserve the client
    client = await e.openWindow(checkoutURL);
    if (!client) {
      // Reject if the window fails to open
      throw 'Failed to open window';
    }
  } catch (err) {
    // Reject the promise on failure
    resolver.reject(err);
  };
});
…
```


See Open the payment handler window to display the web-based payment app frontend for more details about how this would be used.

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

| Specification |
| --- |
| Payment Handler API # dom-paymentrequestevent-respondwith |

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

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

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
PaymentRequestEvent: total property
===================================

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

 The **`total`** read-only property of the `PaymentRequestEvent` interface returns a
 `PaymentCurrencyAmount` object containing the total amount being requested for payment.

Value
-----

A `PaymentCurrencyAmount` object. This object contains the following properties:

`currency`

A string containing a three-letter ISO 4217 standard currency code representing the currency of the payment. Examples include `USD`, `CAN`, and `GBP`.

`value`

A string containing a decimal monetary value, e.g. `2.55`.

Examples
--------


```js
self.addEventListener("paymentrequest", (e) => {
  console.log(e.total);
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-paymentrequestevent-total |

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

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

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
PaymentRequestEvent: changePaymentMethod() method
=================================================

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

The **`changePaymentMethod()`** method of the `PaymentRequestEvent` interface is used by the payment handler to get an updated total, given such payment method details as the billing address.

When this method is invoked, a `PaymentMethodChangeEvent` is fired.

Syntax
------


```js
changePaymentMethod(methodName)
changePaymentMethod(methodName, methodDetails)
```

### Parameters

`methodName`

The name of the payment method to be used.

`methodDetails` Optional

An object containing method-specific details that are being updated.

### Return value

A `Promise` that resolves with a `PaymentRequestDetailsUpdate` object. This object contains the following properties:

`error`

A string that explains why the user-selected payment method cannot be used.

`total`

An updated total based on the changed payment method. The total can change, for example, because the billing address of the payment method selected by the user changes the applicable sales tax.

`modifiers`

An `Array` of `PaymentDetailsModifier` objects, whose properties are described in `PaymentRequestEvent.modifiers`.

`paymentMethodErrors`

An object containing validation errors for the payment method, if any.

Examples
--------

The following shows a trivial code snippet that could be used in a service worker to send a payment method change notification to the main payment handler window. For a complete test example, see Payment handler for testing payment method change event.


```js
function notifyPaymentMethodChanged(e) {
  e.changePaymentMethod("someMethod")
    .then((paymentMethodChangeResponse) => {
      paymentHandlerWindow.postMessage(paymentMethodChangeResponse);
    })
    .catch((error) => {
      sendMessage({ error: error.message });
    });
}
```

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

| Specification |
| --- |
| Payment Handler API # changepaymentmethod-method |

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

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

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
PaymentRequestEvent: modifiers property
=======================================

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

 The **`modifiers`** read-only property of the
 `PaymentRequestEvent` interface returns an `Array` of `PaymentDetailsModifier` objects containing modifiers for payment details.

Value
-----

An array of objects containing modifiers for payment details. These objects contain the following properties:

`supportedMethods`

A payment method identifier. The members of the object only apply to the payment if the user selects this payment method.

`total`

A `PaymentItem` object containing the following properties:

`label`

A string containing a human-readable description of the item, which may be displayed to the user.

`amount`

A `PaymentCurrencyAmount` object (see `total` > Value).

`pending`

A boolean. When set to true it means that the `amount` member is not final. This is commonly used to show items such as shipping or tax amounts that depend upon selection of shipping address or shipping option.


`additionalDisplayItems`

An array of `PaymentItem` objects providing additional display items to be included in the payment details. This member is commonly used to add a discount or surcharge line item indicating the reason for the different total amount for the selected payment method that the user agent MAY display.

`data`

An object that provides optional information that might be needed by the supported payment methods. If supplied, it will be JSON-serialized.

Examples
--------


```js
self.addEventListener("paymentrequest", (e) => {
  console.log(e.modifiers);
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-paymentrequestevent-modifiers |

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

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

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
PaymentRequestEvent: paymentRequestOrigin property
==================================================

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

 The **`paymentRequestOrigin`** read-only property of the
 `PaymentRequestEvent` interface returns the origin where the
 `PaymentRequest` object was initialized.

Value
-----

A string.

Examples
--------


```js
self.addEventListener("paymentrequest", (e) => {
  console.log(e.paymentRequestOrigin);
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-paymentrequestevent-paymentrequestorigin |

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

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

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
PaymentRequestEvent: PaymentRequestEvent() constructor
======================================================

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

The **`PaymentRequestEvent`** constructor creates a new `PaymentRequestEvent` object instance.

Syntax
------


```js
new PaymentRequestEvent(type)
new PaymentRequestEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `paymentrequest`.


`options` Optional

An object that, in addition of the properties defined in `ExtendableEvent()`, can have the following properties:

`methodData`

 An array of `PaymentMethodData` objects (see `methodData` > Value) containing payment method identifiers for the payment methods
 that the website accepts and any associated payment method-specific data.


`modifiers`

An array of objects containing changes to payment details.

`paymentRequestId`

The ID of the `PaymentRequest` object.

`paymentRequestOrigin`

The origin where the `PaymentRequest` object was initialized.

`topOrigin`

The top-level origin where the `PaymentRequest` object was initialized.

`total`

The total amount being requested for payment.


Return value
------------

A new `PaymentRequestEvent` object.

Examples
--------

A developer would not use this constructor manually. A new `PaymentRequestEvent` object is constructed when a handler is invoked as a result of the `paymentrequest` event firing.


```js
self.addEventListener("paymentrequest", (e) => {
  // ...
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-paymentrequestevent-constructor |

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

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

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts