Trang này được dịch bởi Cloud Translation API.

Tính năng mới trong Chrome 87

Pete LePage

Chrome 87 hiện đang bắt đầu ra mắt phiên bản ổn định.

Dưới đây là những gì bạn cần phải biết:

Chrome Dev Summit sẽ trở lại vào ngày 9 và 10 tháng 12.
Giờ đây, bạn có thể điều khiển tính năng xoay, nghiêng và thu phóng trên những webcam hỗ trợ tính năng này.
Yêu cầu phạm vi và trình chạy dịch vụ không yêu cầu nhiều giải pháp như vậy.
API truy cập phông chữ bắt đầu bản dùng thử theo nguyên gốc.
Và còn nhiều tính năng khác.

Tôi là Pete LePage, làm việc và quay video tại nhà. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 87!

Hội nghị nhà phát triển Chrome

Hội nghị dành cho nhà phát triển Chrome sẽ trở lại vào ngày 9 và 10 tháng 12 với chương thứ 8. Nhưng lần này, chúng tôi sẽ đến với bạn. Chúng tôi sẽ mang đến tất cả thông tin cập nhật mới nhất, rất nhiều nội dung mới và nhiều hoạt động dành cho người dùng Chrome.

Sẽ có rất nhiều buổi trò chuyện thú vị, hội thảo, giờ làm việc, v.v. Chúng tôi sẽ tham gia cuộc trò chuyện trên YouTube để trả lời các câu hỏi của bạn. Hãy tìm hiểu thêm và khám phá cách bạn có thể không chỉ xem mà còn tham gia!

Xoay, nghiêng, thu phóng máy ảnh

Hầu hết các phòng họp tại Google đều có máy ảnh có khả năng xoay, nghiêng và thu phóng để có thể hướng máy ảnh vào những người trong phòng. Tuy nhiên, không chỉ các camera hội nghị ưa thích cũng hỗ trợ PTZ - xoay, nghiêng, thu phóng - nhiều web cam cũng hỗ trợ tính năng này.

Kể từ Chrome 87, sau khi người dùng cấp quyền, bạn có thể kiểm soát các tính năng PTZ trên máy ảnh.

Tính năng phát hiện tính năng hơi khác một chút so với tính năng mà bạn có thể đã quen thuộc. Bạn cần gọi navigator.mediaDevices.getSupportedConstraints() để xem trình duyệt có hỗ trợ PTZ hay không.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Lời nhắc cấp quyền cho tính năng PTZ

Sau đó, giống như tất cả các API mạnh mẽ khác, người dùng sẽ cần cấp quyền cho máy ảnh, nhưng cũng cần cấp quyền cho chức năng PTZ.

Để yêu cầu cấp quyền cho chức năng PTZ, hãy gọi navigator.mediaDevices.getUserMedia() với các điều kiện ràng buộc PTZ. Thao tác này sẽ nhắc người dùng cấp quyền cho cả máy ảnh thông thường và máy ảnh có 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.
}

Cuối cùng, lệnh gọi đến MediaStreamTrack.getSettings() sẽ cho bạn biết máy ảnh hỗ trợ những gì.

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

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

Sau khi người dùng cấp quyền, bạn có thể gọi videoTrack.applyConstraints() để điều chỉnh tính năng kéo, nghiêng và thu phóng.

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

Cá nhân tôi rất thích PTZ, vì vậy tôi có thể giấu căn bếp bừa bộn của mình nhưng bạn phải xem video mới thấy được!

Francois có một bài đăng tuyệt vời Kiểm soát tính năng xoay, nghiêng và thu phóng của máy ảnh trên web.dev với các mã mẫu, thông tin chi tiết đầy đủ về cách tốt nhất để yêu cầu quyền và một bản minh hoạ để bạn có thể dùng thử và xem webcam của mình có hỗ trợ PTZ hay không.

