Novedades de Chrome 87

Ahora Chrome 87 está comenzando a lanzarse de forma estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage. Trabajo y disparo desde casa. Veamos las novedades para desarrolladores en Chrome 87.

Chrome Dev Summit

Logotipo de Chrome Dev Summit

Chrome Dev Summit regresa el 9 y 10 de diciembre con su capítulo 8. Pero esta vez, hablamos de ti. Incorporaremos las actualizaciones más recientes, mucho contenido nuevo y muchos Chromies.

Hay muchísimas charlas excelentes, talleres, horarios de consulta, etc., y estaremos en el chat de YouTube para responder tus preguntas. Obtén más información y descubre cómo puedes participar y mirar más.

Desplazamiento lateral, inclinación y zoom de la cámara

La mayoría de las salas de reuniones de Google tienen cámaras con funciones de desplazamiento lateral, inclinación y zoom, de modo que se pueda apuntar a las personas en la sala. Pero no solo las elegantes cámaras de conferencia son compatibles con el PTZ, como desplazamiento lateral, inclinación y zoom, sino que también lo son muchas cámaras web.

A partir de Chrome 87, una vez que un usuario otorga permiso, podrás controlar las funciones de PTZ en una cámara.

La detección de características es un poco diferente a lo que seguramente estás acostumbrado. Deberás llamar a navigator.mediaDevices.getSupportedConstraints() para ver si el navegador admite PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Mensaje de permiso para PTZ

Luego, como todas las demás APIs potentes, el usuario deberá otorgar permiso a la cámara, pero también a la funcionalidad PTZ.

Si quieres solicitar permiso para la funcionalidad PTZ, llama a navigator.mediaDevices.getUserMedia() con las restricciones de PTZ. Se le solicitará al usuario que otorgue los permisos PTZ de cámara y cámara normal.


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 último, una llamada a MediaStreamTrack.getSettings() te indicará qué admite la cámara.

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

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

Una vez que el usuario otorgue el permiso, podrás llamar a videoTrack.applyConstraints() para ajustar el desplazamiento lateral, la inclinación y el 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);
  });
}

En lo personal, estoy muy entusiasmada con el ritmo cardiaco, así que puedo esconder mi desordenada cocina, pero tendrás que ver el video para verlo.

Francois tiene una excelente publicación sobre Cómo controlar el desplazamiento lateral, la inclinación y el zoom de la cámara en web.dev con muestras de código, detalles completos, la mejor manera de solicitar el permiso y una demostración para que puedas probarlo y ver si tu cámara web es compatible con PTZ.

Solicitudes de rango y service workers

Las solicitudes de rango HTTP, que están disponibles en los principales navegadores desde hace varios años, permiten que los servidores envíen los datos solicitados al cliente en fragmentos. Esto es especialmente útil para archivos multimedia grandes, en los que la experiencia del usuario mejora mediante una reproducción más fluida, un arrastre mejorado y mejores funciones de pausa y reanudación.

Históricamente, los trabajadores de servicios y las solicitudes de rango no funcionaban bien juntos, lo que obligaba a los desarrolladores a crear soluciones alternativas. A partir de Chrome 87, pasar las solicitudes de rango a la red desde un service worker funcionará.

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

Para ver una explicación de los problemas relacionados con las solicitudes de rango y los cambios en Chrome 87, consulta el artículo de Jeff sobre Cómo controlar solicitudes de rango en un service worker en web.dev.

Prueba de origen: API de Font Access

Captura de pantalla del editor de imágenes Photopea

Incorporar apps de diseño como Figma, Gravit Designer y Photopea a la Web es genial, y vemos muchas más en el futuro. Si bien la Web tiene la capacidad de ofrecer una gran cantidad de fuentes, no todo está disponible en la Web.

Para muchos diseñadores, hay algunas fuentes instaladas en sus computadoras que son fundamentales para su trabajo. Por ejemplo, fuentes de logotipos corporativos o fuentes especializadas para CAD y otras aplicaciones de diseño.

Con la API de acceso a fuentes, que inicia una prueba de origen en Chrome 87, un sitio ahora puede enumerar las fuentes instaladas para que los usuarios puedan acceder a todas las fuentes de su 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)

Además, los sitios pueden conectarse en niveles inferiores para obtener acceso a los bytes de fuente, lo que les permite hacer su propia implementación de diseño de OpenType o ejecutar filtros vectoriales (o transformaciones) en las formas de los 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);
}

Consulta el artículo de Tom Usa la tipografía avanzada con fuentes locales en web.dev con todos los detalles y el vínculo a la prueba de origen para que puedas probarla por tu cuenta.

Más entornos

  • Transmisiones transferibles: Los objetos ReadableStream, WritableStream y TransformStream ahora se pueden pasar como argumentos a postMessage().
  • Implementamos las funciones flow-relative más detalladas de las especificaciones de las propiedades lógicas y los valores de CSS, incluidas las abreviaturas y las compensaciones para facilitar un poco la escritura de estas propiedades y valores lógicos. Por ejemplo, una sola propiedad margin-block puede reemplazar reglas margin-block-start y margin-block-end independientes.
  • Se agregaron nuevos descriptores @font-face a ascent-override, descent-override y line-gap-override para anular las métricas de la fuente.
  • Hay varias propiedades text-decoration y underline nuevas.
  • Además, hay una serie de cambios relacionados con el aislamiento de origen cruzado.

Lecturas adicionales

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

Suscribirse

Si quieres mantenerte al día con nuestros videos, suscríbete a nuestro canal de YouTube para desarrolladores de Chrome. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y apenas se lance Chrome 88, estaré aquí para contarte las novedades de Chrome.