Halaman ini diterjemahkan oleh Cloud Translation API.

Baru di Chrome 87

Pete LePage

Chrome 87 mulai diluncurkan ke versi stabil sekarang.

Berikut hal yang perlu Anda ketahui:

Chrome Dev Summit kembali pada 9 & 10 Desember.
Kini Anda dapat mengontrol geser, miring, dan zoom di webcam yang mendukungnya.
Permintaan rentang dan pekerja layanan tidak memerlukan banyak solusi.
API akses font memulai uji coba origin-nya.
Dan, masih banyak fitur lainnya.

Saya Pete LePage, bekerja, dan merekam dari rumah. Mari kita lihat apa yang baru untuk developer di Chrome 87.

Chrome Dev Summit

Chrome Dev Summit kembali pada 9 dan 10 Desember dengan edisi ke-8. Namun, kali ini, kami akan mengunjungi Anda. Kami menghadirkan semua update terbaru, banyak konten baru, dan banyak Chromies.

Ada banyak diskusi menarik, workshop, jam buka, dll., dan kami akan berada di chat YouTube untuk menjawab pertanyaan Anda. Pelajari lebih lanjut, dan cari tahu cara tidak hanya menonton, tetapi juga berpartisipasi.

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 di ruangan. Namun, bukan hanya kamera konferensi mewah yang mendukung PTZ - geser, miringkan, zoom - banyak webcam juga mendukungnya.

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

Deteksi fitur sedikit berbeda dari yang mungkin Anda biasa lakukan. Anda harus memanggil navigator.mediaDevices.getSupportedConstraints() untuk melihat 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, tetapi juga ke fungsi PTZ.

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

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 saja 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 geser, miring, 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 antusias dengan PTZ, sehingga saya dapat menyembunyikan dapur saya yang berantakan, tetapi Anda harus menonton video untuk melihatnya.

Francois memiliki postingan bagus Mengontrol penggeseran, kemiringan, dan zoom kamera di web.dev dengan contoh kode, detail lengkap 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 bagian. Hal ini sangat berguna untuk file media berukuran besar, dengan pengalaman pengguna yang ditingkatkan melalui pemutaran yang lebih lancar, penggeseran yang ditingkatkan, dan fungsi jeda dan lanjutkan yang lebih baik.

Secara historis, permintaan rentang dan pekerja layanan tidak berfungsi dengan baik, sehingga memaksa developer untuk membuat solusi. Mulai Chrome 87, meneruskan permintaan rentang ke 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 terkait permintaan rentang dan apa yang berubah di Chrome 87, lihat artikel Jeff Menangani permintaan rentang di service worker di web.dev.

Uji Coba Origin: Font access API

Screenshot editor gambar Photopea

Mendapatkan aplikasi desain seperti Figma, Gravit Designer, dan Photopea di web adalah hal yang luar biasa, dan kami melihat banyak aplikasi lainnya yang akan hadir. Meskipun web memiliki kemampuan untuk menawarkan berbagai font, tidak semua font tersedia di web.

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

Dengan API akses font, 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)

Selain itu, situs dapat terhubung di tingkat yang lebih rendah untuk mendapatkan akses ke byte font, sehingga situs dapat melakukan implementasi tata letak OpenType 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);
}

Baca artikel Tom Menggunakan tipografi lanjutan dengan font lokal di web.dev yang berisi semua detail, dan link ke Uji Coba Origin sehingga Anda dapat mencobanya sendiri.

Dan lainnya

Streaming 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 Properti Logis dan Nilai CSS, termasuk singkatan 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 yang terkait dengan isolasi lintas-asal.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk perubahan tambahan di Chrome 87.

Ingin terus mendapatkan info terbaru tentang video kami, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 88 dirilis, saya akan langsung memberi tahu Anda -- yang baru di Chrome.