Trang này được dịch bởi Cloud Translation API.

Kiểm soát tính năng kéo, nghiêng và thu phóng của máy ảnh

Cuối cùng, bạn có thể điều khiển các tính năng xoay, nghiêng và thu phóng trên máy ảnh trên web.

François Beaufort

Các giải pháp hội nghị truyền hình trên quy mô phòng triển khai máy ảnh có khả năng xoay, nghiêng và thu phóng (PTZ) để phần mềm có thể hướng máy ảnh đến người tham gia cuộc họp. Kể từ Chrome 87, các tính năng kéo, nghiêng và thu phóng trên máy ảnh sẽ được cung cấp cho các trang web sử dụng các quy tắc ràng buộc của kênh nội dung nghe nhìn trong MediaDevices.getUserMedia() và MediaStreamTrack.applyConstraints().

Sử dụng API

Phát hiện tính năng

Tính năng phát hiện phần cứng khác với những gì bạn có thể quen dùng. Sự hiện diện của các tên quy tắc ràng buộc "pan", "tilt" và "zoom" trong navigator.mediaDevices.getSupportedConstraints() cho bạn biết rằng trình duyệt hỗ trợ API để kiểm soát PTZ của máy ảnh, nhưng không cho biết liệu phần cứng máy ảnh có hỗ trợ API đó hay không. Kể từ Chrome 87, tính năng điều khiển máy ảnh PTZ được hỗ trợ trên máy tính, trong khi Android vẫn chỉ hỗ trợ tính năng thu phóng.

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

Yêu cầu quyền truy cập vào tính năng PTZ của máy ảnh

Trang web chỉ được phép kiểm soát tính năng PTZ của máy ảnh nếu người dùng đã cấp quyền PTZ cho máy ảnh một cách rõ ràng thông qua lời nhắc.

Để yêu cầu quyền truy cập PTZ của máy ảnh, hãy gọi navigator.mediaDevices.getUserMedia() với các điều kiện ràng buộc PTZ như minh hoạ dưới đây. Thao tác này sẽ nhắc người dùng cấp cả quyền truy cập vào máy ảnh thông thường và máy ảnh có tính năng PTZ.

Ảnh chụp màn hình lời nhắc của người dùng về máy ảnh PTZ trong Chrome dành cho macOS. — Câu lệnh của người dùng đối với máy ảnh PTZ.

Lời hứa được trả về sẽ phân giải bằng đối tượng MediaStream dùng để hiển thị luồng video của máy ảnh cho người dùng. Nếu máy ảnh không hỗ trợ PTZ, người dùng sẽ nhận được lời nhắc thông thường về máy ảnh.

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);
}

Quyền truy cập vào máy ảnh đã được cấp trước đó, cụ thể là quyền không có quyền truy cập PTZ, sẽ không tự động có quyền truy cập PTZ nếu quyền này có sẵn. Điều này đúng ngay cả khi chính máy ảnh hỗ trợ PTZ. Bạn phải yêu cầu lại quyền này. May mắn thay, bạn có thể sử dụng Permissions API (API Quyền) để truy vấn và theo dõi trạng thái của quyền 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);
}

Để biết trình duyệt dựa trên Chromium có hỗ trợ PTZ cho máy ảnh hay không, hãy chuyển đến trang about://media-internals nội bộ và xem cột "Pan-Tilt-Zoom" (Xoay-Góc nghiêng-Thu phóng) trong thẻ "Video Capture" (Quay video); "pan tilt" (xoay-góc nghiêng) và "zoom" (thu phóng) tương ứng có nghĩa là máy ảnh hỗ trợ các nút điều khiển UVC "PanTilt (Absolute)" (Xoay (Tuyệt đối)) và "Zoom (Absolute)" (Thu phóng (Tuyệt đối)). Các chế độ điều khiển UVC "PanTilt (Relative)" (Xoay gimbal (Tương đối)) và "Zoom (Relative)" (Thu phóng (Tương đối)) không được hỗ trợ trong các trình duyệt dựa trên Chromium.

