Chrome 87'deki yenilikler

Pete LePage

Chrome 87 kararlı sürüm kullanıma sunulmaya başladı.

Şunları bilmeniz gerekir:

• Chrome Dev Summit 9 ve 10 Aralık'ta tekrar düzenlenecek.
• 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 var.

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 Chrome'un sevilen karakterlerini sizinle paylaşıyoruz.

Ç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ı yaparak kameranın desteklediği özellikleri öğrenebilirsiniz.

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ırma ayarlarını yapmak 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 daha akıcı oynatma, geliştirilmiş kaydırma ve daha iyi duraklatma ve devam ettirme işlevleriyle kullanıcı deneyiminin iyileştirilmesini sağlayan büyük medya dosyaları için kullanışlıdır.

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 yapılan değişikliklerin açıklaması için Jeff'in web.dev'deki Bir hizmet çalışanında aralık isteklerini işleme 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 şekilleri üzerinde 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ı tipleri 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()'a 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 vardır.

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.