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

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

François Beaufort

פתרונות לשיחות ועידה בווידאו בחדרים כוללים מצלמות עם יכולות של הטיה, סיבוב ושינוי מרחק התצוגה (PTZ), כדי שהתוכנה תוכל להפנות את המצלמה אל משתתפי הפגישה. החל מגרסה 87 של Chrome, התכונות של הזזה, הטיה ושינוי מרחק התצוגה במצלמות זמינות לאתרים שמשתמשים באילוצים של טראקים של מדיה ב-MediaDevices.getUserMedia() וב-MediaStreamTrack.applyConstraints().

שימוש ב-API

זיהוי תכונות

זיהוי התכונות של החומרה שונה ממה שאתם כנראה רגילים אליו. נוכחות שמות האילוצים "pan",‏ "tilt" ו-"zoom" ב-navigator.mediaDevices.getSupportedConstraints() מציינת שהדפדפן תומך ב-API לצורך בקרה על מצלמת PTZ, אבל לא אם חומרת המצלמה תומכת בו. החל מגרסה 87 של Chrome, אפשר לשלוט במצלמה עם תנועה וזום (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.

ההבטחה שתוחזר תיפתר עם אובייקט 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 'הזזה (יחסי)' ו'זום (יחסי)' בדפדפנים שמבוססים על 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 של המצלמה. חשוב לזכור שאסור להשתמש כאן במגבלות חובה (min, ‏ max, ‏ exact).

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 כדי לדמות מצלמה כזו במחשב. שיהיה לך כיף!

שיקולי אבטחה

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

תאימות דפדפן

MediaStream API

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

• 55
• 12
• 15
• 11

מקור

Permissions API

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

• 43
• 79
• 46
• 16

מקור

Page Visibility 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.