Novidades do Chrome 94

Pete LePage

Veja o que é necessário saber:

  • O espaço de cores padrão para elementos <canvas> agora é definido formalmente na especificação como SRGB, e você pode mudá-lo para Display P3.
  • O WebCodecs é uma maneira nova e de baixo nível de acessar codecs de áudio e vídeo integrados, importantes para streaming de jogos, editores de vídeo e outros.
  • A WebGPU inicia o teste de origem.
  • O PWA Summit vai acontecer de 6 a 7 de outubro.
  • E há muito mais.

Sou Pete LePage, trabalhando e gravando em casa. Vamos conferir as novidades para desenvolvedores no Chrome 94.

Espaço de cores padrão para elementos canvas

A forma como a cor é renderizada na tela é fundamental para alguns usuários. Para fotógrafos, ilustradores de impressões e muitos outros, as cores na tela precisam corresponder ao que está impresso. A partir do Chrome 94, os elementos <canvas> são totalmente gerenciados por cores usando sRGB. Anteriormente, sRGB era uma convenção, mas não era definido explicitamente na especificação.

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

Mais importante, agora é possível especificar qual espaço de cor será usado ao criar um objeto 2d de contexto de renderização <canvas> ou um objeto ImageData, incluindo o espaço de cores P3.

WebCodecs

Colocar um vídeo em uma página é bem fácil. No entanto, se você precisar fazer algo um pouco mais complexo e interagir com os componentes de um stream de vídeo, isso é difícil e normalmente exige o uso do Web Assembly para enviar seus próprios codecs.

No entanto, enviar seu próprio codec significa escrever o código que o navegador já tem e ele não pode aproveitar a aceleração de hardware. Com a API Web Codecs, é possível usar os componentes e codecs de mídia que já estão no navegador.

Sempre tive dificuldades para lembrar as chaves certas da linha de comando para codificar um vídeo para a Web ou converter um GIF em um arquivo de vídeo. Usando as APIs disponíveis pelo WebCodecs, eu poderia criar rapidamente um app da Web que lê um arquivo e exporte os arquivos corretos necessários para a Web.

O caminho de um Canvas ou ImageBitmap para a rede ou para o armazenamento
O caminho de um Canvas ou ImageBitmap para a rede ou para o armazenamento

Apps da Web que exigem controle total sobre como o conteúdo de mídia é processado, como editores de vídeo, videoconferência, apps de streaming e assim por diante. O acesso aos navegadores integrados aos controles de mídia é enorme.

É difícil mostrar qualquer coisa útil em 30 segundos, então confira Processamento de vídeo com o WebCodecs no web.dev para se aprofundar com muito código e algumas demonstrações interessantes.

WebGPU

A WebGPU é uma nova API que expõe recursos gráficos modernos, especificamente Direct3D 12, Metal e Vulkan. É como o WebGL, mas ele oferece acesso a recursos mais avançados da GPU e suporte para a execução de cálculos gerais na GPU.

Diagrama de arquitetura mostrando a conexão de WebGPUs entre APIs do SO e Direct3D 12, Metal e Vulkan.
Diagrama da arquitetura da WebGPU

Estamos iniciando um teste de origem no Chrome 94, e o Safari e o Firefox estão trabalhando nas implementações deles no momento.

Uma demonstração do Babylon.js de um mar agitado sendo simulado usando o recurso de sombreador de computação da WebGPU.

François tem um ótimo artigo, Acessar recursos modernos da GPU com a WebGPU, em web.dev, e compara o desempenho da multiplicação de matriz em execução na CPU em relação à GPU. Aqui está uma dica. A GPU vence.

PWA Summit

O PWA Summit vai acontecer de 6 a 7 de outubro. É uma conferência on-line sem custo financeiro voltada para ajudar todos a ter sucesso com Progressive Web Apps. O PWA Summit é uma colaboração entre pessoas de várias empresas diferentes envolvidas na criação de tecnologias de PWA: Google, Intel, Microsoft e Samsung.

Há muitas palestras e conteúdos incríveis. Saiba mais e registre-se em PWASummit.org. Espero ver você lá!

E muito mais.

Claro, há muito mais.

O método priorizado scheduler.postTask() permite agendar tarefas e mudar as prioridades de forma dinâmica ou cancelá-las ao mesmo tempo.

Se você já teve dificuldade com um novo layout quando as barras de rolagem aparecem, a propriedade scrollbar-gutter vai te deixar feliz. Ele fornece controle sobre a presença de medianizes da barra de rolagem, permitindo que você evite mudanças de layout à medida que o conteúdo é expandido.

O uso do WebSQL em contextos de terceiros foi descontinuado, e a remoção está prevista no Chrome 97. O Web SQL Database padrão foi abandonado em novembro de 2010. Ele nunca foi implementado no Firefox e foi descontinuado no Safari em 2019. Ela será suspensa e removida do Chrome quando o uso for bastante baixo. Se você ainda usa o WebSQL, este é um bom momento para começar a planejar sua migração dele.

Além disso, a API de teclado virtual oferece mais controle sobre como e quando o teclado virtual na tela é mostrado. Ele permite controlar explicitamente qualquer comportamento de rolagem ou mudanças no layout quando o teclado aparece ou desaparece.

Leia mais

Esses são apenas alguns dos principais destaques. Confira nos links abaixo outras mudanças no Chrome 94.

Fazer inscrição

Para ficar por dentro, inscreva-se no canal do YouTube Chrome Developers para receber uma notificação por e-mail sempre que lançarmos um novo vídeo.

Sou Pete LePage, e assim que o Chrome 95 for lançado, estarei aqui para contar as novidades do Chrome.