Ahora Chrome 87 está comenzando a lanzarse de forma estable.
Tenga en cuenta lo siguiente:
- Chrome Dev Summit regresa el 9 y 10 de diciembre.
- Ahora puedes controlar el desplazamiento lateral, la inclinación y el zoom en las cámaras web que lo admiten.
- Las solicitudes de rango y los service workers no requieren tantas soluciones alternativas.
- La API de Font Access inicia su prueba de origen.
- Además, hay mucho más.
Soy Pete LePage. Trabajo y disparo desde casa. Veamos las novedades para desarrolladores en Chrome 87.
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.
}
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
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
yTransformStream
ahora se pueden pasar como argumentos apostMessage()
. - 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 propiedadmargin-block
puede reemplazar reglasmargin-block-start
ymargin-block-end
independientes. - Se agregaron nuevos descriptores
@font-face
aascent-override
,descent-override
yline-gap-override
para anular las métricas de la fuente. - Hay varias propiedades
text-decoration
yunderline
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.
- Novedades de las Herramientas para desarrolladores de Chrome (87)
- Bajas 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 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.