本頁面由 Cloud Translation API 翻譯而成。

控制相機的平移、傾斜和縮放功能

您現在可透過網路控制攝影機的平移、傾斜和縮放功能。

François Beaufort

會議室規模的視訊會議解決方案部署攝影機，支援平移、傾斜和縮放功能 (PTZ) 功能。如此一來，軟體就能在會議中將攝影機對準畫面位參與者。自 Chrome 87 版起，平移、傾斜和縮放功能只有使用以下媒體追蹤限制的網站才能使用攝影機：《MediaDevices.getUserMedia()》和《MediaStreamTrack.applyConstraints()》。

使用 API

特徵偵測

硬體的功能偵測功能與您慣用的硬體功能不同。其中含有 "pan"、"tilt" 和 "zoom" 限制名稱： navigator.mediaDevices.getSupportedConstraints() 會指出瀏覽器這個 API 支援控制相機 PTZ，但無法控制相機硬體但 AI 會支援該執行緒。自 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 權限)

在 macOS 版 Chrome 中，相機 PTZ 使用者提示的螢幕截圖。 — 相機 PTZ 使用者提示

傳回的承諾將以顯示 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);
}

如要瞭解相機是否支援 PTZ，請參閱採用 Chromium 的瀏覽器內部 about://media-internals 網頁，並查看「平移-傾斜縮放」功能欄「影片擷取」分頁；「平移傾斜」和「zoom」分別代表相機支援「PanTilt (絕對)」和「縮放 (絕對值)」UVC 控制項。「PanTilt (相對)」和「縮放 (相對)」以 Chromium 為基礎的瀏覽器不支援 UVC 控制項。

ChromeOS 內部頁面螢幕截圖，用於對 PTZ 相機支援功能進行偵錯。 — 用於偵錯 PTZ 相機支援的內部頁面。

控制相機 PTZ

使用預覽畫面操控相機 PTZ 功能和設定 MediaStreamTrack，來自先前取得的 stream 物件。 MediaStreamTrack.getCapabilities() 會傳回包含支援的字典並設定範圍或允許值。相對來說 MediaStreamTrack.getSettings() 會傳回目前的設定。

只有支援平移、傾斜和縮放等功能的，且使用者已授予相機 PTZ 權限。

控管相機 PTZ

使用適當的 PTZ 進階級呼叫 videoTrack.applyConstraints() 限制，可控制相機平移、傾斜和縮放功能，如下例所示。如果成功，傳回的承諾就會解析。否則，：

不會授予具有 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 功能，就很適合使用這項工具。注意事項這裡不允許使用必要限制條件 (最小值、最大值、完全)。

const stream = await navigator.mediaDevices.getUserMedia({
  // Website asks to reset known camera pan.
  video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});