Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

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

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

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

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

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

การควบคุม 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 ได้โดยเรียกใช้เดโม

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

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

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

MediaStream API

Browser Support

Source

Permissions API

Browser Support

Source

Page Visibility API

Browser Support

Source

`MediaDevices.getUserMedia()`

Browser Support

Source

`MediaDevices.getSupportedConstraints()`

Browser Support

Source

`MediaStreamTrack.applyConstraints()`

Browser Support

Source

`MediaStreamTrack.getCapabilities()`

Browser Support

Source

`MediaStreamTrack.getSettings()`

Browser Support

Source

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

การรับทราบ

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