recursal/MDN huggingface dataset:
SourceBuffer.removeAsync()
==========================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`removeAsync()`** は `SourceBuffer` インターフェイスのメソッドで、特定の時間範囲内で見つかった `SourceBuffer` のメディアセグメントから非同期的に削除するプロセスを開始します。 指定された時間範囲のバッファーが削除されたときに履行される `Promise` が返されます。

このメソッドは、`updating` が `false` の場合にのみ呼び出すことができます。そうでない場合は、代わりに `abort()` を呼び出します。

構文
--


```js
removeAsync(start, end)
```

### 引数

`start`

double 型で、時間範囲の始まりを秒単位で表します。

`end`

double 型で、時間範囲の終わりを秒単位で表します。

### 返値

`Promise` で、指定された時間範囲のバッファーが `SourceBuffer` から削除されると、履行ハンドラーが実行されます。

例
-

この例では、非同期関数 `emptySourceBuffer()` を定義します。これは指定された `SourceBuffer` の内容を単純にクリアします。


```js
async function emptySourceBuffer(msBuffer) {
  await msBuffer.removeAsync(0, Infinity).catch((e) => {
    handleException(e);
  });
}
```

仕様書
---

この機能は、どの仕様にも属しません。標準化の予定もありません。

ブラウザーの互換性
---------

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

関連情報
----

* メディアソース拡張 API
* `SourceBuffer.remove()`
* `MediaSource`
* `SourceBufferList`
SourceBuffer.changeType()
=========================

**`changeType()`** は `SourceBuffer` インターフェイスのメソッドで、今後 `appendBuffer()` を呼び出すときに新しいメディアデータが準拠することを期待する MIME タイプを設定します。 これにより、コーデックまたはコンテナー型を途中で変更できます。

これが役立つ 1 つのシナリオは、リソース制約の変化に応じて 1 つのコーデックから別のコーデックに移行することにより、帯域幅の可用性の変化にメディアソースを適応させることです。

構文
--


```js
changeType(type)
```

### 引数

`type`

文字列で、将来のバッファが準拠する MIME タイプを指定します。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

指定された文字列は、有効な MIME タイプではなく、空です。

`InvalidStateError` `DOMException`

`SourceBuffer` は、親メディアソースの `sourceBuffers` リストのメンバーではありません。 または、バッファーの `updating` プロパティは、以前にキューに入れられた `appendBuffer()` または `remove()` がまだ処理中であることを示しています。

`NotSupportedError` `DOMException`

指定された MIME タイプに対応していないか、`MediaSource.sourceBuffers` リストにある `SourceBuffer` オブジェクトの種類には対応していません。

使用上の注意
------

親 `MediaSource` が `"ended"` `readyState` にある場合に、`changeType()` を呼び出すと、 `readyState` プロパティが `"open"` に遷移し、親メディアソースで `sourceopen` という名前の単純なイベントが発生します。

ブラウザーの互換性
---------

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

関連情報
----

* `MediaSource`
* `SourceBufferList`
SourceBuffer.abort()
====================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`SourceBuffer` インターフェイスの **`abort()`** メソッドは、現在のセグメントを打ち切り、セグメントパーサーをリセットします。

構文
--
```

sourceBuffer.abort();
```

### パラメーター

なし。

### 戻り値

`undefined`。

### 例外

| 例外 | 説明 |
| --- | --- |
| `InvalidStateError` | 親メディアソースの `MediaSource.readyState` プロパティが `open` と等しくないか、この `SourceBuffer` が `MediaSource` から取り除かれています。 |

例
-

`abort()` の仕様の説明はやや混乱します。 例えば、パーサーの状態のリセット（reset parser state）のステップ 1 を検討してください。 MSE API は完全に非同期ですが、この手順は同期（ブロッキング）操作を示唆しているように見えますが、これは意味がありません。

つまり、現在の実装は、ソースバッファで発生している現在の追加（またはその他）操作を停止し、すぐに操作を再開したい特定の状況で役立ちます。 例えば、次のコードを検討してください。


```js
sourceBuffer.addEventListener('updateend', function (\_) {
  ...
});

sourceBuffer.appendBuffer(buf);
```


