חדש ב-Chrome 87

פיט לפייג'
פיט לה פייג'
Twitter GitHub Glitch Mastodon דף הבית

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

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

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

מפגש של מפתחי Chrome

הלוגו של Chrome Dev Summit

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

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

הזזה במצלמה, הטיה, זום

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

החל מגרסה Chrome 87, כשמשתמש מעניק הרשאה, עכשיו אפשר לשלוט בתכונות 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, אז אני יכולה להסתיר את המטבח המבולגן שלי, אבל תצטרכו לצפות בסרטון כדי לראות את זה!

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

בקשות להגדרת טווחים ו-Service Workers

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

בעבר, בקשות לטווחים ועובדי שירותים לא עבדו טוב ביחד, והמפתחים אילצו מפתחים לעקוף את הבעיה. החל מגרסה Chrome 87, העברת בקשות טווח לרשת מתוך Service Worker "פשוט תפעל".

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

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

גרסת מקור לניסיון: API של גישה לגופנים

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

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

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

באמצעות ה-font access 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);
}

כדאי לקרוא את המאמר של טום בנושא שימוש בטיפוגרפיה מתקדמת עם גופנים מקומיים באתר 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!