此页面由 Cloud Translation API 翻译。

控制相机平移、倾斜度和缩放

摄像头的平移、倾斜和缩放功能终于可以在网页上控制了。

François Beaufort

会议室级视频会议解决方案部署了具有平移、倾斜和缩放功能的摄像头 (PTZ) 功能，以便软件将摄像头对准会议参与者。从 Chrome 87 开始，Chrome 中的平移、倾斜和缩放功能使用媒体跟踪限制条件的网站可以使用相机 MediaDevices.getUserMedia()和MediaStreamTrack.applyConstraints()。

使用此 API

功能检测

针对硬件的功能检测与您所习惯的检测不同。以下位置中存在 "pan"、"tilt" 和 "zoom" 限制条件名称： navigator.mediaDevices.getSupportedConstraints()表示浏览器支持 API 控制摄像头 PTZ，但不支持摄像头硬件支持它。自 Chrome 87 起，支持在以下设备上控制摄像头 PTZ ，而 Android 仍仅支持缩放。

const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

请求相机 PTZ 访问权限

只有在用户明确通过提示向摄像头授予了 PTZ 权限。

如需请求摄像头 PTZ 访问权限，请使用以下代码调用 navigator.mediaDevices.getUserMedia()：如下所示。这将提示用户授予普通摄像头和具有云台拍摄权限的摄像头。

macOS 版 Chrome 中的摄像头云台用户提示屏幕截图。 — 摄像头云平台用户提示。

返回的 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 访问权限。这是事实（即使相机本身支持云台摄像头）。必须请求该权限。幸运的是，您可以使用 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页面，请查看“Pan-Tilt-Zoom”列点击“视频捕获”标签页；“平移倾斜”和“缩放”分别表示相机支持 “PanTilt（绝对）”和“缩放（绝对）”UVC 控件。“平移倾斜（相对）” 和“缩放（相对）”基于 Chromium 的浏览器不支持 UVC 控件。

ChromeOS 中用于调试 PTZ 摄像头支持的内部页面的屏幕截图。 — 用于调试 PTZ 摄像头支持的内部页面。

控制摄像头云台摄像头

使用预览版操控摄像头 PTZ 的功能和设置 MediaStreamTrack（从之前获取的 stream 对象中获取）。 MediaStreamTrack.getCapabilities() 会返回一个字典，其中包含受支持的功能以及范围或允许的值。相应地 MediaStreamTrack.getSettings() 会返回当前设置。

平移、倾斜和缩放功能与设置只有在且用户已授予摄像头的 PTZ 权限。

</ph> <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 功能，这会非常方便。注意事项此处不允许使用强制性限制条件（最小值、最大值、完全匹配）。

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