`appendBuffer` の呼び出し後、`updateend` イベントが発生する前（つまり、バッファは追加されているが、操作はまだ完了していない）に、ユーザーが新しいポイントを探して動画を「スクラブ」するとします。 この場合、ソースバッファで `abort()` を手動で呼び出して現在のバッファのデコードを停止し、動画の現在の新しい位置に関連する新しく要求されたセグメントを取得して追加します。

Nick Desaulnier の bufferWhenNeeded デモで同様の動作を確認できます。 48 行目では、イベントリスナーが再生中の動画に追加され、`seek()` という関数が `seeking` イベントが発生したときに実行されます。 行 92〜101 では、seek() 関数が定義されています。 ここで、`MediaSource.readyState` が `open` に設定されている場合、`abort()` が呼び出されることに注意してください。 つまり、新しいソースバッファを受信する準備ができていることを意味します。 この時点で、現在のセグメントを打ち切り、新しいシーク位置のセグメントを取得するだけの価値があります（`checkBuffer()` および `getCurrentSegment()` を参照）。

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-abort |

ブラウザーの互換性
---------

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

関連情報
----

* `MediaSource`
* `SourceBufferList`
SourceBuffer.mode
=================

**`mode`** は `SourceBuffer` インターフェイスのプロパティで、メディアセグメントを `SourceBuffer` に任意の順序で追加できるか、厳密な順序で追加できるかを制御します。

使用可能な 2 つの値は次のとおりです。

* `segments`: メディアセグメントのタイムスタンプが、セグメントの再生順序を決定します。 セグメントは、任意の順序で `SourceBuffer` に追加できます。
* `sequence`: セグメントが `SourceBuffer` に追加される順序により、セグメントの再生順序を決定します。 セグメントのタイムスタンプは、この順序に従ってセグメントに対して自動的に生成されます。

`mode` 値は、`MediaSource.addSourceBuffer()` を使用して `SourceBuffer` が作成されるときに最初に設定されます。 メディアセグメントにタイムスタンプが既に存在する場合、値は `segments` に設定されます。 そうでない場合、値は `sequence` に設定されます。

初期値が `sequence` のときに `mode` プロパティ値を `segments` に設定しようとすると、例外がスローされます。 `sequence` モードでは、既存のセグメントの順序を維持する必要があります。 ただし、値を `segments` から `sequence` に変更することはできます。 これは、再生順序が固定され、これを反映するために新しいタイムスタンプが生成されることを意味します。

このプロパティは、`SourceBuffer` が `appendBuffer()` または `remove()` の呼び出しを処理している間は変更できません。

値
-

文字列です。

### 例外

このプロパティに新しい値を設定すると、次の例外がスローされる場合があります。

`InvalidAccessError` `DOMException`

初期値が `sequence` の場合に、値を `segments` に設定しようとした場合に発生します。

`InvalidStateError` `DOMException`

`SourceBuffer` オブジェクトが更新中（つまり、その `SourceBuffer.updating` プロパティが現在 `true`）、この `SourceBuffer` に追加された最後のメディアセグメントが不完全、またはこの `SourceBuffer` が `MediaSource` から取り除かれていた場合に発生します。

例
-

このスニペットは、`sourceBuffer` のモードが、 現在 `'segments'` に設定されている場合、`'sequence'` に設定します。 したがって、再生順序は、メディアセグメントを追加した順に設定されます。


```js
const curMode = sourceBuffer.mode;
if (curMode === "segments") {
  sourceBuffer.mode = "sequence";
}
```

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-mode |

ブラウザーの互換性
---------

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

関連情報
----

* `MediaSource`
* `SourceBufferList`
SourceBuffer.videoTracks
========================

**`videoTracks`** は `SourceBuffer` インターフェイスの読み取り専用プロパティで、現在 `SourceBuffer` 内に含まれている動画トラックのリストを返します。

値
-

`VideoTrackList` オブジェクトです。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-videotracks |

ブラウザーの互換性
---------

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

関連情報
----

* `MediaSource`
* `SourceBufferList`
SourceBuffer.appendBuffer()
===========================

**`appendBuffer()`** は `SourceBuffer` インターフェイスのメソッドで、`ArrayBuffer`、`TypedArray`、`DataView` のいずれかのオブジェクトからのメディアセグメントデータを `SourceBuffer` に追加します。

構文
--


```js
appendBuffer(source)
```

### 引数

`source`

