Novedades de Chrome 94

Pete LePage

Tenga en cuenta lo siguiente:

  • El espacio de color predeterminado para los elementos <canvas> ahora se define formalmente en la especificación como sRGB, y puedes cambiarlo a Display P3.
  • WebCodecs es una nueva forma de bajo nivel para acceder a códecs de audio y video integrados, lo que es importante para transmitir juegos, editores de video y mucho más.
  • WebGPU comienza su prueba de origen.
  • La PWA Summit se realizará del 6 al 7 de octubre.
  • Y hay mucho más.

Soy Pete LePage, trabajo y grabo desde casa. Comencemos y veamos las novedades para los desarrolladores en Chrome 94.

Espacio de color predeterminado para elementos canvas

La forma en que se renderiza el color en la pantalla es fundamental para algunos usuarios. Para los fotógrafos, los ilustradores de impresión y muchos otros, los colores en pantalla deben coincidir con lo que se imprime. A partir de Chrome 94, los elementos <canvas> se administran completamente por colores con sRGB. Anteriormente, sRGB era una opción común, pero no se definía de manera explícita en la especificación.

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

Lo más importante es que ahora puedes especificar qué espacio de color usar cuando creas un objeto 2D de contexto de renderización <canvas> o un objeto ImageData, incluido el espacio de color P3.

WebCodecs

Colocar un video en una página es bastante sencillo. Sin embargo, si necesitas hacer algo un poco más complejo e interactuar con los componentes de una transmisión de video, es difícil y, por lo general, requiere que uses Web Assembly para enviar tus propios códecs.

Sin embargo, enviar tu propio códec significa escribir código que el navegador ya tiene y no puede aprovechar la aceleración de hardware. La API de Web Codecs permite usar los componentes y códecs multimedia que ya están en el navegador.

Personalmente, siempre me costó recordar los interruptores de línea de comandos correctos para codificar un video para la Web o convertir un GIF en un archivo de video. Con las APIs disponibles a través de WebCodecs, pude compilar rápidamente una app web que lee un archivo y exporta los archivos correctos necesarios para la Web.

Es la ruta de acceso de un Canvas o un ImageBitmap a la red o al almacenamiento.
La ruta de un Canvas o una ImageBitmap a la red o al almacenamiento

Apps web que requieren control total sobre la forma en que se procesa el contenido multimedia, como editores de video, videoconferencias, apps de transmisión, etcétera El acceso a los controles multimedia integrados en los navegadores es enorme.

Mostrar algo útil en treinta segundos es difícil, así que consulta Video processing with WebCodecs en web.dev para obtener un análisis detallado con mucho código y algunas demostraciones geniales.

WebGPU

WebGPU es una nueva API que expone capacidades de gráficos modernas, específicamente Direct3D 12, Metal y Vulkan. Puedes pensar en él como WebGL, pero proporciona acceso a funciones más avanzadas de la GPU y también brinda compatibilidad para realizar cálculos generales en la GPU.

Diagrama de arquitectura que muestra la conexión de WebGPU entre las APIs del SO y Direct3D 12, Metal y Vulkan.
Diagrama de la arquitectura de WebGPU

Se está iniciando una prueba de origen en Chrome 94, y tanto Safari como Firefox están trabajando en sus implementaciones.

Una demostración de Babylon.js de un mar agitado que se simula con la capacidad de sombreador de cómputos de WebGPU.

François tiene un excelente artículo, Accede a las funciones modernas de GPU con WebGPU en web.dev, con los detalles y compara el rendimiento de la multiplicación de matrices que se ejecuta en la CPU con la de la GPU. Aquí tienes una sugerencia. La GPU gana.

Cumbre de AWP

La Cumbre de AWP se realizará del 6 al 7 de octubre. Es una conferencia en línea gratuita que se enfoca en ayudar a todos a tener éxito con las apps web progresivas. PWA Summit es una colaboración entre personas de varias empresas diferentes involucradas en la creación de tecnologías de AWP: Google, Intel, Microsoft y Samsung.

Hay muchas charlas y contenido excelentes. Obtén más información y regístrate en PWASummit.org. ¡Te esperamos!

Y mucho más.

Por supuesto, hay mucho más.

El método scheduler.postTask() priorizado te permite programar tareas, cambiar sus prioridades de forma dinámica o cancelarlas todas junto.

Si alguna vez tuviste que cambiar el diseño cuando aparecen las barras de desplazamiento, la propiedad scrollbar-gutter te alegrará. Proporciona control sobre la presencia de márgenes de barra de desplazamiento, lo que te permite evitar cambios de diseño a medida que se expande el contenido.

El uso de WebSQL en contextos de terceros ahora dejó de estar disponible y se espera que se quite en Chrome 97. El estándar de Web SQL Database se abandonó en noviembre de 2010. Nunca se implementó en Firefox y dejó de estar disponible en Safari en 2019. Se dará de baja y se quitará de Chrome cuando el uso sea lo suficientemente bajo. Si aún usas WebSQL, este es un buen momento para comenzar a planificar tu migración.

Además, la API del teclado virtual te brinda más control sobre cómo y cuándo se muestra el teclado virtual en pantalla. Te permite controlar de forma explícita cualquier comportamiento de desplazamiento o cambios en el diseño cuando aparece o desaparece el teclado.

Lecturas adicionales

Esto solo abarca algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para ver cambios adicionales en Chrome 94.

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage y, en cuanto se lance Chrome 95, estaré aquí para contarte las novedades.