דף זה תורגם על ידי Cloud Translation API.

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

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

François Beaufort

פתרונות לשיחות ועידה בווידאו שמותאמים לחדרים יכולים לפרוס מצלמות באמצעות הזזה, הטיה וזום יכולות (PTZ) שמאפשרות לתוכנה לכוון את המצלמה לפגישה משתתפים. החל מ-Chrome 87, תכונות הזזה, הטיה ושינוי מרחק התצוגה מופעלות המצלמות זמינות לאתרים שמשתמשים באילוצים של מדיה (Media Track) 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-הטיה-זום' עמודה בקטע "צילום וידאו" טאב; 'הזזה, הטיה' או "מרחק מתצוגה". בהתאמה, שהמצלמה תומכת את 'Panהטיה (מוחלטת)' ו-"Zoom (Absolute)" (זום (מוחלט) אמצעי בקרה של UVC העמודה 'Panהטיה (יחסית)' או "מרחק מתצוגה (יחסית)" בקרות UVC לא נתמכות בדפדפנים המבוססים על Chromium.

צילום מסך של הדף הפנימי ב-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 מוגן בעיקר על ידי אותו מודל הרשאות כמו Media Recording ו Streams API לאתר יש הרשאה לשלוט בתגובה לבקשה מהמשתמש PTZ במצלמה רק כשהדף גלוי למשתמש.