Novedades de Chrome 87

Pete LePage

Chrome 87 comenzará a lanzarse en la versión estable.

Tenga en cuenta lo siguiente:

• Chrome Dev Summit vuelve el 9 y 10 de diciembre.
• Ahora puedes controlar las funciones de desplazamiento, inclinación y zoom en las cámaras web compatibles.
• Las solicitudes de rango y los trabajadores de servicio no requieren tantas soluciones alternativas.
• La API de acceso a fuentes inicia la prueba de origen.
• Y hay mucho más.

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

Chrome Dev Summit

La Chrome Dev Summit regresa el 9 y 10 de diciembre con su 8º capítulo. Pero esta vez, iremos a tu casa. Te traemos todas las actualizaciones más recientes, mucho contenido nuevo y muchos cromos.

Hay muchas conferencias, talleres, horarios de atención, etc., y estaremos en el chat de YouTube para responder tus preguntas. Obtén más información y averigua cómo no solo puedes mirar el contenido, sino también participar.

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 paneo, inclinación y zoom para que se puedan enfocar a las personas que están en la sala. Pero no solo las cámaras de conferencia sofisticadas admiten PTZ (pan, inclinación y zoom); muchas cámaras web también lo admiten.

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

La detección de funciones difiere un poco de lo que probablemente 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.
}

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

Para solicitar permiso para la funcionalidad de PTZ, llama a navigator.mediaDevices.getUserMedia() con las restricciones de PTZ. Se le solicitará al usuario que otorgue permisos a la cámara normal y a la cámara con 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 ú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, puedes llamar a videoTrack.applyConstraints() para ajustar el paneo, 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);
  });
}

Personalmente, me entusiasma mucho la PTZ, ya que puedo ocultar mi cocina desordenada, pero deberás mirar el video para ver eso.

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

Solicitudes de rango y service workers

Las solicitudes de rango HTTP, que están disponibles en los principales navegadores 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 con una reproducción más fluida, una limpieza mejorada y mejores funciones de pausa y reanudación.

Históricamente, las solicitudes de rango y los trabajadores de servicios no funcionaban bien juntos, lo que obligaba a los desarrolladores a crear soluciones alternativas. A partir de Chrome 87, pasar 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 obtener una explicación de los problemas con las solicitudes de rango y lo que cambió en Chrome 87, consulta el artículo de Jeff Cómo controlar las solicitudes de rango en un trabajador de servicio en web.dev.

Prueba de origen: API de Font Access

Llevar apps de diseño como Figma, Gravit Designer y Photopea a la Web es algo muy bueno, y veremos muchas más. Si bien la Web tiene la capacidad de ofrecer una gran cantidad de fuentes, no todo está disponible allí.

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, lo que les brinda a los usuarios acceso 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)

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

Consulta el artículo de Tom Cómo usar 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.

Y mucho más

• Flujos transferibles: Los objetos ReadableStream, WritableStream y TransformStream ahora se pueden pasar como argumentos a postMessage().
• Implementamos las funciones flow-relative más detalladas de la especificación de propiedades y valores lógicos de CSS, incluidos los atajos y los offsets para que sea un poco más fácil escribir estas propiedades y valores lógicos. Por ejemplo, una sola propiedad margin-block puede reemplazar reglas margin-block-start y margin-block-end separadas.
• 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 varios 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 se indican a continuación para ver los cambios adicionales en Chrome 87.

• Novedades de las Herramientas para desarrolladores de Chrome (87)
• Depresiones y eliminaciones de Chrome 87
• Actualizaciones de ChromeStatus.com para Chrome 87
• Novedades de JavaScript en Chrome 87
• Lista de cambios del repositorio de código fuente de Chromium

Suscribirse

Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Desarrolladores de Chrome 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 88, estaré aquí para contarte las novedades de Chrome.