Ảnh chụp màn hình trang nội bộ trong ChromeOS để gỡ lỗi tính năng hỗ trợ máy ảnh PTZ. — Trang nội bộ để gỡ lỗi tính năng hỗ trợ máy ảnh PTZ.

Điều khiển camera PTZ

Thao tác với các chức năng và chế độ cài đặt PTZ của máy ảnh bằng cách sử dụng bản xem trước MediaStreamTrack từ đối tượng stream thu được trước đó. MediaStreamTrack.getCapabilities() trả về một từ điển có các tính năng được hỗ trợ và các dải ô hoặc giá trị được phép. Tương ứng, MediaStreamTrack.getSettings() sẽ trả về các chế độ cài đặt hiện tại.

Các tính năng và chế độ cài đặt xoay, nghiêng và thu phóng chỉ có sẵn nếu máy ảnh hỗ trợ và người dùng đã cấp quyền PTZ cho máy ảnh.

Kiểm soát Camera PTZ.

Gọi videoTrack.applyConstraints() bằng các quy tắc ràng buộc nâng cao của PTZ thích hợp để điều khiển tính năng xoay, nghiêng và thu phóng máy ảnh như trong ví dụ bên dưới. Lời hứa được trả về sẽ được phân giải nếu thành công. Nếu không, hệ thống sẽ từ chối nếu:

máy ảnh có quyền PTZ không được cấp.
phần cứng máy ảnh không hỗ trợ quy tắc ràng buộc PTZ.
người dùng không thấy trang. Sử dụng API Chế độ hiển thị của trang để phát hiện các thay đổi về chế độ hiển thị của trang.

// 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...
}

Bạn cũng có thể định cấu hình tính năng xoay, nghiêng và thu phóng máy ảnh bằng cách gọi navigator.mediaDevices.getUserMedia() với một số giá trị ràng buộc lý tưởng PTZ của máy ảnh. Điều này rất hữu ích khi bạn biết trước các chức năng PTZ của camera. Xin lưu ý rằng bạn không được phép sử dụng các quy tắc ràng buộc bắt buộc (tối thiểu, tối đa, chính xác) tại đây.

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

Sân chơi

Bạn có thể chơi với API này bằng cách chạy bản minh hoạ trên Glitch. Hãy nhớ tham khảo mã nguồn.

Lưu ý về bảo mật

Các tác giả của thông số kỹ thuật đã thiết kế và triển khai API này bằng cách sử dụng cốt lõi bao gồm quyền kiểm soát của người dùng, tính minh bạch và tính công thái học. Khả năng sử dụng API này chủ yếu được kiểm soát bằng cùng một mô hình quyền như API Truyền phát và quay video. Để phản hồi lời nhắc của người dùng, trang web chỉ được phép điều khiển camera PTZ khi người dùng nhìn thấy trang.

Khả năng tương thích với trình duyệt

MediaStream API

Hỗ trợ trình duyệt

Nguồn

API Quyền

Hỗ trợ trình duyệt

Nguồn

API Khả năng hiển thị trang

Hỗ trợ trình duyệt

Nguồn

`MediaDevices.getUserMedia()`

Hỗ trợ trình duyệt

Nguồn

`MediaDevices.getSupportedConstraints()`

Hỗ trợ trình duyệt

Nguồn

`MediaStreamTrack.applyConstraints()`

Hỗ trợ trình duyệt

Nguồn

`MediaStreamTrack.getCapabilities()`

Hỗ trợ trình duyệt

Nguồn

`MediaStreamTrack.getSettings()`

Hỗ trợ trình duyệt

Nguồn

Đường liên kết hữu ích

Lời cảm ơn

Bài viết này đã được Joe Medley và Thomas Steiner xem xét. Cảm ơn Rijubrata Bhaumik và Eero Häkkinen tại Intel đã làm việc về thông số kỹ thuật và cách triển khai. Hình ảnh chính của Christina @ wocintechchat.com trên Unsplash.