`ArrayBuffer`、`TypedArray`、`DataView` のいずれかのオブジェクトで、 `SourceBuffer` に追加するメディアセグメントデータが入ったもの。

### 返値

なし (`undefined`)。

### 例外

なし。

例
-

TBD.

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-appendbuffer |

ブラウザーの互換性
---------

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

関連情報
----

* `MediaSource`
* `SourceBufferList`
SourceBuffer.audioTracks
========================

**`audioTracks`** は `SourceBuffer` インターフェイスの読み取り専用プロパティで、この `SourceBuffer` 内に現在含まれている音声トラックのリストを返します。

値
-

`AudioTrackList` オブジェクトです。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-audiotracks |

ブラウザーの互換性
---------

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

関連情報
----

* `MediaSource`
* `SourceBufferList`
SourceBuffer.buffered
=====================

**`buffered`** は `SourceBuffer` インターフェイスの読み取り専用プロパティで、`SourceBuffer` に現在バッファーされている時間範囲を正規化された `TimeRanges` オブジェクトとして返します。

値
-

`TimeRanges` オブジェクトです。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-buffered |

ブラウザーの互換性
---------

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

関連情報
----

* `MediaSource`
* `SourceBufferList`
SourceBuffer.textTracks
=======================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`textTracks`** は `SourceBuffer` インターフェイスの読み取り専用プロパティで、`SourceBuffer` 内に現在含まれているテキストトラックのリストを返します。

値
-

`TextTrackList` (en-US) オブジェクトです。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-texttracks |

ブラウザーの互換性
---------

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

関連情報
----

* `MediaSource`
* `SourceBufferList`
SourceBuffer.appendWindowStart
==============================

**`appendWindowStart`** は `SourceBuffer` インターフェイスのプロパティで、追加ウィンドウ（append window）の始まりのタイムスタンプを制御します。 タイムスタンプの範囲は、`SourceBuffer` に追加されるメディアデータをフィルターするために使用できます。 この範囲内のタイムスタンプを持つコード化されたメディアフレームは追加されますが、範囲外のものは除外されます。

`appendWindowStart` のデフォルト値はプレゼンテーションの開始時間であり、これは再生可能なメディアの開始時間です。

値
-

double 型で、追加ウィンドウの開始時間を秒単位で示します。

### 例外

このプロパティに新しい値を設定すると、次の例外がスローされる場合があります。

`InvalidAccessError` `DOMException`

値を 0 未満、または `SourceBuffer.appendWindowEnd` 以上の値に設定しようとした場合に発生します。

`InvalidStateError` `DOMException`

この `SourceBuffer` オブジェクトが更新中（つまり、その `SourceBuffer.updating` プロパティが現在 `true`）であるか、この `SourceBuffer` が `MediaSource` から取り除かれている場合に発生します。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-appendwindowstart |

ブラウザーの互換性
---------

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

関連情報
----

* `MediaSource`
* `SourceBufferList`
SourceBuffer.remove()
=====================

**`remove()`** は `SourceBuffer` インターフェイスのメソッドで、特定の時間範囲内のメディアセグメントを `SourceBuffer` から削除します。 このメソッドは、`SourceBuffer.updating` が `false` の場合にのみ呼び出すことができます。 `SourceBuffer.updating` が `false` に等しくない場合、`SourceBuffer.abort()` を呼び出します。

構文
--


```js
remove(start, end)
```

### 引数

`start`

double 型で、時間範囲の始まりを秒単位で表します。

`end`

double 型で、時間範囲の終わりを秒単位で表します。

### 返値

なし (`undefined`)。

### 例外

`InvalidAccessError` `DOMException`

`MediaSource.duration` プロパティが `NaN` に等しいか、`start` 引数が負であるか `MediaSource.duration` より大きいか、`end` 引数が `start` 以下または `NaN` に等しい場合に発生します。

`InvalidStateError` `DOMException`

`SourceBuffer.updating` プロパティが `true` に等しいか、この `SourceBuffer` が `MediaSource` から取り除かれている場合に発生します。

例
-

TBD.

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-remove |

ブラウザーの互換性
---------

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

関連情報
----

* `MediaSource`
* `SourceBufferList`
Comment: Comment() コンストラクター
===========================

