カメラのパン、チルト、ズームが、ついにウェブ上で制御できるようになりました。
ルームスケールのビデオ会議ソリューションで、パン、チルト、ズームの機能を備えたカメラを導入
（PTZ）機能を使用して、会議中にソフトウェアがカメラを向けられるようにします。
できます。パン、傾斜、ズームの機能（Chrome 87 以降）
メディア トラックの制約を使用するウェブサイトでカメラを使用可能
MediaDevices.getUserMedia() と MediaStreamTrack.applyConstraints()。
API の使用
機能検出
ハードウェア向けの機能検出は、なじみのあるものとは異なります。
制約名 "pan"、"tilt"、"zoom" の有無
navigator.mediaDevices.getSupportedConstraints() は、ブラウザが
カメラの PTZ を制御する API はサポートしていますが、カメラのハードウェア
サポートしています。Chrome 87 以降、カメラの PTZ の操作は以下でサポートされています。
Android はズームのみをサポートしています。
const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
// Browser supports camera PTZ.
}
カメラの PTZ へのアクセスをリクエストする
ウェブサイトでカメラ PTZ を制御できるのは、ユーザーが明示的に プロンプトを通じてカメラに PTZ 権限が付与されます。
カメラ PTZ へのアクセスをリクエストするには、navigator.mediaDevices.getUserMedia() を呼び出します。
次のように PTZ 制約を追加します。これによりユーザーは
通常のカメラと PTZ 権限を持つカメラ。
返される Promise は、レスポンスの表示に使用される MediaStream オブジェクトで解決されます。
カメラ動画ストリームをユーザーに提供しますカメラが PTZ に対応していない場合は、
通常のカメラ プロンプトが表示されます。
try {
// User is prompted to grant both camera and PTZ access in a single call.
// If camera doesn't support PTZ, it falls back to a regular camera prompt.
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to control camera PTZ as well without altering the
// current pan, tilt, and zoom settings.
video: { pan: true, tilt: true, zoom: true }
});
// Show camera video stream to user.
document.querySelector("video").srcObject = stream;
} catch (error) {
// User denies prompt or matching media is not available.
console.log(error);
}
以前に付与されたカメラ権限（特に PTZ へのアクセス権がない権限） PTZ へのアクセスが自動的に利用可能になっても、自動的に取得されることはありません。正しい （カメラ自体が PTZ に対応している場合も含む）権限をリクエストする必要があります。 もう一度クリックします。しかし、Permissions API を使用すると、 PTZ 権限のステータス。
try {
const panTiltZoomPermissionStatus = await navigator.permissions.query({
name: "camera",
panTiltZoom: true
});
if (panTiltZoomPermissionStatus.state == "granted") {
// User has granted access to the website to control camera PTZ.
}
panTiltZoomPermissionStatus.addEventListener("change", () => {
// User has changed PTZ permission status.
});
} catch (error) {
console.log(error);
}
Chromium ベースのブラウザがカメラの PTZ をサポートしているかどうかを確認するには、
about://media-internals の内部ページをご覧ください。「パン チルト ズーム」も列
[動画キャプチャ]とタブ「パンチルト」「zoom」それぞれカメラが
「PanTilt (Absolute)」および「Zoom (Absolute)」UVC コントロール。「PanTilt (Relative)」
「Zoom（Relative）」UVC コントロールは Chromium ベースのブラウザではサポートされていません。
カメラの PTZ の制御
プレビューを使用してカメラの PTZ 機能と設定を操作する
前に取得した stream オブジェクトの MediaStreamTrack。
MediaStreamTrack.getCapabilities() は、サポートされている辞書を含む辞書を返します。
指定することもできます。それに応じて
MediaStreamTrack.getSettings() は現在の設定を返します。
パン、傾斜、ズームの機能と設定は、 ユーザーがカメラに PTZ 権限を付与している。
<ph type="x-smartling-placeholder">適切な PTZ の詳細設定を使って videoTrack.applyConstraints() を呼び出します。
制限を使用してカメラのパン、チルト、ズームを制御します（以下の例を参照）。
成功した場合は、返された Promise が解決されます。そうでない場合は、次の場合に拒否されます。
次のいずれかです。
- カメラに PTZ 権限が付与されていない。
- カメラ ハードウェアが PTZ 制約をサポートしていない。
- ページはユーザーに表示されません。Page Visibility API を使って ページの公開設定の変更。
// Get video track capabilities and settings.
const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();
// Let the user control the camera pan motion if the camera supports it
// and PTZ access is granted.
if ("pan" in settings) {
const input = document.querySelector("input[type=range]");
input.min = capabilities.pan.min;
input.max = capabilities.pan.max;
input.step = capabilities.pan.step;
input.value = settings.pan;
input.addEventListener("input", async () => {
await videoTrack.applyConstraints({ advanced: [{ pan: input.value }] });
});
}
if ("tilt" in settings) {
// similar for tilt...
}
if ("zoom" in settings) {
// similar for zoom...
}
また、次のように呼び出して、カメラのパン、傾斜、ズームを設定することもできます。
navigator.mediaDevices.getUserMedia()（カメラ PTZ の理想的な制約あり）
使用できます。これは、カメラの PTZ 機能が事前にわかっている場合に便利です。備考
必須制約（min、max、exact）は、ここでは使用できません。
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to reset known camera pan.
video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});
遊び場
Glitch でデモを実行すると、この API を試すことができます。ぜひ ソースコードをご覧ください。
セキュリティ上の考慮事項
仕様作成者はこの API を設計、実装しました。 あらゆる側面に関与しています。この機能を API は主に、メディア キャプチャおよび Streams APIユーザーのプロンプトに応じて、ウェブサイトはユーザーの カメラ PTZ は、ページがユーザーに表示されているときのみ有効です。
ブラウザの互換性
MediaStream API
Permissions API
Page Visibility API
MediaDevices.getUserMedia()
MediaDevices.getSupportedConstraints()
MediaStreamTrack.applyConstraints()
MediaStreamTrack.getCapabilities()
MediaStreamTrack.getSettings()
関連情報
謝辞
この記事は、Joe Medley と Thomas Steiner によってレビューされました。 Intel の Rijubrata Bhaumik と Eero Häkkinen に 仕様と実装です。 ヒーロー画像（Christina @ wocintechchat.com、Unsplash）