recursal/MDN huggingface dataset:
Touch: radiusX property
=======================

The **`radiusX`** read-only property of the `Touch` interface returns the X radius of the ellipse that most closely circumscribes the area of contact with the touch surface. The value is in CSS pixels of the same scale as `Touch.screenX`.

This value, in combination with `Touch.radiusY` and `Touch.rotationAngle` constructs an ellipse that approximates the size and shape of the area of contact between the user and the screen. This may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example.

Value
-----

A number.

Examples
--------

This example illustrates using the `Touch` interface's `Touch.radiusX`, `Touch.radiusX` and `Touch.rotationAngle` properties. The `Touch.radiusX` property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis **indicated** by the touch point's `Touch.rotationAngle`. Likewise, the `Touch.radiusY` property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis **perpendicular** to that indicated by `Touch.rotationAngle`. The `Touch.rotationAngle` is the angle (in degrees) that the ellipse described by `radiusX` and `radiusY` is rotated clockwise about its center.

The following simple code snippet, registers a single handler for the `touchstart`, `touchmove` and `touchend` events. When the `src` element is touched, the element's width and height will be calculate based on the touch point's `radiusX` and `radiusY` values and the element will then be rotated using the touch point's `rotationAngle`.


```html
<div id="src">…</div>
```



```js
const src = document.getElementById("src");

src.addEventListener("touchstart", rotate);
src.addEventListener("touchmove", rotate);
src.addEventListener("touchend", rotate);

function rotate(e) {
  const touch = e.changedTouches.item(0);

  // Turn off default event handling
  e.preventDefault();

  // Rotate element 'src'.
  src.style.width = `${touch.radiusX \* 2}px`;
  src.style.height = `${touch.radiusY \* 2}px`;
  src.style.transform = `rotate(${touch.rotationAngle}deg)`;
}
```

Specifications
--------------

| Specification |
| --- |
| Touch Events # dom-touch-radiusx |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: pageX property
=====================

 The **`Touch.pageX`** read-only property returns the X
 coordinate of the touch point relative to the viewport, including any scroll offset.

Value
-----

 A `double` floating point value representing the X coordinate of the touch point
 relative to the viewport, including any scroll offset.

Examples
--------

 This example illustrates how to access the `Touch` object's
 `Touch.pageX` and `Touch.pageY` properties. The
 `Touch.pageX` property is the horizontal coordinate of a touch point
 relative to the viewport (in CSS pixels), including any scroll offset. The
 `Touch.pageY` property is the vertical coordinate of a touch point relative
 to the viewport (in CSS pixels), including any scroll offset.

 In following simple code snippet, we assume the user initiates one or more touch
 contacts on the `source` element, moves the touch points and then releases
 all contacts with the surface. When the `touchmove` event handler is invoked,
 each touch point's `Touch.pageX` and `Touch.pageY` coordinates
 are accessed via the event's `TouchEvent.changedTouches` list.


```js
// Register a touchmove listeners for the 'source' element
const src = document.getElementById("source");

src.addEventListener(
  "touchmove",
  (e) => {
    // Iterate through the touch points that have moved and log each
    // of the pageX/Y coordinates. The unit of each coordinate is CSS pixels.
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(`touchpoint[${i}].pageX = ${e.changedTouches[i].pageX}`);
      console.log(`touchpoint[${i}].pageY = ${e.changedTouches[i].pageY}`);
    }
  },
  false,
);
```

Specifications
--------------

| Specification |
| --- |
| Touch Events # dom-touch-pagex |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: rotationAngle property
=============================

The **`rotationAngle`** read-only property of the `Touch` interface returns the rotation angle, in degrees, of the contact area ellipse defined by `Touch.radiusX` and `Touch.radiusY`. The value may be between 0 and 90. Together, these three values describe an ellipse that approximates the size and shape of the area of contact between the user and the screen. This may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example.

Value
-----

A number.

Examples
--------

The Touch.radiusX example includes an example of this property's usage.

Specifications
--------------

| Specification |
| --- |
| Touch Events # dom-touch-rotationangle |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: identifier property
==========================

 The **`Touch.identifier`** returns a value uniquely identifying
 this point of contact with the touch surface. This value remains consistent for every
 event involving this finger's (or stylus's) movement on the surface until it is lifted
 off the surface.

Value
-----

A `long` that represents the unique ID of the `Touch` object.

Examples
--------


