Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web/API/Screen_Capture_API を更新 #23643

Merged
merged 1 commit into from
Sep 22, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 19 additions & 27 deletions files/ja/web/api/screen_capture_api/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: 画面キャプチャ API
slug: Web/API/Screen_Capture_API
l10n:
sourceCommit: 6e78306f9674a5e6329e07eca5f2791ce3138f0c
---

{{DefaultAPISidebar("Screen Capture API")}}
Expand All @@ -11,7 +13,7 @@ slug: Web/API/Screen_Capture_API

画面キャプチャ API は比較的簡単に使用することができます。唯一のメソッドは {{domxref("MediaDevices.getDisplayMedia()")}} で、その仕事はユーザーにキャプチャする画面または画面の一部を選択するよう促し、 {{domxref("MediaStream")}} 形式でキャプチャすることです。

画面から動画をキャプチャするには、 `getDisplayMedia()``Media` `navigator.mediaDevices` のインスタンス上で呼び出してください
画面から動画をキャプチャするには、 `getDisplayMedia()``navigator.mediaDevices` 上で呼び出してください

```js
captureStream =
Expand All @@ -22,11 +24,12 @@ captureStream =

画面キャプチャ API を使用する方法については、[画面キャプチャ API の使用](/ja/docs/Web/API/Screen_Capture_API/Using_Screen_Capture)の記事を参照してください。

## 既存インターフェイスへの追加
## インターフェイス

画面キャプチャ API は独自のインターフェイスを持たず、既存の {{domxref("MediaDevices")}} インターフェイスに 1 つのメソッドを追加しています。
- {{domxref("CaptureController")}}
- : {{domxref("MediaDevices.getDisplayMedia()")}} による開始とは別に、キャプチャセッションをさらに操作するために使用できるメソッドを提供します。`CaptureController` オブジェクトは、{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} 呼び出しに options オブジェクトの `controller` プロパティの値として渡すことで、キャプチャセッションに関連付けられます。

### MediaDevices インターフェイス
### MediaDevices インターフェイスへの追加

- {{domxref("MediaDevices.getDisplayMedia()")}}
- : `getDisplayMedia()` メソッドが `MediaDevices` インターフェイスに追加されています。 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} と同様、このメソッドは、ユーザーが選択した表示領域を、指定されたオプションに一致する形式で含む {{domxref("MediaStream")}} で解決するプロミスを作成します。
Expand All @@ -37,57 +40,46 @@ captureStream =

### MediaTrackConstraints

- {{domxref("MediaTrackConstraints.cursor")}}
- : [`ConstrainDOMString`](/ja/docs/Web/API/MediaTrackConstraints#constraindomstring) で、カーソルをキャプチャした表示面のストリームに含めるかどうか、また、常に表示するか、マウスが動いている間だけ表示するかを指定します。
- {{domxref("MediaTrackConstraints.displaySurface")}}
- : [`ConstrainDOMString`](/ja/docs/Web/API/MediaTrackConstraints#constraindomstring) で、キャプチャする表示面の種類を指定します。値は `application``browser``monitor``window` のいずれかです。
- {{domxref("MediaTrackConstraints.logicalSurface")}}
- : ストリームの映像が、論理的な表示面(つまり、画面上に完全に表示されていない、あるいは完全に画面外にある可能性のあるもの)を表しているかどうかを示します。値が `true` の場合、論理的な表示面をキャプチャすることを示します。
- {{domxref("MediaTrackConstraints.suppressLocalAudioPlayback")}}
- : タブがキャプチャされた際に、タブ内で再生中の音声をユーザーのローカルスピーカーから引き続き再生するか、または停止するかを制御します。値が `true` の場合、停止することを示します。

### MediaTrackSettings

- {{domxref("MediaTrackSettings.cursor")}}
- : 文字列で、現在キャプチャしている表示面にマウスカーソルが含まれているかどうか、含まれている場合はマウスが動いている間だけ見えるのか、常に見えているのかを示します。値は `always``motion``never` のいずれかです。
- {{domxref("MediaTrackSettings.displaySurface")}}
- : 文字列で、現在キャプチャしている表示面の種類を示します。値は `application``browser``monitor``window` のいずれかです。
- : 文字列で、現在キャプチャしている表示面の種類を示します。値は `browser``monitor``window` のいずれかです。
- {{domxref("MediaTrackSettings.logicalSurface")}}
- : 論理値で、キャプチャした映像が、画面上の単一の表示領域に直接対応していない場合に `true` となります。
- {{domxref("MediaTrackSettings.suppressLocalAudioPlayback")}}
- : 論理値で、キャプチャされた音声がユーザーのローカルスピーカーから再生されていない場合は `true` となります。

### MediaTrackSupportedConstraints

- {{domxref("MediaTrackSupportedConstraints.cursor")}}
- : 論理値で、 `true` であればユーザーエージェントと機器が {{domxref("MediaTrackConstraints.cursor")}} 制約に対応していることを示します。
- {{domxref("MediaTrackSupportedConstraints.displaySurface")}}
- : 論理値で、 `true` であれば現在の環境が {{domxref("MediaTrackConstraints.displaySurface")}} 制約に対応していることを示します。
- {{domxref("MediaTrackSupportedConstraints.logicalSurface")}}
- : 論理値で、 `true` であれば現在の環境が {{domxref("MediaTrackConstraints.logicalSurface")}} 制約に対応していることを示します。
- {{domxref("MediaTrackSupportedConstraints.suppressLocalAudioPlayback")}}
- : 論理値で、現在の環境が {{domxref("MediaTrackConstraints.suppressLocalAudioPlayback")}} 制約に対応している場合は `true` となります。

## 辞書
## 権限ポリシーの検証

以下の辞書が画面キャプチャ API で定義されています。

- `CursorCaptureConstraint`
- : 列挙文字列型で、設定と制約の `cursor` プロパティの値を提供するために使用されます。指定できる値は `always``motion``never` です。
- `DisplayCaptureSurfaceType`
- : 列挙文字列型で、キャプチャするディスプレイ表面の種類を識別するために使用されます。この型は、制約と設定オブジェクトの `displaySurface` プロパティに使用され、`application`, `browser`, `monitor`, `window` という値を持つことが可能です。

## 機能ポリシーの検証

{{Glossary("User agent", "ユーザーエージェント")}}のうち(HTTP の {{HTTPHeader("Feature-Policy")}} ヘッダーまたは {{HTMLElement("iframe")}} 属性を使用する)機能ポリシーをに対応するものは、ポリシー制御ディレクティブ `display-capture` によってが画面キャプチャ API 使用の希望を指定することができます。
(HTTP の {{HTTPHeader("Permissions-Policy")}} ヘッダーまたは {{HTMLElement("iframe")}} の `allow` 属性のいずれかを使用した)[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)に対応するユーザーエージェントは、画面キャプチャ API を使用する意思を、`display-capture` ディレクティブを使用して指定することができます。

```html
<iframe allow="display-capture" src="/some-other-document.html"></iframe>
<iframe allow="display-capture" src="/some-other-document.html"></iframe>
```

既定の許可リストは `self` で、文書内の任意のコンテンツに画面キャプチャを使用させることができます。

機能ポリシーをどのように使うかについてのより深い解説については、[機能ポリシーの使用](/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy)を参照してください。
既定の許可リストは `self` で、同一オリジン内のあらゆるコンテンツに画面キャプチャを使用させることができます。

## 仕様書

| 仕様書 |
| ------------------------------------------------------------------ |
| [Screen Capture](https://w3c.github.io/mediacapture-screen-share/) |
{{Specifications}}

## ブラウザーの互換性

Expand Down