カメラのパン、ティルト、ズームを制御する

カメラのパン、チルト、ズームが、ついにウェブ上で制御できるようになりました。

François Beaufort
François Beaufort
GitHub

ルームスケールのビデオ会議ソリューションで、パン、チルト、ズームの機能を備えたカメラを導入 （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 権限を持つカメラ。

<ph type="x-smartling-placeholder">
</ph> macOS 用 Chrome でのカメラの 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 ベースのブラウザではサポートされていません。

<ph type="x-smartling-placeholder">
</ph> PTZ カメラのサポートをデバッグするための ChromeOS の社内ページのスクリーンショット。
PTZ カメラのサポートをデバッグするための内部ページ。

カメラの PTZ の制御

プレビューを使用してカメラの PTZ 機能と設定を操作する 前に取得した stream オブジェクトの MediaStreamTrack。 MediaStreamTrack.getCapabilities() は、サポートされている辞書を含む辞書を返します。 指定することもできます。それに応じて MediaStreamTrack.getSettings() は現在の設定を返します。

パン、傾斜、ズームの機能と設定は、 ユーザーがカメラに PTZ 権限を付与している。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">をご覧ください。
カメラ 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...
}

また、次のように呼び出して、カメラのパン、傾斜、ズームを設定することもできます。 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

対応ブラウザ

  • Chrome: 55。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 15. <ph type="x-smartling-placeholder">
  • Safari: 11. <ph type="x-smartling-placeholder">

ソース

Permissions API

対応ブラウザ

  • Chrome: 43。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 46。 <ph type="x-smartling-placeholder">
  • Safari: 16。 <ph type="x-smartling-placeholder">

ソース

Page Visibility API

対応ブラウザ

  • Chrome: 33。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 18. <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

ソース

MediaDevices.getUserMedia()

対応ブラウザ

  • Chrome: 53。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 36。 <ph type="x-smartling-placeholder">
  • Safari: 11. <ph type="x-smartling-placeholder">

ソース

MediaDevices.getSupportedConstraints()

対応ブラウザ

  • Chrome: 53。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 44。 <ph type="x-smartling-placeholder">
  • Safari: 11. <ph type="x-smartling-placeholder">

ソース

MediaStreamTrack.applyConstraints()

対応ブラウザ

  • Chrome: 59。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 43。 <ph type="x-smartling-placeholder">
  • Safari: 11. <ph type="x-smartling-placeholder">

ソース

MediaStreamTrack.getCapabilities()

対応ブラウザ

  • Chrome: 59。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: 11. <ph type="x-smartling-placeholder">

ソース

MediaStreamTrack.getSettings()

対応ブラウザ

  • Chrome: 59。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 50。 <ph type="x-smartling-placeholder">
  • Safari: 11. <ph type="x-smartling-placeholder">

ソース

関連情報

謝辞

この記事は、Joe Medley と Thomas Steiner によってレビューされました。 Intel の Rijubrata Bhaumik と Eero Häkkinen に 仕様と実装です。 ヒーロー画像（Christina @ wocintechchat.com、Unsplash）