שליטה בהזזה, בהטיה ובמרחק התצוגה של המצלמה

סוף סוף אפשר לשלוט בתכונות ההזזה, ההטיה ושינוי מרחק התצוגה במצלמות באינטרנט.

François Beaufort

פתרונות לשיחות ועידה בווידאו שמותאמים לחדרים יכולים לפרוס מצלמות עם יכולות הזזה, הטיה וזום (PTZ) כדי שהתוכנה תוכל לכוון את המצלמה למשתתפים בפגישה. החל מגרסה 87 של Chrome, התכונות של הזזה, הטיה ושינוי מרחק התצוגה במצלמות זמינות לאתרים שמשתמשים באילוצים של טראקים של מדיה ב-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 של המצלמה, צריך לבצע קריאה ל-navigator.mediaDevices.getUserMedia() עם אילוצים של PTZ כפי שמתואר בהמשך. המשתמש יתבקש להעניק הרשאות גם למצלמה הרגילה וגם למצלמה עם 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' בכרטיסייה 'Video Capture'. 'Pan tilt' ו-'zoom', בהתאמה, מציינים שהמצלמה תומכת באמצעי הבקרה של UVC 'PanTilt (Absolute)' ו-'Zoom (Absolute)'. פקדי UVC 'Panהטיה (יחסית)' ו'זום (יחסי)' לא נתמכים בדפדפנים המבוססים על Chromium.

דף פנימי לניפוי באגים בתמיכה במצלמות 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, אפשר להריץ את הדמו ב-Glitch. אל תשכחו לבדוק את קוד המקור.

טיפ: אם אין מצלמה שתומכת ב-PTZ, תוכלו להפעיל את Chrome עם המתג --use-fake-device-for-media-stream כדי לדמות מצלמה שתומכת ב-PTZ. שיהיה לך כיף!

שיקולי אבטחה

מחברי המפרט תכננו והטמיעו את ה-API הזה באמצעות הליבה, כולל שליטה על ידי משתמשים, שקיפות וארגונומיה. היכולת להשתמש ב-API הזה מוגבלת בעיקר על ידי אותו מודל הרשאות כמו Media Recording ו-Stream API. בתגובה להנחיה מהמשתמש, האתר יכול לשלוט ב-PTZ במצלמה רק כשהדף גלוי למשתמש.

תאימות דפדפן

MediaStream API

תמיכה בדפדפן

• 55
• 12
• 15
• 11

מקור

Permissions API

תמיכה בדפדפן

• 43
• 79
• 46
• 16

מקור

ממשק API של חשיפת דף

תמיכה בדפדפן

• 33
• 12
• 18
• 7

מקור

MediaDevices.getUserMedia()

תמיכה בדפדפנים

• 53
• 12
• 36
• 11

מקור

MediaDevices.getSupportedConstraints()

תמיכה בדפדפנים

• 53
• 12
• 44
• 11

מקור

MediaStreamTrack.applyConstraints()

תמיכה בדפדפנים

• 59
• 12
• 43
• 11

מקור

MediaStreamTrack.getCapabilities()

תמיכה בדפדפן

• 59
• 12
• 132
• 11

מקור

MediaStreamTrack.getSettings()

תמיכה בדפדפנים

• 59
• 12
• 50
• 11

מקור

קישורים שימושיים

• הסבר על PTZ
• טיוטת מפרט
• מאגר GitHub
• רשומת ChromeStatus
• באג במעקב ב-Chrome

תודות

הבדיקה של המאמר בוצעה על ידי Joe Medley ו-Thomas Steiner. תודה ל-Rijubrata Bhaumik ול-Eero Häkkinen ב-Intel על העבודה שלהם על המפרט וההטמעה. התמונה הראשית (Hero) היא של Christina‏ @ wocintechchat.com ב-Unsplash.