New in Chrome 87

Pete LePage

Chrome 87 is starting to roll out to stable now.

Here's what you need to know:

Chrome Dev Summit is back on December 9 & 10.
You can now control pan, tilt, and zoom on webcams that support it.
Range requests and service workers don't require as many workarounds.
The font access API starts it's origin trial.
And, there's plenty more.

I'm Pete LePage, working, and shooting from home, let's dive in and see what's new for developers in Chrome 87!

Chrome Dev Summit

The Chrome Dev Summit is back on December 9th and 10th with its 8th chapter. But this time, we're coming to you. We're bringing all the latest updates, lots of new content, and plenty of Chromies.

There are a ton of great talks, workshops, office hours, etc, and we'll be in the YouTube chat to answer your questions. Learn more, and find out how you can not just watch, but participate!

Camera pan, tilt, zoom

Most meeting rooms at Google have cameras with pan, tilt, and zoom capabilities, so that the camera can be pointed at the people in the room. But it's not just fancy conference cameras that support PTZ - pan, tilt, zoom - many web cams support it too.

Starting in Chrome 87, once a user has granted permission you can now control the PTZ features on a camera.

Feature detection is a little different from what you're probably used to. You'll need to call navigator.mediaDevices.getSupportedConstraints() to see if the browser supports PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Permission prompt for PTZ

Then, like all other powerful APIs, the user will need to grant permission to the camera, but also to PTZ functionality.

To request permission for PTZ functionality, call navigator.mediaDevices.getUserMedia() with the PTZ constraints. This will prompt the user to grant both regular camera and camera with PTZ permissions.

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.
}

Finally, a call to MediaStreamTrack.getSettings() will tell you what the camera supports.

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

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

Once the user has granted permission, you can then call videoTrack.applyConstraints() to adjust the pan, tilt, and 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);
  });
}

Personally, I'm really excited about PTZ, so I can hide my messy kitchen, but you'll have to check out the video to see that!

Francois has a great post Control camera pan, tilt, and zoom on web.dev with code samples, complete details the best way to request permission, and a demo, so that you can try it out, and see if your webcam supports PTZ.

Range requests and service workers

HTTP range requests, which have been available in major browsers for several years, allow servers to send requested data to the client in chunks. This is especially useful for large media files, where the user experience is improved through smoother playback, enhanced scrubbing, and better pause and resume functions.

Historically, range requests and services workers did not work well together, forcing developers to build work-arounds. Starting in Chrome 87, passing range requests through to the network from inside a service worker will "just work."

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

For an explanation of the issues with range requests and what's changed in Chrome 87, see Jeff's article Handling range requests in a service worker on web.dev.

Origin Trial: Font access API

Screen shot of Photopea image editor

Bringing design apps like Figma, Gravit Designer, and Photopea, to the web is great, and we're seeing a lot more coming. While the web has the ability to offer a plethora of fonts, not everything is available on the web.

For many designers, there are some fonts installed on their computer that are critical to their work. For example, corporate logo fonts, or specialized fonts for CAD and other design applications.

With the font access API, which starts an origin trial in Chrome 87, a site can now enumerate the installed fonts, giving users access to all of the fonts on their system.

// 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)

And sites can hook in at lower levels to get access to the font bytes, allowing them to do their own OpenType layout implementation, or perform vector filters, or transforms, on the glyph shapes.

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);
}

Check out Tom's article Use advanced typography with local fonts on web.dev with all the details, and the link to the Origin Trial so you can try it yourself.

And more

Transferable Streams - ReadableStream, WritableStream, and TransformStream objects can now be passed as arguments to postMessage().
We've implemented the most granular flow-relative features of the CSS Logical Properties and Values spec, including shorthands and offsets to make these logical properties and values a bit easier to write. For example, a single margin-block property can replace separate margin-block-start and margin-block-end rules.
New @font-face descriptors have been added to ascent-override, descent-override, and line-gap-override to override metrics of the font.
There are several new text-decoration and underline properties.
And there are a number of changes related to cross-origin isolation.