```js
someElement.addEventListener(
  "touchmove",
  (e) => {
    // Iterate through the list of touch points that changed
    // since the last event and print each touch point's identifier.
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(
        `changedTouches[${i}].identifier = ${e.changedTouches[i].identifier}`,
      );
    }
  },
  false,
);
```

Specifications
--------------

| Specification |
| --- |
| Touch Events # dom-touch-identifier |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: radiusY property
=======================

The **`radiusY`** read-only property of the `Touch` interface returns the Y radius of the ellipse that most closely circumscribes the area of contact with the touch surface. The value is in CSS pixels of the same scale as `Touch.screenX`.

This value, in combination with `Touch.radiusX` and `Touch.rotationAngle` constructs an ellipse that approximates the size and shape of the area of contact between the user and the screen. This may be a large ellipse representing the contact between a fingertip and the screen or a small one representing the tip of a stylus, for example.

Value
-----

A number.

Examples
--------

The Touch.radiusX example includes an example of this property's usage.

Specifications
--------------

| Specification |
| --- |
| Touch Events # dom-touch-radiusy |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: pageY property
=====================

 The **`Touch.pageY`** read-only property returns the Y
 coordinate of the touch point relative to the viewport, including any scroll offset.

Value
-----

 A `double` floating point value representing the Y coordinate of the touch point
 relative to the viewport, including any scroll offset.

Examples
--------

 This example illustrates how to access the `Touch` object's
 `Touch.pageX` and `Touch.pageY` properties. The
 `Touch.pageX` property is the horizontal coordinate of a touch point
 relative to the viewport (in CSS pixels), including any scroll offset. The
 `Touch.pageY` property is the vertical coordinate of a touch point relative
 to the viewport (in CSS pixels), including any scroll offset.

 In following simple code snippet, we assume the user initiates one or more touch
 contacts on the `source` element, moves the touch points and then releases
 all contacts with the surface. When the `touchmove` event handler is invoked,
 each touch point's `Touch.pageX` and `Touch.pageY` coordinates
 are accessed via the event's `TouchEvent.changedTouches` list.


```js
// Register a touchmove listeners for the 'source' element
const src = document.getElementById("source");

src.addEventListener(
  "touchmove",
  (e) => {
    // Iterate through the touch points that have moved and log each
    // of the pageX/Y coordinates. The unit of each coordinate is CSS pixels.
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(`touchpoint[${i}].pageX = ${e.changedTouches[i].pageX}`);
      console.log(`touchpoint[${i}].pageY = ${e.changedTouches[i].pageY}`);
    }
  },
  false,
);
```

Specifications
--------------

