الجديد في Chrome 87

Pete LePage

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

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

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

مؤتمر 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.

Origin Trial: 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، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.

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