ในที่สุดฟีเจอร์เลื่อน เอียง และซูมในกล้องก็ควบคุมบนเว็บได้แล้ว
โซลูชันการประชุมทางวิดีโอสำหรับขนาดห้องใช้กล้องที่สามารถเลื่อน เอียง และซูม
(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 (สัมพัทธ์)"
และ "ซูม (สัมพัทธ์)" เบราว์เซอร์แบบ Chromium ไม่รองรับการควบคุม UVC
ควบคุมกล้อง PTZ
ควบคุมความสามารถและการตั้งค่ากล้อง PTZ ด้วยการแสดงตัวอย่าง
MediaStreamTrack จากออบเจ็กต์ stream ที่ได้รับก่อนหน้านี้
MediaStreamTrack.getCapabilities() แสดงผลพจนานุกรมที่มี
และช่วงหรือค่าที่อนุญาต กล่าวคือ
MediaStreamTrack.getSettings() จะแสดงการตั้งค่าปัจจุบัน
ความสามารถและการตั้งค่าการเลื่อน เอียง และซูมจะใช้ได้เฉพาะในกรณีที่รองรับโดย กล้องและผู้ใช้ให้สิทธิ์ 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