New in Chrome 87

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

Chrome Dev Summit logo

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.getSupportedContraints() to see
if the browser supports PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera 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:  };
    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

Bringing design apps like Figma, Gravit, 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.