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.

Các giải pháp hội nghị truyền hình ở quy mô phòng triển khai camera bằng tính năng xoay, nghiêng và thu phóng (PTZ) giúp phần mềm hướng camera vào cuộc họp người tham gia. Kể từ Chrome 87, các tính năng xoay, nghiêng và thu phóng sẽ được bật Camera được cung cấp cho những trang web sử dụng chế độ hạn chế bản nhạc nội dung đa phương tiệ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à bạn có thể đã quen thuộc. Sự có mặt 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ợ phần cứng máy ảnh hỗ trợ nó. Kể từ Chrome 87, tính năng kiểm soát PTZ của máy ảnh được hỗ trợ trên máy tính để bàn 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 PTZ của camera

Trang web chỉ được phép kiểm soát PTZ của camera nếu người dùng đã thể hiện rõ ràng đã cấp quyền PTZ cho camera thông qua một 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() bằng các điều kiện ràng buộc PTZ như được hiển thị dưới đây. Thao tác này sẽ nhắc người dùng cấp cả hai camera và camera thông thường có quyền PTZ.

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

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

Một quyền truy cập vào camera đã được cấp trước đó, cụ thể là quyền truy cập vào PTZ (không có quyền truy cập vào PTZ) không tự động có được quyền truy cập PTZ nếu quyền truy cập đó có sẵn. Đúng vậy ngay cả khi máy ảnh hỗ trợ PTZ. Bạn phải yêu cầu cấp quyền một lần nữa. May mắn là bạn có thể sử dụng Permissions API để truy vấn và giám sát 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 liệu 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ộ và xem tính năng "Pan-Tilt-Zoom" cột trong phần "Quay video" ; "nghiêng" và "thu phóng" có nghĩa là máy ảnh hỗ trợ "PanTilt (Tuyệt đối)" và "Thu phóng (Tuyệt đối)" Kiểm soát UVC. "PanTilt (Tương đối)" và "Thu phóng (Tương đối)" Các trình duyệt dựa trên Chromium không hỗ trợ các chế độ điều khiển UVC.

Đ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 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 thuộc tính khả năng và phạm vi hoặc giá trị được phép. Tương ứng, MediaStreamTrack.getSettings() trả về các chế độ cài đặt hiện tại.

Bạn chỉ có thể sử dụng các chế độ cài đặt và xoay, nghiêng, thu phóng nếu được hỗ trợ bởi camera và người dùng đã cấp quyền PTZ cho camera.

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

• máy ảnh có quyền PTZ chưa được cấp.
• phần cứng máy ảnh không hỗ trợ quy tắc ràng buộc PTZ.
• trang không hiển thị với 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 máy ảnh bằng cách gọi navigator.mediaDevices.getUserMedia() với một số giới hạn lý tưởng PTZ của máy ảnh giá trị. Điều này rất tiện lợi khi xác định trước các chức năng PTZ của camera. Ghi chú 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) ở đâ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ể sử dụng API này bằng cách chạy bản minh hoạ trên Glitch. Hãy nhớ thanh toán mã nguồn.

Những điều cần cân nhắc về bảo mật

Các 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 bao gồm cả quyền kiểm soát của người dùng, tính minh bạch và công thái học. Khả năng sử dụng tính năng này API chủ yếu được kiểm soát theo cùng một mô hình cấp quyền như API Thu thập nội dung nghe nhìn và API Luồng. Để phản hồi lời nhắc của người dùng, trang web này được phép kiểm soát camera PTZ chỉ khi trang hiển thị với người dùng.

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

API MediaStream

API Quyền

API Hiển thị trang

MediaDevices.getUserMedia()

MediaDevices.getSupportedConstraints()

MediaStreamTrack.applyConstraints()

MediaStreamTrack.getCapabilities()

MediaStreamTrack.getSettings()

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

• Tài liệu giải thích về PTZ
• Bản nháp thông số kỹ thuật
• Kho lưu trữ GitHub
• Mục ChromeStatus
• Lỗi theo dõi Chrome

Xác nhận

Bài viết này do Joe Medley và Thomas Steiner đánh giá. Xin cảm ơn Rijubrata Bhaumik và Eero Häkkinen tại Intel vì những đóng góp của họ đặc tả kỹ thuật và cách triển khai. Hình ảnh chính của Christina @ wocintechchat.com trên Unsplash.