หน้านี้ได้รับการแปลโดย Cloud Translation API

ควบคุมการเลื่อน เอียง และซูมกล้อง

ในที่สุดคุณก็ควบคุมฟีเจอร์การเลื่อน เอียง และซูมในกล้องบนเว็บได้แล้ว

François Beaufort

โซลูชันการประชุมทางวิดีโอแบบห้องใช้กล้องที่มาพร้อมความสามารถในการหมุน บิด และซูม (PTZ) เพื่อให้ซอฟต์แวร์สามารถเล็งกล้องไปยังผู้เข้าร่วมการประชุมได้ ตั้งแต่ Chrome 87 เป็นต้นไป ฟีเจอร์แพน บิด และซูมในกล้องจะพร้อมใช้งานสำหรับเว็บไซต์ที่ใช้ข้อจำกัดของแทร็กสื่อใน 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 แก่กล้องอย่างชัดเจนผ่านข้อความแจ้ง

หากต้องการขอสิทธิ์เข้าถึง PTZ ของกล้อง ให้โทรหา navigator.mediaDevices.getUserMedia() พร้อมข้อจำกัด PTZ ตามที่แสดงด้านล่าง ซึ่งจะแจ้งให้ผู้ใช้ให้สิทธิ์ทั้งกล้องธรรมดาและกล้องที่มี PTZ

ภาพหน้าจอของข้อความแจ้งผู้ใช้เกี่ยวกับ PTZ ของกล้องใน Chrome สำหรับ macOS — พรอมต์ของผู้ใช้สำหรับ PTZ ของกล้อง

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 โดยอัตโนมัติหาก 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" ในแท็บ "Video Capture" "pan tilt" และ "zoom" หมายความว่ากล้องรองรับการควบคุม UVC "PanTilt (Absolute)" และ "Zoom (Absolute)" ตามลำดับ เบราว์เซอร์ที่พัฒนาบน Chromium ไม่รองรับการควบคุม UVC "PanTilt (Relative)" และ "Zoom (Relative)"

ภาพหน้าจอของหน้าภายในใน ChromeOS สำหรับการแก้ไขข้อบกพร่องการรองรับกล้อง PTZ — หน้าภายในสำหรับการแก้ไขข้อบกพร่องการรองรับกล้อง PTZ

ควบคุม PTZ ของกล้อง

ควบคุมความสามารถและการตั้งค่า PTZ ของกล้องโดยใช้ตัวอย่างภาพ MediaStreamTrack จากออบเจ็กต์ stream ที่ได้ก่อนหน้านี้ MediaStreamTrack.getCapabilities() จะแสดงผลพจนานุกรมที่มีความสามารถที่รองรับและช่วงหรือค่าที่อนุญาต และ MediaStreamTrack.getSettings() จะแสดงการตั้งค่าปัจจุบัน

ความสามารถในการตั้งค่าและเลื่อน เอียง และซูมจะใช้ได้ก็ต่อเมื่อกล้องรองรับและผู้ใช้ได้ให้สิทธิ์ PTZ แก่กล้อง

การควบคุมกล้อง PTZ

เรียกใช้ videoTrack.applyConstraints() พร้อมข้อจำกัดขั้นสูงของ PTZ ที่เหมาะสมเพื่อควบคุมการเลื่อน เอียง และซูมกล้องตามที่แสดงในตัวอย่างด้านล่าง 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" } }
});

สนามเด็กเล่น

คุณเล่นกับ API ได้โดยเรียกใช้เดโมใน Glitch อย่าลืมตรวจสอบซอร์สโค้ด

ข้อควรพิจารณาด้านความปลอดภัย

ผู้เขียนข้อกําหนดได้ออกแบบและติดตั้งใช้งาน API นี้โดยใช้หลักๆ ดังนี้ การควบคุมของผู้ใช้ ความโปร่งใส และลักษณะที่ใช้งานง่าย ความสามารถในการใช้ API นี้ส่วนใหญ่จะกำหนดโดยรูปแบบสิทธิ์เดียวกับ Media Capture and Streams API เว็บไซต์จะได้รับอนุญาตให้ควบคุม PTZ ของกล้องเมื่อผู้ใช้มองเห็นหน้าเว็บเท่านั้น เพื่อตอบสนองต่อข้อความแจ้งของผู้ใช้

ความเข้ากันได้กับเบราว์เซอร์

MediaStream API

การรองรับเบราว์เซอร์

แหล่งที่มา

Permissions API

การรองรับเบราว์เซอร์

แหล่งที่มา

Page Visibility API

การรองรับเบราว์เซอร์

แหล่งที่มา

`MediaDevices.getUserMedia()`

การรองรับเบราว์เซอร์

แหล่งที่มา

`MediaDevices.getSupportedConstraints()`

การรองรับเบราว์เซอร์

แหล่งที่มา

`MediaStreamTrack.applyConstraints()`

การรองรับเบราว์เซอร์

แหล่งที่มา

`MediaStreamTrack.getCapabilities()`

การรองรับเบราว์เซอร์

แหล่งที่มา

`MediaStreamTrack.getSettings()`

การรองรับเบราว์เซอร์

แหล่งที่มา

ลิงก์ที่มีประโยชน์

ขอขอบคุณ

บทความนี้ผ่านการตรวจสอบโดย Joe Medley และ Thomas Steiner ขอขอบคุณ Rijubrata Bhaumik และ Eero Häkkinen จาก Intel ที่ให้ความร่วมมือเกี่ยวกับข้อกำหนดและการใช้งาน รูปภาพหลักโดย Christina @ wocintechchat.com ใน Unsplash