**`Comment()`** コンストラクターは、引数に指定された文字列を内容とする `Comment` オブジェクトを返します。

構文
--


```js
new Comment()
new Comment(aString)
```

### 引数

* `aString` 省略可
### 返値

新しい `Comment` です。中には `aString` が入るか、引数が与えられなかった場合は空文字列が入ります。

例
-


```js
let comment = new Comment("Test");
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-comment-comment① |

ブラウザーの互換性
---------

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

関連情報
----

* DOM インターフェイスの索引
* `Document.createComment()` はこのコンストラクターの古い代替形式です。
AnimationPlaybackEvent: AnimationPlaybackEvent() コンストラクター
=========================================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`AnimationPlaybackEvent()`** はウェブアニメーション API のコンストラクターで、新しい `AnimationPlaybackEvent` オブジェクトインスタンスを返します。

構文
--


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

### 引数

`type`

 イベントの名前を表す文字列です。
 大文字と小文字を区別し、ブラウザーは `cancel`, `finish`, `remove` のいずれかに設定します。


`options` 省略可

オブジェクトで、*`Event()` で定義されているプロパティに加えて*、以下のプロパティがあります。

`detail` 省略可

イベントに関連付けられたイベント依存の値です。既定値は `null` です。


### 返値

新しい `AnimationPlaybackEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animationplaybackevent-animationplaybackevent |

ブラウザーの互換性
---------

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

関連情報
----

* ウェブアニメーション API
* `AnimationPlayBackEvent`
* `Animation.playState`
* `CustomEvent()`
* `Event()`
AnimationPlaybackEvent: currentTime プロパティ
=========================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`currentTime`** は `AnimationPlaybackEvent` インターフェイスの読み取り専用プロパティで、イベントがキューに入った瞬間の、イベントを生成したアニメーションの現在時刻を表します。イベントが生成された時刻にアニメーションが `idle` であった場合、これは未解決になります。

値
-

ミリ秒単位の現在時刻を表す数値、または `null` です。

時間精度の低下
-------

 タイミング攻撃やフィンガープリンティングから保護するために、 `animation.currentTime` の精度はブラウザー設定によっては丸められている可能性があります。
 Firefox では、 `privacy.reduceTimerPrecision` 環境設定が既定で有効になっており、 Firefox 59 では 20 マイクロ秒が既定値です。


```js
// Firefox 60 における 時間制度の低下 (2ms)
animation.currentTime;
// 23.404
// 24.192
// 25.514
// …

// `privacy.resistFingerprinting` が有効な場合の時間制度の低下
animation.currentTime;
// 49.8
// 50.6
// 51.7
// …
```


Firefox では、 `privacy.resistFingerprinting` を有効にすると、精度を 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きい方にすることができます。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animationplaybackevent-currenttime |

ブラウザーの互換性
---------

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

関連情報
----

* ウェブアニメーション API
* `AnimationPlayBackEvent`
AnimationPlaybackEvent: timelineTime プロパティ
==========================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`timelineTime`** は `AnimationPlaybackEvent` インターフェイスの読み取り専用プロパティで、イベントがキューに入った瞬間のアニメーションの `timeline` (en-US) の時刻値を表します。イベントが生成された時刻にアニメーションがタイムラインに関連付けられていなかったり、関連付けられていたタイムラインが非アクティブだった場合、これは未解決になります。

値
-

現在の時刻をミリ秒単位で表す数値、または `null` です。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animationplaybackevent-timelinetime |

ブラウザーの互換性
---------

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

関連情報
----

* ウェブアニメーション API
* `AnimationPlayBackEvent`
* `AnimationTimeline` (en-US)
HTMLTrackElement: src プロパティ
===========================

**`HTMLTrackElement.src`** プロパティは、テキストトラックのデータの URL を示す `<track>` 要素の `src` 属性の値を反映したものです。

値
-

テキストトラックデータの URL を含む文字列オブジェクト。

例
-


