Chrome 87'deki yenilikler

Chrome 87 şu anda kararlı sürümde kullanıma sunuluyor.

Şunları bilmeniz gerekir:

Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi Chrome 87'deki geliştiricilere gelen yenilikleri görelim!

Chrome Geliştirici Zirvesi

Chrome Dev Summit logosu

Chrome Dev Summit, 9-10 Aralık'ta 8. bölümle geri dönüyor. Ancak bu sefer size geliyoruz. En son güncellemeleri, çok sayıda yeni içeriği ve çok sayıda Chrome'u karşılıyoruz.

Çok sayıda harika konuşma, atölye, ofis saati vb. sizi bekliyor. Sorularınızı yanıtlamak için YouTube sohbetinde olacağız. Daha fazla bilgi edinin ve yalnızca izlemekle kalmayıp katılmak için neler yapabileceğinizi öğrenin.

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

Google'daki çoğu toplantı odasında kaydırma, yatırma ve yakınlaştırma yapabilen kameralar bulunur. Bu sayede kamera odadaki kişilere işaret edebilir. Ancak PTZ'yi (kaydırma, yatırma, yakınlaştırma) destekleyen gösterişli konferans kameraları da birçok web kamerasından ibaret değildir.

Chrome 87'den itibaren, bir kullanıcı izin verdiğinde artık 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() hizmetini aramanız gerekir.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

PTZ için izin istemi

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

PTZ işlevine izin istemek için PTZ kısıtlamalarıyla navigator.mediaDevices.getUserMedia() yöntemini çağırın. Bu işlemde 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ı telefonu arayarak 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, yatırma ve yakınlaştırmayı ayarlamak için videoTrack.applyConstraints() komutunu ç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);
  });
}

Şahsen, PTZ konusunda çok heyecanlıyım, bu yüzden dağınık mutfağımı gizleyebilirim ama bunu görmek için videoya göz atmanız gerekir!

Francois'in web.dev sitesinde kod örnekleri, kamera kaydırma, yatırma ve yakınlaştırmayı kontrol etme konulu mükemmel bir yayını var, izin istemenin en iyi yolunu ayrıntılarıyla bulabilir, deneyebilir ve web kameranızın PTZ'yi destekleyip desteklemediğini görebilirsiniz.

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

Başlıca tarayıcılarda birkaç yıldır mevcut olan HTTP aralığı istekleri, sunucuların istenen verileri parçalar halinde istemciye göndermesine olanak tanır. Bu, özellikle daha akıcı oynatma, ileri geri oynatma ve daha iyi duraklatma ve devam ettirme işlevleriyle kullanıcı deneyiminin iyileştirildiği büyük medya dosyaları için faydalıdır.

Geçmişte aralık istekleri ve hizmet çalışanları birlikte iyi çalışmadığı için geliştiriciler geçici çözümler oluşturmaya zorlanıyordu. Chrome 87'den itibaren, aralık isteklerinin bir Service Worker'ın içinden ağa geçirilmesi "sorunsuzca ç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ını görmek için Can'ın web.dev adresindeki Hizmet çalışanındaki aralık isteklerini işleme makalesini inceleyin.

Kaynak Deneme: Font Access API

Photopea resim düzenleyicisinin ekran görüntüsü

Figma, Gravit Designer ve Photopea gibi tasarım uygulamalarını web'e taşımak harika. Ayrıca, çok daha fazlasını da yapıyoruz. Web'de çok sayıda yazı tipi sunuluyor olsa da her şey web'de mevcut değildir.

Birçok tasarımcının bilgisayarlarına, işleri için kritik önem taşıyan bazı yazı tipleri yüklüdür. Örneğin, kurumsal logo yazı tipleri, CAD ve diğer tasarım uygulamaları için özel yazı tipleri.

Chrome 87'de bir kaynak denemesi başlatan font Access API ile siteler artık yüklü yazı tiplerini numaralandırabilir ve kullanıcıların sistemlerindeki tüm yazı tiplerine erişmelerini sağlayabilir.


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

Ayrıca siteler, yazı tipi baytlarına erişmek için daha alt düzeylerde çalışabilir. Böylece, bu siteler kendi OpenType düzeni uygulamalarını yapabilir veya glif şekillerinde vektör filtreleri ya da dönüşümleri gerçekleştirebilirler.

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

Tom'un web.dev adresindeki Yerel yazı tipleriyle gelişmiş yazı tipleri kullanma başlıklı makalesine ve kaynak denemesinin bağlantısına göz atarak kendiniz deneyin.

Daha birçok avantaj

  • Aktarılabilir Akışlar: ReadableStream, WritableStream ve TransformStream nesneleri artık postMessage() öğesine bağımsız değişken olarak iletilebilir.
  • CSS Mantıksal Özellikleri ve Değerleri spesifikasyonunun, kısaltmalar ve ofsetler dahil olmak üzere bu mantıksal özellikleri ve değerleri yazmayı biraz daha kolaylaştırmak için 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 yerine geçebilir.
  • Yazı tipi 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ü kullanıma sunuldu.
  • Kökler arası erişime kapalı olanlarla ilgili de çeşitli değişiklikler söz konusudur.

Daha fazla bilgi

Bu bölümde, öne çıkan özelliklerin yalnızca bazıları anlatılmıştır. Chrome 87'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Videolarımızla ilgili güncel bilgileri edinmek isterseniz Chrome Developers YouTube kanalımıza abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 88 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!