חדש ב-Chrome 87

Pete LePage

אנחנו מתחילים להשיק את Chrome 87 בגרסה היציבה.

דברים שעליך לדעת:

קוראים לי Pete LePage ואני עובד ומצלם מהבית. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 87.

Chrome Dev Summit

הלוגו של Chrome Dev Summit

כנס Chrome Dev Summit חוזר ב-9 וב-10 בדצמבר עם הפרק השמיני שלו. אבל הפעם אנחנו באים אליכם. אנחנו מביאים את כל העדכונים האחרונים, הרבה תוכן חדש והרבה כרומיים.

יש המון הרצאות מעולות, סדנאות, שעות פעילות וכו', ואנחנו נהיה בצ'אט של YouTube כדי לענות על השאלות שלכם. מידע נוסף על האופן שבו אפשר לא רק לצפות אלא גם להשתתף

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

ברוב חדרי הישיבות ב-Google יש מצלמות עם יכולות של תנועה לאורך, הטיה וזום, כך שאפשר להפנות את המצלמה לאנשים בחדר. אבל לא רק מצלמות כנסים מתקדמות תומכות ב-PTZ – הטיה, זום והזזה – גם הרבה מצלמות אינטרנט תומכות בכך.

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

זיהוי התכונות שונה במקצת מהאופן שבו אתם רגילים לזהות תכונות. צריך להתקשר למספר navigator.mediaDevices.getSupportedConstraints() כדי לבדוק אם הדפדפן תומך ב-PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

בקשה להרשאה ל-PTZ

לאחר מכן, כמו בכל ממשקי ה-API החזקים האחרים, המשתמש יצטרך להעניק הרשאה למצלמה, אבל גם לפונקציונליות של PTZ.

כדי לבקש הרשאה לפונקציונליות PTZ, צריך להפעיל את הפונקציה navigator.mediaDevices.getUserMedia() עם האילוצים של PTZ. המשתמש יתבקש להעניק הרשאות גם למצלמה רגילה וגם למצלמה עם PTZ.


try {
  const opts = {video: {pan: true, tilt: true, zoom: true}};
  const stream = await navigator.mediaDevices.getUserMedia(opts);
  document.querySelector("#video").srcObject = stream;
} catch (error) {
  // User denies prompt, or
  // matching media is not available.
}

לבסוף, קריאה ל-MediaStreamTrack.getSettings() תציין את התמיכה של המצלמה.

const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();

if ('pan' in settings) {
  enablePan(capabilities, settings);
}
// Similar for tilt and zoom...

אחרי שהמשתמש יאשר את ההרשאה, תוכלו להפעיל את הפונקציה videoTrack.applyConstraints() כדי לשנות את התנודות, ההטיה והמרחק.

function enablePan(capabilities, settings) {
  const input = document.getElementById('rangePan');
  input.min = capabilities.pan.min;
  input.max = capabilities.pan.max;
  input.step = capabilities.pan.step;
  input.value = settings.pan;

  input.addEventListener('input', async () => {
    const opts = { advanced: [{ pan: input.value }] };
    await videoTrack.applyConstraints(opts);
  });
}

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

Francois פרסם פוסט מעולה בנושא שליטה בתנועת המצלמה, בהטיה ובמרחק הצילום ב-web.dev, עם דוגמאות קוד, פרטים מלאים על הדרך הטובה ביותר לבקש הרשאה והדגמה. תוכלו לנסות את הקוד ולבדוק אם מצלמת האינטרנט שלכם תומכת ב-PTZ.

בקשות טווח ושירותי עבודה

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

בעבר, בקשות טווח ושירותי עובדים לא עבדו יחד בצורה טובה, מה שאילץ את המפתחים לפתח פתרונות חלופיים. החל מ-Chrome 87, העברת בקשות טווח לרשת מתוך עובד שירות פשוט תפעל.

self.addEventListener('fetch', (event) => {
  // The Range: header will pass through
  // in browsers that behave correctly.
  event.respondWith(fetch(event.request));
});

הסבר על הבעיות בבקשות טווח ועל השינויים ב-Chrome 87 זמין במאמר של Jeff‏ טיפול בבקשות טווח ב-service worker באתר web.dev.

Origin Trial: ‏ Font access API

צילום מסך של עורך התמונות Photopea

אנחנו שמחים להביא לאינטרנט אפליקציות עיצוב כמו Figma,‏ Gravit Designer ו-Photopea, ועוד הרבה אפליקציות נוספות בדרך. באינטרנט יש מגוון רחב של גופנים, אבל לא כל הגופנים זמינים באינטרנט.

למעצבים רבים יש גופנים שהותקנו במחשב שלהם והם קריטיים לעבודה שלהם. לדוגמה, גופנים של סמלי לוגו ארגוניים או גופנים מיוחדים ל-CAD ולאפליקציות עיצוב אחרות.

בעזרת ממשק ה-API לגישה לגופנים, שמתחיל תקופת ניסיון למקור ב-Chrome 87, אפשר עכשיו לאתר את הגופנים המותקנים ולתת למשתמשים גישה לכל הגופנים במערכת שלהם.


// Query for all available fonts and log metadata.
const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    console.log(`${metadata.family} (${metadata.fullName})`);
  }
} catch (err) {
  console.error(err);
}

// Roboto (Roboto Black)
// Roboto (Roboto Black Italic)
// Roboto (Roboto Bold)

בנוסף, אתרים יכולים להתחבר ברמות נמוכות יותר כדי לקבל גישה לבייטים של הגופן, וכך לבצע הטמעה משלהם של פריסה ב-OpenType או לבצע טרנספורמציות או מסננים של וקטור על צורות הגליפים.

const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    const sfnt = await metadata.blob();
    makeMagic(metadata.family, sfnt);
  }
} catch (err) {
  console.error(err);
}

במאמר של Tom בנושא שימוש בטיפוגרפיה מתקדמת עם גופנים מקומיים ב-web.dev מפורטים כל הפרטים, ויש גם קישור לגרסת המקור לניסיון.

ועוד

  • העברת סטרימינג – עכשיו אפשר להעביר אובייקטים מסוג ReadableStream,‏ WritableStream ו-TransformStream כארגומנטים ל-postMessage().
  • הטמענו את התכונות המפורטות ביותר של flow-relative במפרט של המאפיינים והערכים הלוגיים ב-CSS, כולל קיצורי דרך והיסטים, כדי שיהיה קל יותר לכתוב את המאפיינים והערכים הלוגיים האלה. לדוגמה, מאפיין margin-block יחיד יכול להחליף כללים נפרדים של margin-block-start ו-margin-block-end.
  • נוספו מתארים חדשים של @font-face ל-ascent-override, ל-descent-override ול-line-gap-override כדי לשנות את מדדי הגופן.
  • יש כמה מאפיינים חדשים של text-decoration ו-underline.
  • בנוסף, יש מספר שינויים שקשורים לבידוד בין מקורות.

קריאה נוספת

כאן מפורטות רק חלק מהנקודות העיקריות. בקישורים שבהמשך מפורטים שינויים נוספים ב-Chrome 87.

להרשמה

רוצים להתעדכן בסרטונים שלנו? הירשמו לערוץ YouTube של מפתחי Chrome ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 88 תפורסם, אספר לכם מה חדש ב-Chrome.