Chrome 87'deki yenilikler

Pete LePage

Chrome 87, kararlı sürümde kullanıma sunulmaya başlıyor.

Şunları bilmeniz gerekir:

• Chrome Dev Summit 9 ve 10 Aralık'ta geri dönüyor.
• Artık destekleyen web kameralarında kaydırma, eğme ve yakınlaştırma işlemlerini kontrol edebilirsiniz.
• Aralık istekleri ve hizmet çalışanları, bu kadar fazla geçici çözüm gerektirmez.
• Font Access API, kaynak deneme sürümünü başlatır.
• Daha birçok özellik de mevcut.

Ben Pete LePage. Evden çalışıyorum ve video çekiyorum. Chrome 87'de geliştiriciler için neler yeni olduğuna göz atalım.

Chrome Geliştirici Zirvesi

Chrome Dev Summit, 9. bölümüyle 9-10 Aralık'ta geri dönüyor. Ancak bu sefer biz size geliyoruz. En son güncellemeleri, birçok yeni içeriği ve çok sayıda Chrome kullanıcısını bir araya getiriyoruz.

Çok sayıda ilginç konuşma, atölye, ofis saati vb. etkinliği olacak. YouTube sohbetinde sorularınızı yanıtlamaya hazır olacağız. Daha fazla bilgi edinin ve hem izlemenin hem de katılmanın keyfini nasıl çıkarabileceğinizi öğrenin.

Kamerayı kaydırma, yatırma, yakınlaştırma

Google'daki toplantı odalarının çoğunda, kameranın odadaki kişilere yönlendirilebilmesi için kaydırma, eğme ve yakınlaştırma özelliklerine sahip kameralar bulunur. Ancak PTZ'yi (yatay kaydırma, dikey kaydırma, yakınlaştırma) yalnızca lüks konferans kameraları değil, birçok web kamerası da destekler.

Chrome 87'den itibaren, kullanıcı izin verdikten sonra kameradaki PTZ özelliklerini kontrol edebilirsiniz.

Özellik algılama, alıştığınızdan biraz farklıdır. Tarayıcının PTZ'yi destekleyip desteklemediğini öğrenmek için navigator.mediaDevices.getSupportedConstraints() numaralı telefonu aramanız gerekir.

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

Ardından, diğer tüm güçlü API'lerde olduğu gibi kullanıcının kameraya ve PTZ işlevine izin vermesi gerekir.

PTZ işlevi için izin istemek üzere PTZ kısıtlamalarıyla navigator.mediaDevices.getUserMedia() işlevini çağırın. Bu işlem, kullanıcıdan hem normal kameraya hem de PTZ kameraya izin vermesini ister.

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.
}

Son olarak, MediaStreamTrack.getSettings() çağrısı kameranın neleri desteklediğini size bildirir.

const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();

if ('pan' in settings) {
  enablePan(capabilities, settings);
}
// Similar for tilt and zoom...

Kullanıcı izin verdikten sonra kaydırma, eğme ve yakınlaştırmayı ayarlamak için videoTrack.applyConstraints() işlevini çağırabilirsiniz.

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);
  });
}

Ben özellikle PTZ özelliğini çok seviyorum. Bu sayede dağınık mutfağımı gizleyebilirim. Ancak bunu görmek için videoyu incelemeniz gerekiyor.

Francois'un web.dev'de yayınladığı Kamera yatay kaydırma, dikey kaydırma ve yakınlaştırma işlemlerini kontrol etme başlıklı makalesinde kod örnekleri, izin istemenin en iyi yolu ile ilgili tüm ayrıntılar ve bir demo yer alıyor. Bu demoyu deneyerek web kameranızın PTZ'yi destekleyip desteklemediğini öğrenebilirsiniz.

Aralık istekleri ve hizmet çalışanları

Birkaç yıldır büyük tarayıcılarda kullanılabilen HTTP aralık istekleri, sunucuların istenen verileri istemciye parçalar halinde göndermesine olanak tanır. Bu özellik özellikle büyük medya dosyalarında kullanışlıdır. Daha akıcı oynatma, geliştirilmiş kaydırma ve daha iyi duraklatma ve devam ettirme işlevleri sayesinde kullanıcı deneyimi iyileşir.

Daha önce aralık istekleri ve hizmet çalışanları birlikte iyi çalışmadığından geliştiriciler geçici çözümler üretmek zorunda kalıyordu. Chrome 87'den itibaren, aralık isteklerinin bir hizmet çalışanının içinden ağa iletilmesi "otomatik olarak çalışır".

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

Aralık istekleriyle ilgili sorunların ve Chrome 87'de nelerin değiştiğinin açıklaması için Jeff'in web.dev'deki Bir hizmet çalışanında aralık isteklerini işleme başlıklı makalesine bakın.

Origin Trial: Font access API

Figma, Gravit Designer ve Photopea gibi tasarım uygulamalarını web'e getirmek harika bir gelişme. Bu tür uygulamaların sayısı da giderek artıyor. Web'de çok sayıda yazı tipi sunulsa da her yazı tipi web'de kullanılamaz.

Birçok tasarımcı, bilgisayarına işlerinde önemli olan bazı yazı tiplerini yükler. Örneğin, kurumsal logo yazı tipleri veya CAD ve diğer tasarım uygulamaları için özel yazı tipleri.

Chrome 87'de bir kaynak deneme sürümünü başlatan yazı tipi erişim API'si sayesinde siteler artık yüklü yazı tiplerini sayarak kullanıcılara sistemlerindeki tüm yazı tiplerine erişim verebilir.

// 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)

Siteler, yazı tipi baytlarına erişmek için daha düşük seviyelerde bağlantı kurabilir. Böylece kendi OpenType düzenlerini uygulayabilir veya karakter şekillerinde vektör filtreleri ya da dönüştürme işlemleri yapabilirler.

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);
}

Tüm ayrıntıları ve Origin deneme sürümünün bağlantısını içeren Tom'un web.dev'deki Yerel yazı tipleriyle gelişmiş yazı tiplerini kullanma makalesine göz atın. Böylece, Origin deneme sürümünü kendiniz deneyebilirsiniz.

Başka pek çok bilgi

• Aktarılabilir Akışlar: ReadableStream, WritableStream ve TransformStream nesneleri artık postMessage()'e bağımsız değişken olarak iletilebilir.
• Bu mantıksal özelliklerin ve değerlerin yazılmasını biraz daha kolaylaştırmak için kısayollar ve ofsetler de dahil olmak üzere CSS mantıksal özellikleri ve değerleri spesifikasyonunun en ayrıntılı flow-relative özelliklerini uyguladık. Örneğin, tek bir margin-block mülkü ayrı margin-block-start ve margin-block-end kurallarının yerini alabilir.
• Yazı tipinin metriklerini geçersiz kılmak için ascent-override, descent-override ve line-gap-override öğelerine yeni @font-face tanımlayıcıları eklendi.
• Birkaç yeni text-decoration ve underline mülkü vardır.
• Ayrıca kaynak ayırma ile ilgili çeşitli değişiklikler de var.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 87'deki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

• Chrome Geliştirici Araçları'nda (87) yenilikler
• Chrome 87'de desteği sonlandırılan ve kaldırılan özellikler
• Chrome 87 için ChromeStatus.com güncellemeleri
• Chrome 87'deki JavaScript'de yenilikler
• Chromium kaynak deposu değişiklik listesi

Abone ol

Videolarımızdan haberdar olmak için Chrome Developers YouTube kanalımıza abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Pete LePage. Chrome 88 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.