```js
// coming soon
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-track-src |

ブラウザーの互換性
---------

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

関連情報
----

* `HTMLTrackElement.src` プロパティの定義に使われるインターフェイスである `HTMLTrackElement`
* `<track>`
HTMLTrackElement: cuechange イベント
================================

**`cuechange`** イベントは `TextTrack` が現在表示しているキューを変更した際に発生します。このイベントは `TextTrack` と、それが表示されている `HTMLTrackElement` があれば、その両方で発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用したり、イベントハンドラープロパティを設定したりしてください。


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

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

イベント型
-----

一般的な `Event` で、追加のプロパティはありません。

例
-

`track` プロパティで示される基礎となる `TextTrack` は、現在表示されているキューが変更される度に `cuechange` イベントを受信します。これは、そのトラックがメディア要素に関連付けられていない場合でも発生します。

そのトラックがメディア要素に関連付けられている場合、 `<track>` を `<audio>` または `<video>` 要素の子として使用すると、 `cuechange` イベントは `HTMLTrackElement` にも送信されます。


```js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});
```


あるいは、 `oncuechange` イベントハンドラーを使用することもできます。


```js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.oncuechange = (event) => {
  let cues = event.target.track.activeCues;
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-cuechange |
| HTML Standard # handler-oncuechange |

ブラウザーの互換性
---------

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

関連情報
----

* WebVTT
* `TextTrack` での同じイベント: `cuechange`
HID: disconnect イベント
====================

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
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`HID` インターフェイスの **`disconnect`** イベントは、ユーザーエージェントが HID デバイスを切断した時発火します。

構文
--

イベント名を `addEventListener()` のようなメソッドで使うか、イベントハンドラープロパティを設定します。


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

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

イベント型
-----

`HIDConnectionEvent` です。 `Event` を継承しています。

Event

HIDConnectionEventイベントプロパティ
---------

*以下のプロパティに加え、親の `Event` インターフェイスから継承したプロパティが使用可能です。*

`device` 読取専用 

イベントが発火した原因の `HIDDevice` です。

例
-

この例では、デバイスの切断を監視するためにイベントリスナーを登録します。切断時、デバイス名が `HIDDevice.productName` を用いてコンソールに出力されます。


```js
navigator.hid.addEventListener("disconnect", ({ device }) => {
  console.log(`HID disconnected: ${device.productName}`);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hid-ondisconnect |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HID.getDevices()
================

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
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`HID` インターフェイスの **`getDevices()`** メソッドは、ユーザーがこれまでに `requestDevice()` の呼び出しに応じてアクセスを許可した接続中の HID デバイスのリストを取得します。

構文
--


```js
getDevices()
```

### 引数

なし。

### 返値

`HIDDevice` オブジェクトのリストで解決する `Promise` を返します。

例
-

この例では、デバイスのリストを取得し、デバイス名をコンソールに出力します。


```js
document.addEventListener("DOMContentLoaded", async () => {
  let devices = await navigator.hid.getDevices();
  devices.forEach((device) => {
    console.log(`HID: ${device.productName}`);
  });
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hid-getdevices |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HID: connect イベント
=================

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
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`HID` インターフェイスの **`connect`** イベントは、ユーザーエージェントが HID デバイスに接続した時発火します。

構文
--

イベント名を `addEventListener()` のようなメソッドで使うか、イベントハンドラープロパティを設定します。


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

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

イベント型
-----

`HIDConnectionEvent` です。 `Event` を継承しています。

Event

HIDConnectionEventイベントプロパティ
---------

*以下のプロパティに加え、親の `Event` インターフェイスから継承したプロパティが使用可能です。*

`device` 読取専用 

イベントが発火した原因の `HIDDevice` です。

例
-

この例では、デバイスの接続を監視するためにイベントリスナーを登録します。接続時、デバイス名が `HIDDevice.productName` を用いてコンソールに出力されます。


```js
navigator.hid.addEventListener("connect", ({ device }) => {
  console.log(`HID connected: ${device.productName}`);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hid-onconnect |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HID.requestDevice()
===================

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
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`HID` インターフェイスの **`requestDevice()`** メソッドは、HID デバイスへのアクセスを要求します。

ユーザーエージェントは接続されたデバイスのリストを含む許可ダイアログを表示し、ユーザーにそれらのデバイスから 1 個を選んで許可するように要求するでしょう。

構文
--


```js
requestDevice(options)
```

### 引数

`options`

ペアリング可能なデバイスを抽出する用のフィルターオブジェクトの配列を含むオブジェクトです。それぞれのフィルターオブジェクトは以下のプロパティを持つことができます。

`vendorId` 省略可

要求する HID デバイスのベンダー ID を表す整数です。

`productId` 省略可

要求する HID デバイスのプロダクト ID を表す整数です。

`usagePage` 省略可

要求するデバイスの HID 使用法の Usage Page 部分を表す整数です。トップレベルのコレクションの使用法は、デバイスの種類を特定するために使用されます。

標準の HID 使用法の値は、HID Usage Tables に載っています。

`usage` 省略可

要求するデバイスの HID 使用法の Usage ID 部分を表す整数です。


**メモ:** デバイスフィルターは、ユーザーに提示するデバイスリストを絞り込むために使われます。フィルターが無い場合、接続された全てのデバイスが表示されます。1 個以上のフィルターが含まれている場合、デバイスはいずれかのフィルターに当てはまればリストに入ります。フィルターに当てはまるには、そのフィルターに含まれるルール全てに当てはまる必要があります。

### 返値

指定されたフィルターに当てはまり接続された `HIDDevice` オブジェクトの配列で解決する `Promise` を返します。

### 例外

`SecurityError` `DOMException`

ページが HID 機能へのアクセスを許可しないとき投げられます。

セキュリティ
------

ユーザーによる一時的な有効化が必要です。この機能が動作するためには、ユーザーがページまたは UI 要素を操作しなければなりません。

例
-

### 4 種類全てのフィルタールールによってデバイスを特定する

この例では、HID デバイスはベンダー ID `0xABCD`、プロダクト ID `0x1234`、Usage Page `0x0C`、Usage ID `0x01` を持つことを要求されます。これらのルール全てを満たすデバイスのみが表示されます。


```js
let requestButton = document.getElementById("request-hid-device");
requestButton.addEventListener("click", async () => {
  let device;
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          vendorId: 0xabcd,
          productId: 0x1234,
          usagePage: 0x0c,
          usage: 0x01,
        },
      ],
    });
    device = devices[0];
  } catch (error) {
    console.log("エラーが発生しました。");
  }

  if (!device) {
    console.log("デバイスが選択されませんでした。");
  } else {
    console.log(`HID: ${device.productName}`);
  }
});
```

### 2 種類のフィルターを用いる例

次の例は 2 種類のフィルターを用いています。これらのフィルターのいずれかに当てはまるデバイスが表示されます。


```js
// Nintendo Switch Joy-Con の USB ベンダー / プロダクト ID を持つデバイスを抽出します。
const filters = [
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2006, // Joy-Con Left
  },
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2007, // Joy-Con Right
  },
];

