Chrome 67 Beta: WebXR Origin Trial, Generic Sensors
Monday, April 30, 2018
Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 67 on ChromeStatus.com.
Accelerometer: Use the motion of the device to move around in a 3D video.
Gyroscope: Use the orientation of the device to implement a table-top maze.
Orientation Sensor: This is what's called a fusion sensor meaning it combines readings from two or more sensors, in this case the accelerometer and the gyroscope. Whereas a maze implemented using only the gyroscope might only move the location marker in two dimensions, one implemented with the orientation sensor could require the user to physically turn the device to turn a corner.
Motion Sensors: This is a fusion sensor that includes a magnetometer as well as the accelerometer and the gyroscope. The most obvious use case for this as a virtual compass.
Accelerometer sensor measurements provide the movement speed of the device in terms of x, y, and z coordinates.
Intel has a website devoted to demonstrations of the sensor APIs with sample code available for download. The article published at the start of the origin trial has been updated.
The new API is available as an origin trial (explainer, sign-up form). You can find samples and documentation in the Immersive Web Community Group GitHub repos. There's also a polyfill available that supports browsers with WebVR 1.1 support, browsers without support, and "magic window" on mobile devices.
Watching a video in virtual reality
Virtual and augmented reality experiences enabled by this API include games as well as other "long tail" applications, such as:
On Windows the right-hand Alt key serves as AltGraph (ISO-Level-3-Shift) on some layouts, such as many European language layouts, to allow generating additional printable-characters. Internally the key generates Ctrl+Alt modifiers, so that Chrome reports all of Control, Alt and AltGraph in the flags for these keys. In this change, Chrome distinguishes AltGraph from Ctrl+Alt under Windows for consistency with these modifiers on other platforms.
For developers this removes an edge-case from keyboard event modifier handling. If an app handles
This change applies to Windows only.
To defend against certificate misissuance, web developers should use the
We expect to remove this in Chrome 69.
Removal is expected in Chrome 69.
-webkit-box-flex-group: This property has minimal usage based on the UseCounter in stable.
Percent (%) values for -webkit-line-clamp: There is interest in finding a standards-based solution to the number values use case, but we haven't seen demand for the %-based values.
-webkit-box-lines: This property was never fully implemented. It was originally intended such that a "vertical"/"horizontal"
Generic Sensors
Sensor data is used in many native applications to enable experiences like immersive gaming, fitness tracking, and augmented or virtual reality. This data is now available to web applications using the Generic Sensor API. The API consists of a base Sensor interface with a set of concrete sensor classes built on top. Here are links to the sensor specs and examples of how they might be used.Accelerometer: Use the motion of the device to move around in a 3D video.
Gyroscope: Use the orientation of the device to implement a table-top maze.
Orientation Sensor: This is what's called a fusion sensor meaning it combines readings from two or more sensors, in this case the accelerometer and the gyroscope. Whereas a maze implemented using only the gyroscope might only move the location marker in two dimensions, one implemented with the orientation sensor could require the user to physically turn the device to turn a corner.
Motion Sensors: This is a fusion sensor that includes a magnetometer as well as the accelerometer and the gyroscope. The most obvious use case for this as a virtual compass.
Accelerometer sensor measurements provide the movement speed of the device in terms of x, y, and z coordinates.
Intel has a website devoted to demonstrations of the sensor APIs with sample code available for download. The article published at the start of the origin trial has been updated.
WebXR Device API Origin Trial
The WebXR Device API enables the creation of virtual and augmented reality experiences on mobile devices and desktops - unifying experiences across AR enabled mobile devices, mobile-based VR headsets like Google Daydream View and Samsung Gear VR, as well as desktop-hosted headsets like Oculus Rift, HTC Vive, and Windows Mixed Reality Headsets.The new API is available as an origin trial (explainer, sign-up form). You can find samples and documentation in the Immersive Web Community Group GitHub repos. There's also a polyfill available that supports browsers with WebVR 1.1 support, browsers without support, and "magic window" on mobile devices.
Watching a video in virtual reality
Virtual and augmented reality experiences enabled by this API include games as well as other "long tail" applications, such as:
- Immersive 360° videos
- Traditional 2D (or 3D) videos presented in immersive surroundings
- Data visualization
- Home shopping
- Art
Other Features in this Release
SVG
SVG2 requires<foreignObject>
to be a stacking context. Making <foreignObject>
a stacking context allows developers to place HTML content underneath a <foreignObject>
without confusion. DOM
The DOM specification was updated so thatDOMTokenList.replace()
returns a boolean value indicating whether a replacement occurred. This is useful for code that takes different paths depending on whether a replacement occurred, avoiding the need for an extra condition using contains()
. Chrome now follows the specification.HTML > CustomElements
Authors can now create custom elements that inherit from the semantics of native, built-in elements. This saves developers from reimplementing built-in functionality such as accessibility, semantics, JavaScript methods/properties.Input
Web pages can now process mouse events (mousedown
, auxclick
, mouseup
) for back and forward buttons on mice with five or more buttons. This allows back and forward mouse buttons to be prevented by applications such as games that wish to override them. On Windows the right-hand Alt key serves as AltGraph (ISO-Level-3-Shift) on some layouts, such as many European language layouts, to allow generating additional printable-characters. Internally the key generates Ctrl+Alt modifiers, so that Chrome reports all of Control, Alt and AltGraph in the flags for these keys. In this change, Chrome distinguishes AltGraph from Ctrl+Alt under Windows for consistency with these modifiers on other platforms.
For developers this removes an edge-case from keyboard event modifier handling. If an app handles
keydown
/keypress
/keyup
to implement shortcuts, it will no longer need workarounds to cope with certain (mainly European) keyboard layouts. For example, if an app uses Ctrl+# as a shortcut (as GMail did) then previously the app would need to check for both Ctrl, and for AltGraph, otherwise French users would not be able to use it.This change applies to Windows only.
JavaScript
JavaScript now has a numeric primitive that provides support for arbitrary precision integers. Previously, numbers in JavaScript were represented as double-precision floats, giving them limited precision. Using theBigInt()
function and 'n'
suffix on numeric literals you can safely store and operate on large integers even beyond the safe integer limit for numbers.Layout
Formatting contexts will now behave exactly like floats do when they are positioned. In other words, they no longer look at theshape-outside
property of the float for positioning and instead are positioned according to their margin box. The new behavior may be seen in this example by changing the height of the flex
class. This also affects how new formatting contexts are sized and positioned.Loader
Client Hints enable origins to receive device-specific preferences in the HTTP request headers.Accept-CH-Lifetime
adds a client hint that allow origins to persist their opt-in policy for a specified period so they can receive client hints on navigation requests. Additionally, on the first page load, this feature provides hints for all subresources of the page.Network > Streams API
TransformStream
is part of the Streams API, which is used for creating, composing, and consuming streams of data. It enables transforming data in stream form. It is typically used in a pipe between a ReadableStream
and a WritableStream
. The following example uses TransformStream to decode text received in a streaming response body.function textDecodeTransform() { const decoder = new TextDecoder(); return new TransformStream({ transform(chunk, controller) { controller.enqueue(decoder.decode(chunk, { stream: true })); } }); } fetch(url).then(response => { // response.body is a stream of Uint8Array chunks. // But if we want chunks of text: const stream = response.body.pipeThrough(textDecodeTransform()); // … });
Shadow DOM
The<slot>
element can now participate in a flat layout tree, with UA style display: contents
. Before this change, applying a CSS selector to a <slot>
element had no effect. Not only is this fixed, but when selectors are applied to a <slot>
element, its children inherit its styles.Deprecations and Interoperability Improvements
Chrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes.Deprecate HTTP-Based Public Key Pinning
HTTP-Based Public Key Pinning (HPKP) was intended to allow websites to send an HTTP header that pins one or more of the public keys present in the site's certificate chain. It has very low adoption, and although it provides security against certificate mis-issuance, it also creates risks of denial of service and hostile pinning.To defend against certificate misissuance, web developers should use the
Expect-CT
header, including its reporting function. Expect-CT
is safer than HPKP due to the flexibility it gives site operators to recover from configuration errors, and due to the built-in support offered by a number of CAs.We expect to remove this in Chrome 69.
Deprecate AppCache on Non-secure Contexts
AppCache over HTTPS is deprecated. AppCache is a powerful feature that allows offline and persistent access to an origin. Allowing AppCache to be used over non-secure contexts makes it an attack vector for cross-site scripting hacks.Removal is expected in Chrome 69.
Layout
Several Webkit-prefixed CSS properties will be removed in this release.-webkit-box-flex-group: This property has minimal usage based on the UseCounter in stable.
Percent (%) values for -webkit-line-clamp: There is interest in finding a standards-based solution to the number values use case, but we haven't seen demand for the %-based values.
-webkit-box-lines: This property was never fully implemented. It was originally intended such that a "vertical"/"horizontal"
-webkit-box
could have multiple rows/columns.