หน้านี้ได้รับการแปลโดย 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 ที่ใช้กล้องถ่ายรูป

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

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

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

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

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

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

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

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

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

API MediaStream

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

แหล่งที่มา

API สิทธิ์

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

แหล่งที่มา

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