الجديد في Chrome 87

Pete LePage

بدأنا بطرح الإصدار 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، يُرجى الاتصال بـ 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);
  });
}

شخصيًا، أنا متحمّس جدًا بشأن ميزة "التكبير/التصغير باللمس"، حتى أتمكّن من إخفاء المطبخ الفوضوي، ولكن عليك مشاهدة الفيديو لمعرفة ذلك.

ينشر فادي مشاركة رائعة بعنوان التحكم في العرض الشامل للكاميرا والإمالة والتكبير/التصغير على موقع web.dev باستخدام نماذج لرموز برمجية، والاطّلاع على تفاصيل كاملة حول أفضل طريقة لطلب الإذن، كما يقدّم عرضًا توضيحيًا لتجربته ومعرفة ما إذا كانت كاميرا الويب متوافقة مع تقنية PTZ.

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

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

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

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

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

الإصدار التجريبي الأصلي: Font access API

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

من الرائع أن نوفّر تطبيقات تصميم مثل Figma وGravit Designer وPhotopea على الويب، ونعمل على توفير المزيد من التطبيقات. على الرغم من أنّ الويب يمكنه تقديم مجموعة كبيرة من الخطوط، إلا أنّ بعض الخطوط لا تتوفّر على الويب.

بالنسبة إلى العديد من المصمّمين، هناك بعض الخطوط المثبَّتة على أجهزة الكمبيوتر والتي تُعدّ مُهمّة لعملهم. على سبيل المثال، خطوط شعار الشركة أو الخطوط المتخصصة لتطبيق CAD وتطبيقات التصميم الأخرى.

باستخدام واجهة برمجة التطبيقات Font Access API التي تبدأ فترة تجريبية في الإصدار 87 من Chrome، يمكن لأي موقع إلكتروني الآن سرد الخطوط المثبَّتة، ما يتيح للمستخدمين الوصول إلى جميع الخطوط على أنظمتهم.


// 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.
  • وهناك عدد من التغييرات المرتبطة بعزل مصادر البيانات المختلفة.

مراجع إضافية

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

اشتراك

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

اسمي "بيت ليبيت"، وسأكون هنا لإطلاعك على ميزات الإصدار 88 من Chrome فور طرحه.