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

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

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

Tôi là Pete LePage, đang làm việc và quay video tại nhà. Hãy cùng tìm hiểu sâu hơn xem có gì mới dành cho nhà phát triển trong Chrome 87!

Hội nghị Chrome Dev

Biểu trưng của Hội nghị Chrome Dev

Hội nghị Chrome Dev 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 mang đến tất cả các bản cập nhật mới nhất, nhiều nội dung mới và nhiều ứng dụng Chrome.

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

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

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 máy ảnh hội nghị hấp dẫn hỗ trợ PTZ – kéo, nghiêng, thu phóng – nhiều máy quay web 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 hiện có thể điều khiển 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 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.
}

Nhắc cấp quyền cho 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 cũng như chức năng PTZ.

Để yêu cầu quyền cho chức năng PTZ, hãy gọi navigator.mediaDevices.getUserMedia() kèm theo các điều kiện ràng buộc của 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 thông thường.


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 chế độ 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 thực sự hào hứng về PTZ, vì vậy tôi có thể ẩn căn bếp lộn xộn của mình, nhưng bạn sẽ phải xem video để thấy điều đó!

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

Yêu cầu phạm vi và trình chạy dịch vụ

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

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

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 đề với 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 một trình chạy dịch vụ trên web.dev.

Bản dùng thử theo nguyên gốc: API truy cập phông chữ

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

Việc đưa các ứng dụng thiết kế như Figma, Gravit Designer và Photopea lên web thật tuyệt vời, và chúng ta sẽ thấy nhiều ứng dụng hơn nữa. Mặc dù web có khả năng cung cấp rất nhiều phông chữ, nhưng không phải mọi phông chữ đều có sẵn trên web.

Đối với nhiều nhà thiết kế, một số phông chữ được cài đặt trên máy tính rất 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 cho CAD và các ứng dụng thiết kế khác.

Với API quyền truy cập phông chữ (bắt đầu bản dùng thử theo nguyê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)

Đồng thời, các trang web có thể kết nối ở các cấp thấp hơn để truy cập vào các byte phông chữ, cho phép họ triển khai bố cục OpenType riêng hoặc thực hiện bộ lọc vectơ hay 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 để biết tất cả thông tin chi tiết, kèm theo đường liên kết đến Bản dùng thử theo nguyên gốc để bạn có thể tự thử.

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

  • Luồng có thể chuyển – Hiện tại, các đối tượng ReadableStream, WritableStreamTransformStream có thể được truyền dưới dạng đối số cho 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 CSS, bao gồm cả viết tắt và độ dời để giúp việc viết 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 duy nhất có thể thay thế các quy tắc margin-block-startmargin-block-end riêng biệt.
  • Các chỉ số mô tả @font-face mới đã được thêm vào ascent-override, descent-overrideline-gap-override để ghi đè các chỉ số của phông chữ.
  • Có một số thuộc tính text-decorationunderline mới.
  • Ngoài ra, cũng có một số thay đổi liên quan đến việc tách biệt nhiều nguồn gốc.

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

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

Đăng ký

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

Tôi là Pete LePage và ngay sau khi Chrome 88 được phát hành, tôi sẽ sẵn sàng cho bạn biết -- những điểm mới trong Chrome!