جدید در کروم 87

Pete LePage

کروم 87 در حال عرضه به حالت پایدار است.

در اینجا چیزی است که شما باید بدانید:

• Chrome Dev Summit در 9 و 10 دسامبر بازمی‌گردد.
• اکنون می‌توانید بر روی وب‌کم‌هایی که از آن پشتیبانی می‌کنند ، پان، شیب و بزرگ‌نمایی را کنترل کنید.
• درخواست‌های محدوده و کارگران خدماتی به راه‌حل‌های زیادی نیاز ندارند.
• API دسترسی فونت آزمایش اولیه خود را شروع می کند.
• و بسیاری موارد دیگر وجود دارد.

من Pete LePage هستم، کار می‌کنم و از خانه عکس‌برداری می‌کنم، بیایید شیرجه بزنیم و ببینیم چه چیز جدیدی برای توسعه‌دهندگان در Chrome 87 وجود دارد!

Chrome Dev Summit

Chrome Dev Summit در 9 و 10 دسامبر با فصل هشتم خود بازمی‌گردد. اما این بار به سراغ شما می رویم. ما همه آخرین به‌روزرسانی‌ها، تعداد زیادی محتوای جدید و تعداد زیادی کرومی را ارائه می‌کنیم.

تعداد زیادی گفتگو، کارگاه، ساعات اداری و غیره عالی وجود دارد، و ما در چت 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.
}

سپس، مانند همه 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 پشتیبانی می کند یا خیر.

درخواست های محدوده و کارگران خدمات

درخواست‌های محدوده HTTP ، که چندین سال است در مرورگرهای اصلی موجود بوده‌اند، به سرورها اجازه می‌دهند تا داده‌های درخواستی را به صورت تکه‌ای به مشتری ارسال کنند. این به ویژه برای فایل‌های رسانه‌ای بزرگ مفید است، جایی که تجربه کاربر از طریق پخش روان‌تر، تمیز کردن پیشرفته‌تر، و عملکردهای مکث و ازسرگیری بهتر بهبود می‌یابد.

از نظر تاریخی، کارگران درخواست‌های محدوده و خدمات به خوبی با هم کار نمی‌کردند، و توسعه‌دهندگان را مجبور به ایجاد راه‌حل‌های کاری کرد. از Chrome 87، ارسال درخواست‌های محدوده به شبکه از داخل یک سرویس‌دهنده «فقط کار می‌کند».

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: API دسترسی به قلم

آوردن برنامه های طراحی مانند Figma، Gravit Designer و Photopea به وب عالی است، و ما شاهد پیشرفت های بیشتری هستیم. در حالی که وب توانایی ارائه فونت های فراوانی را دارد، همه چیز در وب در دسترس نیست.

برای بسیاری از طراحان، فونت هایی بر روی رایانه آنها نصب شده است که برای کار آنها بسیار مهم است. به عنوان مثال، فونت های لوگوی شرکتی یا فونت های تخصصی برای CAD و سایر برنامه های طراحی.

با استفاده از 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 جدید وجود دارد.
• و تعدادی از تغییرات مربوط به جداسازی منبع متقاطع وجود دارد.

در ادامه مطلب

این تنها برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در Chrome 87 پیوندهای زیر را بررسی کنید.

• موارد جدید در Chrome DevTools (87)
• لغو و حذف Chrome 87
• به‌روزرسانی‌های ChromeStatus.com برای Chrome 87
• موارد جدید در جاوا اسکریپت در کروم 87
• فهرست تغییر مخزن منبع Chromium

مشترک شوید

می‌خواهید با ویدیوهای ما به‌روز بمانید، سپس در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

من Pete LePage هستم، و به محض اینکه Chrome 88 منتشر شد، اینجا خواهم بود تا به شما بگویم -- چه چیزهای جدیدی در Chrome وجود دارد!