| Specification |
| --- |
| Touch Events # dom-touch-pagey |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ViewTimeline: startOffset property
==================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`startOffset`** read-only property of the `ViewTimeline` interface returns a `CSSNumericValue` representing the starting (0% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.

Value
-----

A `CSSNumericValue`.

Examples
--------

See the main `ScrollTimeline` page for an example.

Specifications
--------------

| Specification |
| --- |
| Scroll-driven Animations # dom-viewtimeline-startoffset |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Animations API
* CSS scroll-driven animations
* `ViewTimeline`
* `AnimationTimeline`, `ScrollTimeline`
ViewTimeline: ViewTimeline() constructor
========================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`ViewTimeline()`** constructor creates a new `ViewTimeline` object instance.

Syntax
------


```js
new ViewTimeline(options)
```

### Parameters

`options`

An object that can contain the following properties:

`subject`

A reference to an `Element` representing the subject element whose visibility within its nearest ancestor scrollable element (scroller) will drive the progress of the timeline.

`axis` Optional

An enumerated value representing the scroll axis that will drive the progress of the timeline. Possible values are:

* `"block"`: The scrollbar on the block axis of the scroll container, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `"y"`, while for vertical writing modes, it is the same as `"x"`.
* `"inline"`: The scrollbar on the inline axis of the scroll container, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as `"x"`, while for vertical writing modes, this is the same as `"y"`.
* `"y"`: The scrollbar on the vertical axis of the scroll container.
* `"x"`: The scrollbar on the horizontal axis of the scroll container.

If omitted, `axis` defaults to `"block"`.

`inset` Optional

A value or array of values representing an adjustment to the position of the scrollport (see Scroll container for more details) in which the subject is deemed to be visible. Possible values are:

* `"auto"`: The default box position is used.
* A string: If a string is specified, it can consist of one or two values equal to `auto` or a CSS `<length-percentage>` value. To put it another way, the string should be a valid `view-timeline-inset` value.
* An array of one or two values, which can be `"auto"` or a suitable `CSSNumericValue` to represent a length or percentage offset (for example `CSS.px()` or `CSS.percent()`. If an array is provided, the first value represents the start inset (which affects the `ViewTimeline.endOffset` value) and the second value represents the end inset (which affects the `ViewTimeline.startOffset` value).

If the array has only one value, it is duplicated.

If omitted, `inset` defaults to `auto`.


### Return value

A new `ViewTimeline` object instance.

Examples
--------

See the main `ViewTimeline` page for an example.

Specifications
--------------

| Specification |
| --- |
| Scroll-driven Animations # dom-viewtimeline-viewtimeline |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Animations API
* CSS scroll-driven animations
* `ViewTimeline`
* `AnimationTimeline`, `ScrollTimeline`
ViewTimeline: subject property
==============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`subject`** read-only property of the `ViewTimeline` interface returns a reference to the subject element whose visibility within its nearest ancestor scrollable element (scroller) is driving the progress of the timeline.

Value
-----

An `Element`.

Examples
--------

See the main `ViewTimeline` page for an example.

Specifications
--------------

| Specification |
| --- |
| Scroll-driven Animations # dom-viewtimeline-subject |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Animations API
* CSS scroll-driven animations
* `ViewTimeline`
* `AnimationTimeline`, `ScrollTimeline`
ViewTimeline: endOffset property
================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`endOffset`** read-only property of the `ViewTimeline` interface returns a `CSSNumericValue` representing the ending (100% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.

Value
-----

A `CSSNumericValue`.

Examples
--------

See the main `ScrollTimeline` page for an example.

Specifications
--------------

| Specification |
| --- |
| Scroll-driven Animations # dom-viewtimeline-endoffset |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Animations API
* CSS scroll-driven animations
* `ViewTimeline`
* `AnimationTimeline`, `ScrollTimeline`
OrientationSensor: quaternion property
======================================

 The **`quaternion`** read-only
 property of the `OrientationSensor` interface returns a four element
 `Array` whose elements contain the components of the unit
 quaternion representing the device's orientation.

 Because `OrientationSensor` is a base class, `quaternion` may
 only be read from one of its derived classes.

Value
-----

 An `Array` whose values are the x, y, z, and w components of the quaternion
 representing the device orientation.

Examples
--------


```js
// TBD
```

Specifications
--------------

| Specification |
| --- |
| Orientation Sensor # orientationsensor-quaternion |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
OrientationSensor: populateMatrix() method
==========================================

 The **`populateMatrix`** method of the
 `OrientationSensor` interface populates the given target matrix with the
 rotation matrix based on the latest sensor reading. The rotation matrix is shown
 below.

![The formulas used to convert the sensor's quaternion to the provided matrix.](/en-US/docs/Web/API/OrientationSensor/populateMatrix/quaternion_to_rotation_matrix.png)

where:

* W = cos(θ/2)
* X = Vx \* sin(θ/2)
* Y = Vy \* sin(θ/2)
* Z = Vz \* sin(θ/2)
Syntax
------


```js
populateMatrix(targetMatrix)
```


 Because `OrientationSensor` is a base class, `populateMatrix`
 may only be read from one of its derived classes.

### Parameters

`targetMatrix`

TBD

### Return value

None (`undefined`).

Examples
--------


```js
// TBD
```

Specifications
--------------

| Specification |
| --- |
| Orientation Sensor # orientationsensor-populatematrix |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Building an Internet-Connected Phone with PeerJS
================================================

* Next

One of WebRTC's main issues is that it is pretty complicated to use and develop with — handling the signalling service and knowing when to call the right endpoint can get confusing. But there is some good news; PeerJS is a WebRTC framework that abstracts away all of the ice and signalling logic so that you can focus on the functionality of your application. There are two parts to PeerJS, the client-side framework and the server.

In this series of articles we will create a simple phone application using PeerJS. We'll be using both the server and the client-side framework, but most of our work will be involved with handling the client-side code.

### Prerequisites

This is an intermediate level tutorial; before attempting it you should already be comfortable with:

* Vanilla JavaScript
* Node
* Express
* HTML

Before you get started, you'll want to make sure you've installed node and Yarn (the instructions in later articles assume Yarn, but you can feel free to use npm or another manager if you'd prefer).

**Note:** If you learn better by following step-by-step code, we've also provided this tutorial in code, which you can use instead.

### Table of Contents

1. Setup
2. Connect Peers
    1. Get Microphone Permission
    2. Showing and hiding HTML
    3. Create a Peer Connection
    4. Creating a Call
    5. Answer a Call
    6. End a Call
3. Deployment and Further Reading
* Next
Ending a call
=============

* Previous
* Next

You've nearly finished! The last thing you want to do is ensure your callers have a way of ending a call. The most graceful way of doing this is to close the connection using the `close()` function, which you can do in an event listener for the hang up button.

1. Add the following to the bottom of your `script.js` file:

```js
const hangUpBtn = document.querySelector(".hangup-btn");
hangUpBtn.addEventListener("click", () => {
  conn.close();
  showCallContent();
});
```

2. When the connection has been closed, you also want to display the correct HTML content so you can just call your `showCallContent()` function. Within the `call` event, you also want to ensure the remote browser is updated. To achieve this, add another event listener within the `peer.on('call', (stream) => { }` event listener, within the conditional block.

```js
conn.on("close", () => {
  showCallContent();
});
```

This way, if the person who initiated the call clicks "Hang up" first, both browsers are still updated with the new state.
3. Test out your app again, and try closing a call.

**Note:** The `on('close')` event that is called on the `conn` variable isn't available in Firefox yet; this just means that in Firefox each caller will have to hang up individually.

**Warning:** The way we've currently coded things means that when a connection is closed, both browsers will be updated **only** if the person who started the call presses "Hang up" first. If the person who answered the call clicks "Hang up" first, the other caller will also have to click "Hang up" to see the correct HTML.

* Previous
* Next
Building the server
===================

* Previous
* Next

In this article we'll set up the server for our phone app. The server file will look like a regular Express server file with one difference, the Peer server.

1. First of all, create a file called `server.js` in the same location as the HTML and CSS files you created previously. This is the entry point of our app, as defined in our `package.json` file.
2. You'll need to start your code by requiring the peer server at the top of the `server.js` file, to ensure that we have access to the peer server:

```js
const { ExpressPeerServer } = require("peer");
```

3. You then need to actually create the peer server. Add the following code below your previous line:

```js
const peerServer = ExpressPeerServer(server, {
  proxied: true,
  debug: true,
  path: "/myapp",
  ssl: {},
});
```

We use the `ExpressPeerServer` object to create the peer server, passing it some options in the process. The peer server will handle the signalling required for WebRTC for us, so we don't have to worry about STUN/TURN servers or other protocols.
4. Finally, you'll need to tell your app to use the `peerServer` by calling `app.use(peerServer)`. Your finished `server.js` should include the other necessary dependencies you'd include in a server file, as well as serving the `index.html` file to the root path.
 Update `server.js` so that it looks like this:

```js
const express = require("express");
const http = require("http");
const path = require("path");
const app = express();
const server = http.createServer(app);
const { ExpressPeerServer } = require("peer");
const port = process.env.PORT || "8000";

const peerServer = ExpressPeerServer(server, {
  proxied: true,
  debug: true,
  path: "/myapp",
  ssl: {},
});

app.use(peerServer);

app.use(express.static(path.join(__dirname)));

app.get("/", (request, response) => {
  response.sendFile(`${\_\_dirname}/index.html`);
});

server.listen(port);
console.log(`Listening on: ${port}`);
```

5. You should be able to connect to your app via `localhost` (in our `server.js` we're using port 8000 (defined on line 7) but you may be using another port number). Run `yarn start` (where `start` refers to the script you declared in `package.json` on the previous page) in your terminal. Visit `localhost:8000` in your browser and you should see a page that looks like this:

 ![A cream background with the words 'phone a friend' in bold, dark green font as the heading. 'Connecting...' is immediately below that and 'please use headphones!' below that. Following on, a big dark green button with 'Call' written in the same cream color of the background. ](/en-US/docs/Web/API/WebRTC_API/Build_a_phone_with_peerjs/Build_the_server/connecting_screen.png)

If you want to learn more about Peer.js, check out the Peer.js Server repo on GitHub.

* Previous
* Next
Deployment and further reading
==============================

* Previous
Deployment
----------

The easiest place to deploy this app would be Glitch, since you don't have to fiddle with configuring the port for the peer server.

Further Reading
---------------

* PeerJS
* WebRTC
* PeerJS Server
* A similar video tutorial with video
* The code tutorial
* Previous