חדש ב-Chrome 87

Pete LePage

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

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

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

Chrome Dev Summit

הלוגו של כנס מפתח המפתחים של Chrome

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

אני פיט לעמוד, וברגע ש-Chrome 88 יפורסם, אני אהיה כאן כדי לספר לך מה חדש ב-Chrome!