يبدأ طرح الإصدار 87 من Chrome على الإصدار الثابت الآن.
وفي ما يلي ما تحتاج إلى معرفته:
- ستنعقد مؤتمر Chrome Dev Summit في 9 و10 كانون الأول (ديسمبر).
- يمكنك الآن التحكّم في التحريك والإمالة والتكبير/التصغير في كاميرات الويب المتوافقة.
- لا تتطلب طلبات النطاق وعاملو الخدمات هذا القدر الكبير من الحلول.
- تبدأ font Access API مرحلة التجربة والتقييم.
- وهناك الكثير غيرها.
اسمي بيت ليب، وأعمل وأتصّل بالتصوير من المنزل. لنطّلِع على التفاصيل ونتعرّف على الميزات الجديدة لمطوّري البرامج في الإصدار Chrome 87.
مؤتمر 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);
});
}
أنا متحمسة شخصيًا بشأن 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.
مرحلة التجربة الأصلية: واجهة برمجة تطبيقات الوصول إلى الخطوط
يعد جلب تطبيقات التصميم مثل 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" (87)
- عمليات إيقاف Chrome 87 نهائيًا وعمليات إزالته
- تحديثات ChromeStatus.com لإصدار Chrome 87
- الميزات الجديدة في JavaScript في Chrome 87
- قائمة تغييرات مستودع مصدر Chromium
اشتراك
إذا كنت تريد الاطّلاع على آخر الأخبار حول فيديوهاتنا، يمكنك الاشتراك في قناة Chrome Developers على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.
اسمي بيت ليب، وبعد طرح الإصدار 88 من Chrome، سأكون هنا لإخبارك بالجديد في Chrome!