الجديد في Chrome 87

يبدأ طرح الإصدار 87 من Chrome على الإصدار الثابت الآن.

وفي ما يلي ما تحتاج إلى معرفته:

اسمي بيت ليب، وأعمل وأتصّل بالتصوير من المنزل. لنطّلِع على التفاصيل ونتعرّف على الميزات الجديدة لمطوّري البرامج في الإصدار Chrome 87.

مؤتمر Chrome Dev Summit

شعار مؤتمر Chrome Dev Summit

ستُعقد قمة مطوّري برامج Chrome في 9 و10 كانون الأول (ديسمبر) بالفصل الثامن. ولكن هذه المرة، سنأتي إليك. نحن نقدم آخر التحديثات والكثير من المحتوى الجديد والعديد من أجهزة Chrome.

سنشارك عددًا كبيرًا من المحادثات الرائعة وورش العمل وساعات العمل وغيرها، وسنشارك في المحادثة على 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

بعد ذلك، مثل جميع واجهات برمجة التطبيقات الفعّالة الأخرى، يجب على المستخدم منح الإذن للكاميرا، بالإضافة إلى منح الإذن بالوصول إلى وظائف 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 أم لا.

نطاق طلبات النطاق وعمال الخدمات

إنّ طلبات نطاق HTTP التي كانت متوفّرة في المتصفحات الرئيسية لعدّة سنوات تتيح للخوادم إرسال البيانات المطلوبة إلى العميل على شكل أجزاء. ويفيد ذلك بشكل خاص في ملفات الوسائط الكبيرة، حيث يتم تحسين تجربة المستخدم من خلال التشغيل السلس، والمسح المحسَّن، ووظائف الإيقاف المؤقت والاستئناف بشكل أفضل.

سابقًا، لم يكن عامل طلبات النطاق وخدماته يعمل بشكل جيد معًا، مجبر المطورين على إيجاد حلول بديلة. بدءًا من Chrome 87، فإن تمرير طلبات النطاق عبر الشبكة من داخل مشغّل الخدمات "يعمل فقط".

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

للحصول على توضيح للمشاكل المتعلّقة بطلبات النطاقات وما تم تغييره في إصدار 87 من Chrome، راجِع مقالة طارق معالجة طلبات النطاق في عامل خدمات على web.dev.

مرحلة التجربة الأصلية: واجهة برمجة تطبيقات الوصول إلى الخطوط

لقطة شاشة لمحرر صور Photopea

يعد جلب تطبيقات التصميم مثل Figma و Gravit Designer وPhotospea إلى الويب أمرًا رائعًا، ونشهد المزيد في المستقبل. بينما يمكن للويب تقديم عدد كبير من الخطوط، لا يتوفر كل شيء على الويب.

بالنسبة للعديد من المصممين، هناك بعض الخطوط المثبتة على أجهزة الكمبيوتر الخاصة بهم تُعد بالغة الأهمية لعملهم. على سبيل المثال، خطوط شعار الشركة أو الخطوط المتخصصة لنظام 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 التي تتضمّن جميع التفاصيل، والرابط المؤدي إلى مرحلة Origin Trial حتى تتمكّن من تجربتها بنفسك.

والمزيد

  • ساحات المشاركات القابلة للتحويل - يمكن الآن تمرير الكائنات 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.
  • وهناك عدد من التغييرات المتعلّقة بالعزل المشترك المصدر.

محتوى إضافي للقراءة

يتضمن هذا القسم فقط بعض النقاط المهمة. راجِع الروابط أدناه للاطّلاع على التغييرات الإضافية في الإصدار 87 من Chrome.

اشتراك

إذا كنت تريد الاطّلاع على آخر الأخبار حول فيديوهاتنا، يمكنك الاشتراك في قناة Chrome Developers على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.

اسمي بيت ليب، وبعد طرح الإصدار 88 من Chrome، سأكون هنا لإخبارك بالجديد في Chrome!