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

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

โซลูชันการประชุมทางวิดีโอในระดับห้องทำให้สามารถใช้กล้องที่มีความสามารถในการเลื่อน เอียง และซูม (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

คำมั่นสัญญาที่ส่งกลับมาจะจับคู่ด้วยออบเจ็กต์ 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 ก็ตาม ต้องมีการขอสิทธิ์อีกครั้ง โชคดีที่คุณสามารถใช้ 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 "PanTilt-Zoom" ตามลำดับ เบราว์เซอร์ที่ใช้ Chromium ไม่รองรับการควบคุม UVC "PanTilt (สัมพัทธ์)" และ "ซูม (สัมพัทธ์)"

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

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

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

เรียกใช้ videoTrack.applyConstraints() ด้วยข้อจำกัดขั้นสูงเกี่ยวกับ PTZ ที่เหมาะสมเพื่อควบคุมการเลื่อน เอียง และซูมของกล้องดังที่แสดงในตัวอย่างด้านล่าง สัญญาที่ส่งกลับมาจะได้รับการแก้ไขหากสำเร็จ มิฉะนั้น ระบบจะปฏิเสธ ในกรณีต่อไปนี้

• ระบบจะไม่ให้สิทธิ์กล้องที่มีสิทธิ์ 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 Recording and Streams API เป็นหลัก เพื่อตอบสนองต่อข้อความแจ้งของผู้ใช้ เว็บไซต์จะได้รับอนุญาตให้ควบคุมกล้อง PTZ ได้เมื่อผู้ใช้มองเห็นหน้าเว็บเท่านั้น

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

API สตรีมสื่อ

API สิทธิ์

API การเปิดเผยหน้าเว็บ

MediaDevices.getUserMedia()

MediaDevices.getSupportedConstraints()

MediaStreamTrack.applyConstraints()

MediaStreamTrack.getCapabilities()

MediaStreamTrack.getSettings()

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

• วิดีโออธิบาย PTZ
• ฉบับร่างของข้อกำหนด
• ที่เก็บของ GitHub
• รายการ ChromeStatus
• ข้อบกพร่องในการติดตามของ Chrome

ข้อความแสดงการยอมรับ

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