// ユーザーに Joy-Con デバイスを選択するよう指示します。
const [device] = await navigator.hid.requestDevice({ filters });
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hid-requestdevice |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CanvasCaptureMediaStreamTrack.requestFrame()
============================================

`CanvasCaptureMediaStreamTrack` (en-US) のメソッド **`requestFrame()`** はフレームをキャンバスから取り込んでストリームに送信することを依頼します。描画やフレームの取り込みのタイミングを慎重に制御する必要のあるアプリケーションは、フレームを取り込む時を直接指定するのに `requestFrame()` を使用することができます。

フレームの自動取り込みを避け、フレームが `requestFrame()` が呼ばれた時だけ取り込まれるようにするには、ストリームを生成する時に `captureStream()` メソッドに 0 の値を指定します。

構文
--
```

stream.requestFrame();
```

### 戻り値

`undefined`

使用上の注意
------

今のところ、キャンバスのオリジンが明確でなくても例外を投げないことが、仕様でフラグ付けされた問題点です。将来は変わるでしょうが、事前に計画をし `SecurityError` のような例外(投げられる特定のエラーが仕様書では言及されていませんが、これが有力な候補です) を監視することが賢明です。

例
-


```js
// 取り込むキャンバス要素を探す
var canvasElt = document.getElementsByTagName("canvas")[0];

// ストリームを取得する
var stream = canvasElt.captureStream(25); // 25 FPS

// キャンバスの現在の状態をフレームとしてストリームに送信する
stream.getVideoTracks()[0].requestFrame();
```

仕様
--

| Specification |
| --- |
| Media Capture from DOM Elements # dom-canvascapturemediastreamtrack-requestframe |

ブラウザー実装状況
---------

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

関連情報
----

* `CanvasCaptureMediaStream` (en-US) 、属するインターフェース。
* `<canvas>`