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

Các tính năng kéo, nghiêng và thu phóng trên máy ảnh cuối cùng có thể điều khiển được trên web.

François Beaufort

Giải pháp hội nghị truyền hình ở quy mô phòng triển khai máy ảnh với các chức năng kéo, nghiêng và thu phóng (PTZ) để phần mềm có thể hướng máy ảnh vào những 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ó sẵn cho những trang web sử dụng các điều kiện ràng buộc đối với theo dõi 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 tính năng cho phần cứng khác với tính năng mà có thể bạn đã quen thuộc. Sự hiện diện của 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 có hỗ trợ API để kiểm soát PTZ của máy ảnh, nhưng không hỗ trợ liệu phần cứng của máy ảnh có hỗ trợ hay không. Kể từ Chrome 87, tính năng điều khiển PTZ của máy ảnh đượ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 PTZ vào máy ảnh

Một trang web chỉ được phép kiểm soát 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 vào PTZ của máy ảnh, hãy gọi navigator.mediaDevices.getUserMedia() kèm theo các điều kiện ràng buộc PTZ như minh hoạ bên dưới. Thao tác này sẽ nhắc người dùng cấp quyền truy cập PTZ cho cả máy ảnh thông thường và máy ảnh thông thường.

Lời nhắc dành cho người dùng PTZ của máy ảnh.

Lời hứa được trả về sẽ được phân giải bằng một đối tượng MediaStream dùng để hiện luồng video của camera cho người dùng. Nếu máy ảnh không hỗ trợ PTZ, thì người dùng sẽ nhận được lời nhắc thông thường của 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ấp trước đó, cụ thể là không có quyền truy cập PTZ, sẽ không tự động có quyền truy cập PTZ nếu có. Điều này đúng ngay cả khi máy ảnh hỗ trợ PTZ. Bạn phải yêu cầu cấp quyền lại. May mắn là 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 truy cập trang about://media-internals nội bộ rồi xem cột "Pan-Tilt-Zoom" trong thẻ "Video Capture" (Quay video); "xoay nghiêng" và "thu phóng" lần lượt có nghĩa là máy ảnh hỗ trợ chế độ "PanTilt (Tuyệt đối)" và "Thu phóng (Tuyệt đối)" điều khiển UVC. Các chế độ kiểm soát UVC "PanTilt (Tương đối)" và "Zoom (Tương đối)" không được hỗ trợ trong các trình duyệt dựa trên Chromium.

Trang nội bộ để gỡ lỗi hỗ trợ camera 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 lấy được trước đó. MediaStreamTrack.getCapabilities() trả về một từ điển có các tính năng được hỗ trợ và phạm vi hoặc giá trị được phép. Tương ứng, MediaStreamTrack.getSettings() sẽ trả về chế độ cài đặt hiện tại.

Các chế độ cài đặt cũng như các tính năng kéo, 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.

Điều khiển PTZ camera.

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

• thì máy ảnh có quyền PTZ sẽ không được cấp.
• phần cứng máy ảnh không hỗ trợ ràng buộc PTZ.
• trang không hiển thị cho người dùng. Sử dụng API Chế độ hiển thị trang để phát hiện các thay đổi về chế độ hiển thị 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 của 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 cho PTZ của máy ảnh. Điều này rất hữu ích khi đã biết trước các chức năng PTZ của máy ảnh. Xin lưu ý rằng các giới hạn bắt buộc (tối thiểu, tối đa, chính xác) không được cho phép 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ớ xem mã nguồn.

Lưu ý: Nếu không có máy ảnh hỗ trợ PTZ, thì bạn có thể chạy Chrome bằng công tắc --use-fake-device-for-media-stream để mô phỏng một máy ảnh trên máy của mình. Chúc bạn có những phút giây vui vẻ!

Các yếu tố cần cân nhắc về bảo mật

Tác giả thông số kỹ thuật đã thiết kế và triển khai API này bằng cách sử dụng 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 chịu sự kiểm soát của cùng một mô hình cấp quyền như API Luồng nội dung và Thu thập nội dung nghe nhìn. Để phản hồi lời nhắc của người dùng, trang web chỉ được phép kiểm soát PTZ của máy ảnh khi trang đó hiển thị cho người dùng.

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

API MediaStream

Hỗ trợ trình duyệt

• 55
• 12
• 15
• 11

Nguồn

API Quyền

Hỗ trợ trình duyệt

• 43
• 79
• 46
• 16

Nguồn

API Mức độ hiển thị trang

Hỗ trợ trình duyệt

• 33
• 12
• 18
• 7

Nguồn

MediaDevices.getUserMedia()

Hỗ trợ trình duyệt

• 53
• 12
• 36
• 11

Nguồn

MediaDevices.getSupportedConstraints()

Hỗ trợ trình duyệt

• 53
• 12
• 44
• 11

Nguồn

MediaStreamTrack.applyConstraints()

Hỗ trợ trình duyệt

• 59
• 12
• 43
• 11

Nguồn

MediaStreamTrack.getCapabilities()

Hỗ trợ trình duyệt

• 59
• 12
• x
• 11

Nguồn

MediaStreamTrack.getSettings()

Hỗ trợ trình duyệt

• 59
• 12
• 50
• 11

Nguồn

Các đường liên kết hữu ích

• Video giải thích về PTZ
• Bản nháp quy cách
• Kho lưu trữ GitHub
• Mục ChromeStatus
• Lỗi theo dõi trên Chrome

Xác nhận

Bài viết này đã được Joe Medley và Thomas Steiner đánh giá. Cảm ơn Rijubrata Bhaumik và Eero Häkkinen tại Intel đã hỗ trợ họ nghiên cứu về quy cách và triển khai. Hình ảnh chính của Christina @ wocintechchat.com trên Unsplash.