カメラのパン、傾斜、ズームの機能をウェブでも制御できるようになりました。
会議室規模のビデオ会議ソリューションでは、パン、ティルト、ズーム（PTZ）機能を備えたカメラをデプロイして、ソフトウェアで会議の参加者にカメラを向けることができます。Chrome 87 以降では、カメラのパン、傾斜、ズームの機能は、MediaDevices.getUserMedia() と MediaStreamTrack.applyConstraints() でメディア トラックの制約を使用しているウェブサイトで利用できます。
API の使用
機能検出
ハードウェアの機能検出は、おそらく慣れているものとは異なります。navigator.mediaDevices.getSupportedConstraints() に "pan"、"tilt"、"zoom" の制約名が存在する場合は、ブラウザがカメラ 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 アクセスをリクエストするには、以下のように PTZ の制約を指定して navigator.mediaDevices.getUserMedia() を呼び出します。これにより、ユーザーは通常のカメラとカメラの両方に 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 ページに移動し、[Video Capture] タブの [Pan-Tilt-Zoom] 列を確認します。「pan tilt」と「zoom」は、カメラがそれぞれ「パンチルト（絶対）」と「ズーム（絶対）」に対応していることを意味します。UVC コントロール「PanTilt (Relative)」と「Zoom (Relative)」の UVC コントロールは Chromium ベースのブラウザではサポートされていません。
カメラの PTZ の制御
上記で取得した stream オブジェクトのプレビュー MediaStreamTrack を使用して、カメラの PTZ 機能と設定を操作します。MediaStreamTrack.getCapabilities() は、サポートされている機能と範囲または許容値を含む辞書を返します。これに対応して、MediaStreamTrack.getSettings() は現在の設定を返します。
パン、チルト、ズームの機能と設定は、カメラがサポートしており、ユーザーがカメラに PTZ 権限を付与している場合にのみ使用できます。
以下の例に示すように、適切な 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...
}
カメラの PTZ 理想的な制約値を指定して navigator.mediaDevices.getUserMedia() を呼び出すことで、カメラのパン、チルト、ズームを設定することもできます。これは、カメラの PTZ 機能が事前にわかっている場合に便利です。なお、ここでは必須制約（最小、最大、完全一致）は使用できません。
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to reset known camera pan.
video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});
遊び場
Glitch でデモを実行すると、API を試すことができます。必ずソースコードを確認してください。
セキュリティ上の考慮事項
仕様作成者は、ユーザー コントロール、透明性、エルゴノミクスなどのコアを使用して、この API を設計、実装しました。この API を使用できるかどうかは、主に Media Capture および 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）