Baru di Chrome 87

Pete LePage

Chrome 87 sekarang mulai diluncurkan ke stabil.

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja, dan mengambil gambar dari rumah. Mari kita pelajari lebih dalam dan lihat apa yang baru untuk pengembang di Chrome 87!

Chrome Dev Summit

Logo Chrome Dev Summit

Chrome Dev Summit kembali diselenggarakan pada 9 dan 10 Desember dengan bab ke-8. Tapi kali ini, kami akan menanyakan Anda. Kami menghadirkan semua update terbaru, banyak konten baru, dan banyak Chrome.

Ada banyak perbincangan hebat, workshop, waktu konsultasi, dll., dan kami siap menjawab pertanyaan Anda di chat YouTube. Pelajari lebih lanjut, dan cari tahu cara agar tidak hanya menonton, tetapi juga berpartisipasi dalam program ini.

Geser, miringkan, zoom kamera

Sebagian besar ruang rapat di Google memiliki kamera dengan kemampuan geser, miring, dan zoom, sehingga kamera dapat diarahkan ke orang-orang yang ada di ruangan. Namun, bukan hanya kamera konferensi canggih yang mendukung PTZ - geser, miring, zoom - banyak kamera web juga mendukungnya.

Mulai Chrome 87, setelah pengguna memberikan izin, kini Anda dapat mengontrol fitur PTZ di kamera.

Deteksi fitur sedikit berbeda dari yang mungkin biasa Anda lakukan. Anda harus memanggil navigator.mediaDevices.getSupportedConstraints() untuk mengetahui apakah browser mendukung PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Permintaan izin untuk PTZ

Kemudian, seperti semua API canggih lainnya, pengguna harus memberikan izin ke kamera, dan juga ke fungsi PTZ.

Guna meminta izin untuk fungsi PTZ, panggil navigator.mediaDevices.getUserMedia() dengan batasan PTZ. Tindakan ini akan meminta pengguna untuk memberikan izin PTZ untuk kamera dan kamera reguler.


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

Terakhir, panggilan ke MediaStreamTrack.getSettings() akan memberi tahu Anda apa yang didukung kamera.

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

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

Setelah pengguna memberikan izin, Anda dapat memanggil videoTrack.applyConstraints() untuk menyesuaikan penggeseran, kemiringan, dan zoom.

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

Secara pribadi, saya sangat senang dengan PTZ, jadi saya bisa menyembunyikan dapur saya yang berantakan, tapi Anda harus melihat videonya untuk melihatnya.

Francois memiliki postingan yang sangat bagus tentang Mengontrol penggeseran, kemiringan, dan zoom kamera di web.dev dengan contoh kode, melengkapi detail tentang cara terbaik untuk meminta izin, dan demo, sehingga Anda dapat mencobanya, dan melihat apakah webcam Anda mendukung PTZ.

Permintaan rentang dan pekerja layanan

Permintaan rentang HTTP, yang telah tersedia di browser utama selama beberapa tahun, memungkinkan server mengirim data yang diminta ke klien dalam beberapa potongan. Hal ini sangat berguna untuk file media besar, tempat pengalaman pengguna ditingkatkan melalui pemutaran yang lebih lancar, scrubbing yang ditingkatkan, serta fungsi jeda dan lanjutkan yang lebih baik.

Secara historis, permintaan rentang dan pekerja layanan tidak dapat bekerja sama dengan baik, sehingga memaksa developer melakukan pemecahan masalah. Mulai Chrome 87, meneruskan permintaan rentang melalui jaringan dari dalam pekerja layanan akan "langsung berfungsi".

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

Untuk penjelasan tentang masalah dengan permintaan rentang dan apa yang berubah di Chrome 87, lihat artikel Jeff Menangani permintaan rentang di pekerja layanan di web.dev.

Uji Coba Origin: Font access API

Screenshot editor gambar Photopea

Menghadirkan aplikasi desain seperti Figma, Gravit Designer, dan Photopea, ke web sangat bagus, dan kami akan melihat lebih banyak lagi. Meskipun web memiliki kemampuan untuk menawarkan banyak {i>font<i}, tidak semuanya tersedia di web.

Bagi banyak desainer, ada beberapa {i>font<i} yang terinstal di komputer mereka yang penting untuk pekerjaan mereka. Misalnya, font logo perusahaan, atau font khusus untuk CAD dan aplikasi desain lainnya.

Dengan font access API, yang memulai uji coba origin di Chrome 87, situs kini dapat menghitung font yang diinstal, sehingga memberi pengguna akses ke semua font di sistem mereka.


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

Situs juga dapat terhubung pada tingkat yang lebih rendah untuk mendapatkan akses ke byte font, sehingga situs dapat melakukan implementasi tata letak OpenType-nya sendiri, atau melakukan filter vektor, atau transformasi, pada bentuk glyph.

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

Lihat artikel Tom Menggunakan tipografi lanjutan dengan font lokal di web.dev dengan semua detailnya, dan link ke Uji Coba Origin agar Anda dapat mencobanya sendiri.

Dan lainnya

  • Stream yang Dapat Ditransfer - objek ReadableStream, WritableStream, dan TransformStream kini dapat diteruskan sebagai argumen ke postMessage().
  • Kami telah menerapkan fitur flow-relative yang paling terperinci dari spesifikasi Logical Properties dan Values CSS, termasuk pintasan dan offset untuk membuat properti dan nilai logis ini sedikit lebih mudah ditulis. Misalnya, satu properti margin-block dapat menggantikan aturan margin-block-start dan margin-block-end yang terpisah.
  • Deskripsi @font-face baru telah ditambahkan ke ascent-override, descent-override, dan line-gap-override untuk mengganti metrik font.
  • Ada beberapa properti text-decoration dan underline baru.
  • Selain itu, ada sejumlah perubahan terkait isolasi lintas asal.

Bacaan lebih lanjut

Ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan pada Chrome 87.

Subscribe

Ingin terus mendapatkan video terbaru kami, lalu berlangganan channel YouTube Developer Chrome kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 88 dirilis, saya akan ada di sini untuk memberi tahu Anda -- apa yang baru di Chrome!