Dải ô yêu cầu và trình chạy dịch vụ

Yêu cầu phạm vi HTTP đã có trong các trình duyệt lớn trong nhiều năm, cho phép máy chủ gửi dữ liệu được yêu cầu đến máy khách theo từng phần. Điều này đặc biệt hữu ích đối với các tệp phương tiện lớn, trong đó trải nghiệm người dùng được cải thiện thông qua tính năng phát mượt mà hơn, tính năng tua nhanh được nâng cao và các chức năng tạm dừng và tiếp tục tốt hơn.

Trước đây, các yêu cầu về phạm vi và trình chạy dịch vụ không hoạt động tốt với nhau, buộc nhà phát triển phải xây dựng các giải pháp. Kể từ Chrome 87, việc truyền các yêu cầu phạm vi đến mạng từ bên trong một worker dịch vụ sẽ "hoạt động tốt".

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

Để biết nội dung giải thích về các vấn đề liên quan đến yêu cầu phạm vi và những thay đổi trong Chrome 87, hãy xem bài viết của Jeff Xử lý yêu cầu phạm vi trong worker dịch vụ trên web.dev.

Bản dùng thử Origin: API truy cập phông chữ

Ảnh chụp màn hình của trình chỉnh sửa ảnh Photopea

Việc đưa các ứng dụng thiết kế như Figma, Gravit Designer và Photopea lên web là một điều tuyệt vời và chúng tôi sẽ thấy nhiều ứng dụng khác sắp ra mắt. Mặc dù web có thể cung cấp nhiều phông chữ, nhưng không phải phông chữ nào cũng có trên web.

Đối với nhiều nhà thiết kế, có một số phông chữ được cài đặt trên máy tính đóng vai trò quan trọng đối với công việc của họ. Ví dụ: phông chữ biểu trưng của công ty hoặc phông chữ chuyên biệt dành cho CAD và các ứng dụng thiết kế khác.

Với API truy cập phông chữ, bắt đầu thử nghiệm nguồn gốc trong Chrome 87, trang web hiện có thể liệt kê các phông chữ đã cài đặt, cho phép người dùng truy cập vào tất cả phông chữ trên hệ thống của họ.

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

Ngoài ra, các trang web có thể nối vào ở các cấp thấp hơn để có quyền truy cập vào các byte phông chữ, cho phép chúng triển khai bố cục OpenType của riêng mình hoặc thực hiện các bộ lọc vectơ hoặc phép biến đổi trên các hình dạng ký tự.

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

Hãy xem bài viết của Tom Sử dụng kiểu chữ nâng cao với phông chữ cục bộ trên web.dev cùng với tất cả thông tin chi tiết và đường liên kết đến Bản dùng thử theo nguyên gốc để bạn có thể tự mình dùng thử.

Và các dữ liệu khác

Luồng có thể chuyển – Giờ đây, bạn có thể truyền các đối tượng ReadableStream, WritableStream và TransformStream dưới dạng đối số đến postMessage().
Chúng tôi đã triển khai các tính năng flow-relative chi tiết nhất của thông số Thuộc tính và giá trị logic của CSS, bao gồm cả cách viết tắt và độ lệch để giúp việc ghi các thuộc tính và giá trị logic này dễ dàng hơn. Ví dụ: một thuộc tính margin-block có thể thay thế các quy tắc margin-block-start và margin-block-end riêng biệt.
Thêm các chỉ số mô tả @font-face mới vào ascent-override, descent-override và line-gap-override để ghi đè các chỉ số của phông chữ.
Có một số thuộc tính text-decoration và underline mới.
Ngoài ra, còn có một số thay đổi liên quan đến tính năng tách biệt nhiều nguồn gốc.

Tài liệu đọc thêm

Nội dung này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm các thay đổi trong Chrome 87.

Nếu muốn cập nhật video của chúng tôi, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Pete LePage. Ngay khi Chrome 88 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!