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 tekrar düzenlenecek.
• Artık bu özellikleri destekleyen web kameralarında kaydırma, eğme ve yakınlaştırma işlevlerini kontrol edebilirsiniz.
• Aralık istekleri ve hizmet çalışanları, bu kadar fazla geçici çözüm gerektirmez.
• Font Access API, kaynak denemesini 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. Ama bu sefer senin için 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 destekleyen şık konferans kameraları (kaydırma, yatırma, yakınlaştırma) dışında pek çok web kamerası da bunu destekler.

Chrome 87'den itibaren, bir kullanıcı izin verdiğinde artık PTZ özelliklerini kamerada kontrol edebilirsiniz.

Özellik algılama, alıştığınızdan biraz farklıdır. Tarayıcının PTZ'yi destekleyip desteklemediğini görmek için navigator.mediaDevices.getSupportedConstraints() numarasını 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şlemle kullanıcıdan hem normal kamera hem de kameraya PTZ izni vermesi istenir.

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() numaralı telefona yapılan bir çağrı ile kameranın neleri desteklediğini öğ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ı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 mutfakımı gizleyebiliyorum. 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 Aralık isteklerini bir hizmet çalışanında 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 daha da artacağını görüyoruz. 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 özelliği 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 ayrımı ile ilgili bir dizi değişiklik 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

En son videolarımızı kaçırmamak için Chrome Geliştiricileri 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.