Novidades do Chrome 87

Pete LePage

O Chrome 87 está sendo lançado para a versão estável.

Veja o que é necessário saber:

Meu nome é Pete LePage, trabalho e filmo de casa. Vamos conferir as novidades para desenvolvedores no Chrome 87.

Chrome Dev Summit

Logotipo do Chrome Dev Summit

O Chrome Dev Summit está de volta nos dias 9 e 10 de dezembro com o oitavo capítulo. Mas, desta vez, vamos até você. Estamos trazendo todas as atualizações mais recentes, muito conteúdo novo e muitos Chromers.

Há várias palestras incríveis, workshops, horários de atendimento etc. Vamos ficar no chat do YouTube para tirar suas dúvidas. Saiba mais e descubra como participar.

Panorâmica, inclinação e zoom da câmera

A maioria das salas de reunião do Google tem câmeras com recursos de pan, tilt e zoom para que a câmera possa ser apontada para as pessoas na sala. Mas não se trata apenas de câmeras de conferência sofisticadas com suporte a PTZ: movimentação, inclinação e zoom; muitas webcams têm suporte a isso.

A partir do Chrome 87, quando um usuário concede permissão, é possível controlar os recursos PTZ de uma câmera.

A detecção de recursos é um pouco diferente do que você provavelmente está acostumado. Você vai precisar chamar navigator.mediaDevices.getSupportedConstraints() para saber se o navegador oferece suporte a PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Solicitação de permissão para PTZ

Em seguida, como todas as outras APIs avançadas, o usuário precisará conceder permissão para a câmera, mas também para a funcionalidade PTZ.

Para solicitar permissão para a funcionalidade PTZ, chame navigator.mediaDevices.getUserMedia() com as restrições de PTZ. Isso vai pedir que o usuário conceda permissões de PTZ para a câmera comum e a câmera.


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() vai informar o que a câmera suporta.

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 a permissão, você poderá chamar videoTrack.applyConstraints() para ajustar a panorâmica, 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 animada com o PTZ, para que eu possa esconder minha cozinha bagunçada, mas você vai ter que assistir o vídeo para saber disso!

O François tem um ótimo post 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 que você possa testar e conferir se a sua webcam oferece suporte a 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 os dados solicitados para o cliente em partes. Isso é especialmente útil para grandes arquivos de mídia, em que a experiência do usuário é melhorada por meio de reprodução mais suave, refinamento aprimorado e melhores funções de pausa e retomada.

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

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

Para uma explicação dos 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 no web.dev.

Teste do Origin: API de acesso a fontes

Captura de tela do editor de imagens do Photopea

É ótimo trazer apps de design como Figma, Gravit Designer e Photopea para a Web, e estamos vendo muitos outros por aí. Embora a Web ofereça uma grande variedade de fontes, nem tudo está disponível.

Muitos designers têm algumas fontes instaladas no computador que são essenciais para o trabalho deles. Por exemplo, fontes de logotipo corporativo 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, dando 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)

E os sites podem se conectar em 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 realizem filtros de vetor ou transformações nas formas de glifos.

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 no web.dev com todos os detalhes e o link para o teste de origem para que você possa testar.

E mais

  • Fluxos 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 e valores lógicos do CSS, incluindo abreviações e deslocamentos para tornar essas propriedades e valores lógicos um pouco mais fáceis de escrever. Por exemplo, uma única propriedade margin-block pode substituir regras separadas margin-block-start e margin-block-end.
  • 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.
  • E há várias mudanças relacionadas ao isolamento entre origens.

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira as mudanças adicionais no Chrome 87 nos links abaixo.

Inscrever-se

Para ficar por dentro dos nossos vídeos, inscreva-se no nosso canal Chrome Developers no YouTube. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e assim que o Chrome 88 for lançado, estarei aqui para contar as novidades do Chrome.