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

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

כשנעזרים בפתרונות לשיחות ועידה בווידאו ברמת החדר, הם פורסים מצלמות עם יכולות של הזזה, הטיה וזום (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 של המצלמה רק אם המשתמש העניק למצלמה הרשאת 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 הפנימי about://media-internals ובודקים את העמודה 'צילום הטיה של זום' בכרטיסייה 'צילום וידאו'. 'הזזה בהטיה' ו'זום' מציינים בהתאמה שהמצלמה תומכת בפקדי UVC (הזזה (מוחלט) ו'זום (מוחלט)'. פקדי ה-UVC 'Panמגוון (יחסית)' ו-'Zoom (יחסית)' אינם נתמכים בדפדפנים המבוססים על Chromium.

שליטה ב-PTZ במצלמה

לשנות את היכולות וההגדרות של PTZ במצלמה באמצעות התצוגה המקדימה MediaStreamTrack מהאובייקט stream שהושג קודם. הפונקציה MediaStreamTrack.getCapabilities() מחזירה מילון עם הקיבולת הנתמכות והטווחים או הערכים המותרים. בהתאמה, MediaStreamTrack.getSettings() מחזירה את ההגדרות הנוכחיות.

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

const stream = await navigator.mediaDevices.getUserMedia({
  // Website asks to reset known camera pan.
  video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});

מגרש משחקים

כדי לשחק עם ה-API, אפשר להפעיל את ההדגמה ב-Glitch. אל תשכחו לבדוק את קוד המקור.

שיקולי אבטחה

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

תאימות דפדפן

ממשק API של MediaStream

ממשק API להרשאות

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

MediaDevices.getUserMedia()

MediaDevices.getSupportedConstraints()

MediaStreamTrack.applyConstraints()

MediaStreamTrack.getCapabilities()

MediaStreamTrack.getSettings()

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

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

אישורים

המאמר הזה נכתב על ידי Joe Medley ו-תומאס סטיינר. תודה ל-Rijubrata Bhaumik ול-Eero Häkkinen ב-Intel על תרומתם למפרט ולהטמעה. תמונה ראשית (Hero) מאת Christina @ wocintechchat.com ב-UnFlood.