Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 87

Pet LePage

Twitter GitHub Glitch Mastodon Página inicial

O Chrome 87 está começando a ser lançado na versão estável agora.

Veja o que é necessário saber:

O Chrome Dev Summit será lançado nos dias 9 e 10 de dezembro.
Agora é possível controlar a movimentação, inclinação e zoom em webcams compatíveis.
As solicitações de intervalo e os service workers não exigem tantas soluções alternativas.
A API de acesso à fonte inicia o teste de origem.
E tem muito mais.

Sou Pete LePage, trabalhando e gravando em casa. Vamos nos aprofundar e ver as novidades para os desenvolvedores no Chrome 87.

Conferência de Desenvolvedores do Chrome

O Chrome Dev Summit está de volta nos dias 9 e 10 de dezembro, com seu oitavo capítulo. Mas, desta vez, vamos falar com você. Estamos trazendo as últimas atualizações, muito conteúdo novo e muitos Chromies.

Há inúmeras palestras incríveis, workshops, horários de atendimento etc. Vamos estar no chat do YouTube para responder suas dúvidas. Saiba mais e descubra como não só assistir, mas participar.

Movimentação, inclinação e zoom da câmera

A maioria das salas de reuniões do Google tem câmeras com recursos de movimentação, inclinação e zoom para que elas possam ser apontadas para as pessoas na sala. Mas não são apenas câmeras de conferência sofisticadas que suportam PTZ - movimentação, inclinação, zoom - muitas webcams também oferecem suporte a esse recurso.

A partir do Chrome 87, depois que um usuário conceder a permissão, você poderá controlar os recursos PTZ em uma câmera.

A detecção de recursos é um pouco diferente do que você provavelmente está acostumado. Será necessário chamar navigator.mediaDevices.getSupportedConstraints() para ver se o navegador é compatível com PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Solicitação de permissão para PTZ

Assim como todas as outras APIs avançadas, o usuário precisa conceder permissão à câmera, mas também à funcionalidade PTZ.

Para solicitar permissão para a funcionalidade PTZ, chame navigator.mediaDevices.getUserMedia() com as restrições de PTZ. Isso vai solicitar que o usuário conceda permissões de câmera e câmera comuns com 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.
}

Por fim, uma chamada para MediaStreamTrack.getSettings() informará o que a câmera oferece.

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

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

Depois que o usuário conceder permissão, você poderá chamar videoTrack.applyConstraints() para ajustar a movimentação, a inclinação e o 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);
  });
}

Pessoalmente, estou muito empolgado com a PTZ. Posso esconder minha cozinha bagunçada, mas você terá que conferir o vídeo para ver isso.

François tem uma ótima postagem Controlar a movimentação, inclinação e zoom da câmera no web.dev com exemplos de código, detalhes completos sobre a melhor maneira de solicitar permissão e uma demonstração para testar e conferir se a webcam é compatível com PTZ.

Solicitações de intervalo e service workers

As solicitações de intervalo HTTP, que estão disponíveis nos principais navegadores há vários anos, permitem que os servidores enviem dados solicitados ao cliente em partes. Isso é especialmente útil para arquivos de mídia grandes, em que a experiência do usuário é melhorada com uma reprodução mais suave, uma filtragem aprimorada e funções de pausa e retomada aprimoradas.

Historicamente, solicitações de intervalo e trabalhadores de serviços não funcionavam bem juntos, forçando os desenvolvedores a criar soluções alternativas. A partir do Chrome 87, transmitir solicitações de alcance para a rede a partir de um service worker vai "simplesmente funcionar".

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

Para ver uma explicação sobre os problemas com solicitações de intervalo e o que mudou no Chrome 87, consulte o artigo de Jeff, Como processar solicitações de intervalo em um service worker (em inglês) em web.dev.

Teste de origem: API Font access

Captura de tela do editor de imagens do Photopea

Levar aplicativos de design para a Web, como Figma, Gravit Designer e Photopea, é ótimo, e estamos vendo muito mais por vir. Embora a Web possa oferecer uma infinidade de fontes, nem tudo está disponível nela.

Para muitos designers, existem algumas fontes instaladas no computador que são essenciais para o trabalho deles. Por exemplo, fontes de logotipos corporativos ou fontes especializadas para CAD e outros aplicativos de design.

Com a API de acesso a fontes, que inicia um teste de origem no Chrome 87, um site agora pode enumerar as fontes instaladas, oferecendo aos usuários acesso a todas as fontes no sistema.

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

Além disso, os sites podem se conectar aos níveis mais baixos para ter acesso aos bytes da fonte, permitindo que eles façam a própria implementação de layout OpenType ou executem filtros vetoriais, ou transformações, nas formas de glifo.

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

Confira o artigo do Tom Usar tipografia avançada com fontes locais em web.dev com todos os detalhes e o link para o teste de origem para que você possa testar por conta própria.

E mais

Streams transferíveis: os objetos ReadableStream, WritableStream e TransformStream agora podem ser transmitidos como argumentos para postMessage().
Implementamos os recursos flow-relative mais granulares da especificação de propriedades lógicas e valores de CSS, incluindo abreviações e deslocamentos para facilitar a gravação dessas propriedades e valores lógicas. Por exemplo, uma única propriedade margin-block pode substituir regras margin-block-start e margin-block-end separadas.
Novos descritores @font-face foram adicionados a ascent-override, descent-override e line-gap-override para substituir as métricas da fonte
Há várias novas propriedades text-decoration e underline.
Há várias mudanças relacionadas ao isolamento de origem cruzada.