Adapt RTCPeerConnection API to new events structure (#13898)

* Adapt RTCPeerConnection API to new events structure This PR adapts the RTCPeerConnection API to conform to the new events structure. * Finish adaptation * Fix redirects * Apply suggestions from code review Co-authored-by: Jean-Yves Perrier <[email protected]> * State that track event doesn't bubble * Fix build failure Co-authored-by: Jean-Yves Perrier <[email protected]>
mdn · Mar 16, 2022 · 4b9d61b · 4b9d61b
1 parent 10fbdab
commit 4b9d61b
Show file tree

Hide file tree

Showing 36 changed files with 289 additions and 1,283 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -8918,13 +8918,13 @@
 /en-US/docs/Web/API/RTCPeerConnection.iceConnectionState	/en-US/docs/Web/API/RTCPeerConnection/iceConnectionState
 /en-US/docs/Web/API/RTCPeerConnection.iceGatheringState	/en-US/docs/Web/API/RTCPeerConnection/iceGatheringState
 /en-US/docs/Web/API/RTCPeerConnection.localDescription	/en-US/docs/Web/API/RTCPeerConnection/localDescription
-/en-US/docs/Web/API/RTCPeerConnection.onaddstream	/en-US/docs/Web/API/RTCPeerConnection/onaddstream
-/en-US/docs/Web/API/RTCPeerConnection.ondatachannel	/en-US/docs/Web/API/RTCPeerConnection/ondatachannel
-/en-US/docs/Web/API/RTCPeerConnection.onicecandidate	/en-US/docs/Web/API/RTCPeerConnection/onicecandidate
-/en-US/docs/Web/API/RTCPeerConnection.oniceconnectionstatechange	/en-US/docs/Web/API/RTCPeerConnection/oniceconnectionstatechange
-/en-US/docs/Web/API/RTCPeerConnection.onnegotiationneeded	/en-US/docs/Web/API/RTCPeerConnection/onnegotiationneeded
-/en-US/docs/Web/API/RTCPeerConnection.onremovestream	/en-US/docs/Web/API/RTCPeerConnection/onremovestream
-/en-US/docs/Web/API/RTCPeerConnection.onsignalingstatechange	/en-US/docs/Web/API/RTCPeerConnection/onsignalingstatechange
+/en-US/docs/Web/API/RTCPeerConnection.onaddstream	/en-US/docs/Web/API/RTCPeerConnection/addstream_event
+/en-US/docs/Web/API/RTCPeerConnection.ondatachannel	/en-US/docs/Web/API/RTCPeerConnection/datachannel_event
+/en-US/docs/Web/API/RTCPeerConnection.onicecandidate	/en-US/docs/Web/API/RTCPeerConnection/icecandidate_event
+/en-US/docs/Web/API/RTCPeerConnection.oniceconnectionstatechange	/en-US/docs/Web/API/RTCPeerConnection/iceconnectionstatechange_event
+/en-US/docs/Web/API/RTCPeerConnection.onnegotiationneeded	/en-US/docs/Web/API/RTCPeerConnection/negotiationneeded_event
+/en-US/docs/Web/API/RTCPeerConnection.onremovestream	/en-US/docs/Web/API/RTCPeerConnection/removestream_event
+/en-US/docs/Web/API/RTCPeerConnection.onsignalingstatechange	/en-US/docs/Web/API/RTCPeerConnection/signalingstatechange_event
 /en-US/docs/Web/API/RTCPeerConnection.peerIdentity	/en-US/docs/Web/API/RTCPeerConnection/peerIdentity
 /en-US/docs/Web/API/RTCPeerConnection.remoteDescription	/en-US/docs/Web/API/RTCPeerConnection/remoteDescription
 /en-US/docs/Web/API/RTCPeerConnection.removeStream	/en-US/docs/Web/API/RTCPeerConnection/removeStream
@@ -8937,6 +8937,18 @@
 /en-US/docs/Web/API/RTCPeerConnection/getLocalStreams	/en-US/docs/Web/API/RTCPeerConnection/getSenders
 /en-US/docs/Web/API/RTCPeerConnection/getRemoteStreams	/en-US/docs/Web/API/RTCPeerConnection/getReceivers
 /en-US/docs/Web/API/RTCPeerConnection/icecandidate	/en-US/docs/Web/API/RTCPeerConnection/icecandidate_event
+/en-US/docs/Web/API/RTCPeerConnection/onaddstream	/en-US/docs/Web/API/RTCPeerConnection/addstream_event
+/en-US/docs/Web/API/RTCPeerConnection/onconnectionstatechange	/en-US/docs/Web/API/RTCPeerConnection/connectionstatechange_event
+/en-US/docs/Web/API/RTCPeerConnection/ondatachannel	/en-US/docs/Web/API/RTCPeerConnection/datachannel_event
+/en-US/docs/Web/API/RTCPeerConnection/onicecandidate	/en-US/docs/Web/API/RTCPeerConnection/icecandidate_event
+/en-US/docs/Web/API/RTCPeerConnection/onicecandidateerror	/en-US/docs/Web/API/RTCPeerConnection/icecandidateerror_event
+/en-US/docs/Web/API/RTCPeerConnection/oniceconnectionstatechange	/en-US/docs/Web/API/RTCPeerConnection/iceconnectionstatechange_event
+/en-US/docs/Web/API/RTCPeerConnection/onicegatheringstatechange	/en-US/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event
+/en-US/docs/Web/API/RTCPeerConnection/onnegotiationneeded	/en-US/docs/Web/API/RTCPeerConnection/negotiationneeded_event
+/en-US/docs/Web/API/RTCPeerConnection/onremovestream	/en-US/docs/Web/API/RTCPeerConnection/removestream_event
+/en-US/docs/Web/API/RTCPeerConnection/onsignalingstatechange	/en-US/docs/Web/API/RTCPeerConnection/signalingstatechange_event
+/en-US/docs/Web/API/RTCPeerConnection/ontrack	/en-US/docs/Web/API/RTCPeerConnection/track_event
+/en-US/docs/Web/API/RTCPeerConnection/signalingstatechange_event/onsignalingstatechange	/en-US/docs/Web/API/RTCPeerConnection/signalingstatechange_event
 /en-US/docs/Web/API/RTCPeerConnection/tonechange_event	/en-US/docs/Web/API/RTCDTMFSender/tonechange_event
 /en-US/docs/Web/API/RTCPeerConnectionEvent.RTCPeerConnectionIceEvent	/en-US/docs/Web/API/RTCPeerConnectionIceEvent/RTCPeerConnectionIceEvent
 /en-US/docs/Web/API/RTCPeerConnectionIceEvent.RTCPeerConnectionIceEven	/en-US/docs/Web/API/RTCPeerConnectionIceEvent/RTCPeerConnectionIceEvent

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -69495,131 +69495,6 @@
       "teoli"
     ]
   },
-  "Web/API/RTCPeerConnection/onaddstream": {
-    "modified": "2020-10-15T21:28:51.519Z",
-    "contributors": [
-      "sideshowbarker",
-      "Sheppy",
-      "fscholz",
-      "jpmedley",
-      "abbycar",
-      "chrisjsimpson",
-      "teoli"
-    ]
-  },
-  "Web/API/RTCPeerConnection/onconnectionstatechange": {
-    "modified": "2020-10-15T21:45:56.865Z",
-    "contributors": [
-      "sideshowbarker",
-      "fscholz",
-      "Sheppy",
-      "jpmedley"
-    ]
-  },
-  "Web/API/RTCPeerConnection/ondatachannel": {
-    "modified": "2020-10-15T21:28:52.335Z",
-    "contributors": [
-      "fscholz",
-      "jlotto",
-      "jpmedley",
-      "Sheppy",
-      "so_matt_basta",
-      "teoli"
-    ]
-  },
-  "Web/API/RTCPeerConnection/onicecandidate": {
-    "modified": "2020-10-15T21:28:52.555Z",
-    "contributors": [
-      "sideshowbarker",
-      "Sheppy",
-      "betimer",
-      "fscholz",
-      "jpmedley",
-      "abbycar",
-      "nils",
-      "teoli",
-      "rmnguleria"
-    ]
-  },
-  "Web/API/RTCPeerConnection/onicecandidateerror": {
-    "modified": "2020-10-15T21:45:57.269Z",
-    "contributors": [
-      "cowsay",
-      "sideshowbarker",
-      "connorshea",
-      "Sheppy"
-    ]
-  },
-  "Web/API/RTCPeerConnection/oniceconnectionstatechange": {
-    "modified": "2020-10-15T21:28:51.772Z",
-    "contributors": [
-      "sideshowbarker",
-      "boldt",
-      "fscholz",
-      "kalitine",
-      "jpmedley",
-      "abbycar",
-      "Sheppy",
-      "teoli"
-    ]
-  },
-  "Web/API/RTCPeerConnection/onicegatheringstatechange": {
-    "modified": "2020-10-15T21:46:02.887Z",
-    "contributors": [
-      "sideshowbarker",
-      "fscholz",
-      "jpmedley",
-      "Sheppy",
-      "abbycar"
-    ]
-  },
-  "Web/API/RTCPeerConnection/onnegotiationneeded": {
-    "modified": "2020-10-15T21:28:52.037Z",
-    "contributors": [
-      "sideshowbarker",
-      "Sheppy",
-      "bwc",
-      "fscholz",
-      "jpmedley",
-      "abbycar",
-      "Jib",
-      "teoli"
-    ]
-  },
-  "Web/API/RTCPeerConnection/onremovestream": {
-    "modified": "2020-10-15T21:28:51.660Z",
-    "contributors": [
-      "sideshowbarker",
-      "fscholz",
-      "Jib",
-      "jpmedley",
-      "abbycar",
-      "rijnhard",
-      "teoli"
-    ]
-  },
-  "Web/API/RTCPeerConnection/onsignalingstatechange": {
-    "modified": "2020-10-15T21:28:52.493Z",
-    "contributors": [
-      "Sheppy",
-      "sideshowbarker",
-      "fscholz",
-      "jpmedley",
-      "abbycar",
-      "Sebastianz",
-      "teoli"
-    ]
-  },
-  "Web/API/RTCPeerConnection/ontrack": {
-    "modified": "2020-10-15T21:46:18.172Z",
-    "contributors": [
-      "sideshowbarker",
-      "Sheppy",
-      "fscholz",
-      "matsub",
-      "jpmedley"
-    ]
-  },
   "Web/API/RTCPeerConnection/peerIdentity": {
     "modified": "2020-10-15T21:28:58.428Z",
     "contributors": [

diff --git a/files/en-us/mozilla/firefox/releases/36/index.md b/files/en-us/mozilla/firefox/releases/36/index.md
@@ -83,7 +83,7 @@ Highlights:
 - The {{event("keyschange")}} event is now sent when an EME-related CDM change keys in a session ({{bug(1081755)}}).
 - The default values of the options for {{domxref("MutationObserver.observe()")}} have been updated to match the latest specification ({{bug(973638)}}).
 - Experimental support for virtual reality devices has landed behind the `dom.vr.enabled` preference, off by default ({{bug(1036604)}}).
-- The function associated with {{domxref("RTCPeerConnection.onsignalingstatechange")}} now receives an event as parameter, as per spec ({{bug(1075133)}}).
+- The function associated with {{domxref("RTCPeerConnection.signalingstatechange_event", "RTCPeerConnection.onsignalingstatechange")}} now receives an event as parameter, as per spec ({{bug(1075133)}}).
 - The experimental implementation of Web Animations make progress: the method {{domxref("Animation/play", "AnimationPlayer.play()")}} and {{domxref("Animation/pause", "AnimationPlayer.pause()")}} are now supported ({{bug(1070745)}}), as well as {{domxref("Animation/playState", "AnimationPlayer.playState")}} ({{bug(1037321)}}).
 - The non-standard {{domxref("DOMRequest")}} interface has now a {{domxref("DOMRequest.then()", "then()")}} method ({{bug(839838)}}).
 - The CSSOM View scroll behavior controlling methods, {{domxref("Element.scroll()")}}, {{domxref("Element.scrollTo()")}}, {{domxref("Element.scrollBy()")}}, and {{domxref("Element.scrollIntoView()")}}, have been implemented or extended ({{bug(1045754)}} and {{bug(1087559)}}).

diff --git a/files/en-us/mozilla/firefox/releases/60/index.md b/files/en-us/mozilla/firefox/releases/60/index.md
@@ -78,7 +78,7 @@ _No changes._
 - Removing a track from an {{domxref("RTCPeerConnection")}} using {{domxref("RTCPeerConnection.removeTrack", "removeTrack()")}} no longer removes the track's {{domxref("RTCRtpSender")}} from the peer connection's list of senders as reported by {{domxref("RTCPeerConnection.getSenders", "getSenders()")}} ({{bug(1290949)}}).
 - The {{domxref("RTCRtpContributingSource")}} and {{domxref("RTCRtpSynchronizationSource")}} objects' timestamps were previously being reported based on values returned by {{jsxref("Date.getTime()")}}. In Firefox 60, these have been fixed to correctly use the [Performance Timing API](/en-US/docs/Web/API/Performance_API) instead ({{bug(1433576)}}).
 - As per spec, the {{domxref("ConvolverNode.ConvolverNode","ConvolverNode()")}} constructor now throws a `NotSupportedError` {{domxref("DOMException")}} if the referenced {{domxref("AudioBuffer")}} does not have 1, 2, or 4 channels ({{bug(1443228)}}).
-- The obsolete {{domxref("RTCPeerConnection")}} event handler {{domxref("RTCPeerConnection.onremovestream")}} has been removed; by now you should be using {{event("removetrack")}} events instead ({{bug(1442385)}}).
+- The obsolete {{domxref("RTCPeerConnection")}} event handler {{domxref("RTCPeerConnection.removestream_event", "RTCPeerConnection.onremovestream")}} has been removed; by now you should be using {{event("removetrack")}} events instead ({{bug(1442385)}}).
 - The primary name for {{domxref("RTCDataChannel")}} is now in fact `RTCDataChannel`, instead of being an alias for `DataChannel`. The name `DataChannel` is no longer supported ({{bug(1173851)}}).
 
 #### Canvas and WebGL

diff --git a/files/en-us/web/api/rtcdatachannelevent/channel/index.md b/files/en-us/web/api/rtcdatachannelevent/channel/index.md
@@ -53,7 +53,6 @@ pc.ondatachannel = function(event) {
 
 - {{DOMxRef("RTCPeerConnection.datachannel_event", "datachannel")}}
 - {{domxref("RTCDataChannel")}}
-- {{domxref("RTCPeerConnection.ondatachannel")}}
 - [A simple
   RTCDataChannel sample](/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample)
 - {{domxref("RTCPeerConnection")}}
diff --git a/files/en-us/web/api/rtcdatachannelevent/index.md b/files/en-us/web/api/rtcdatachannelevent/index.md
@@ -56,6 +56,5 @@ See [A simple RTCDataChannel sample](/en-US/docs/Web/API/WebRTC_API/Simple_RTCDa
 
 - [WebRTC](/en-US/docs/Web/API/WebRTC_API)
 - {{domxref("RTCDataChannel")}}
-- {{domxref("RTCPeerConnection.ondatachannel")}}
 - [A simple RTCDataChannel sample](/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample)
 - {{domxref("RTCPeerConnection")}} (the target interface for {{DOMxRef("RTCPeerConnection.datachannel_event", "datachannel")}} events)
diff --git a/files/en-us/web/api/rtcpeerconnection/addstream_event/index.md b/files/en-us/web/api/rtcpeerconnection/addstream_event/index.md
@@ -21,29 +21,33 @@ The obsolete **`addstream`** event is sent to an {{domxref("RTCPeerConnection")}
 
 > **Warning:** This event has been removed from the WebRTC specification. You should instead watch for the {{domxref("RTCPeerConnection.track_event", "track")}} event, which is sent for each media track added to the `RTCPeerConnection`.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{DOMxRef("MediaStreamEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>{{DOMxRef("RTCPeerConnection.onaddstream")}}</td>
-    </tr>
-  </tbody>
-</table>
-
 You can, similarly, watch for streams to be removed from the connection by monitoring the {{domxref("RTCPeerConnection.removestream_event", "removestream")}} event.
 
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('addstream', event => { });
+
+onaddstream = event => { };
+```
+
+## Event type
+
+An {{domxref("MediaStreamEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("MediaStreamEvent")}}
+
+## Event properties
+
+_A {{domxref("MediaStreamEvent")}} being an {{domxref("Event")}}, this event also implements these properties_.
+
+- {{domxref("MediaStreamEvent.stream")}} {{readOnlyInline}}
+  - : Contains the {{domxref("MediaStream")}} containing the stream associated with the event.
+
 ## Examples
 
 This example looks to determine if the user's browser supports the {{domxref("RTCPeerConnection.track_event", "track")}} event. If it does, a `track` event listener is set up; otherwise, an `addstream` event listener is set up. `pc` is an `RTCPeerConnection`.
@@ -75,6 +79,5 @@ pc.addEventListener("addstream", ev => doAddStream(ev.stream), false);
 ## See also
 
 - [WebRTC API](/en-US/docs/Web/API/WebRTC_API)
-- {{domxref("RTCPeerConnection.onaddstream")}}
 - {{domxref("RTCPeerConnection.addStream()")}}
 - {{domxref("MediaStreamEvent")}}
diff --git a/files/en-us/web/api/rtcpeerconnection/addtrack/index.md b/files/en-us/web/api/rtcpeerconnection/addtrack/index.md
@@ -102,7 +102,7 @@ async openCall(pc) {
 The result is a set of tracks being sent to the remote peer, with no stream
 associations. The handler for the {{DOMxRef("RTCPeerConnection/track_event", "track")}} event on the remote peer will be
 responsible for determining what stream to add each track to, even if that means adding
-them all to the same stream. The {{domxref("RTCPeerConnection.ontrack", "ontrack")}}
+them all to the same stream. The {{domxref("RTCPeerConnection.track_event", "ontrack")}}
 handler might look like this:
 
 ```js
@@ -278,5 +278,4 @@ returned by {{domxref("MediaStream.getTracks()")}} and passing them to
 - [WebRTC](/en-US/docs/Web/API/WebRTC_API)
 - [Introduction to the Real-time
   Transport Protocol (RTP)](/en-US/docs/Web/API/WebRTC_API/Intro_to_RTP)
-- {{domxref("RTCPeerConnection.ontrack")}}
 - {{DOMxRef("RTCPeerConnection/track_event", "track")}}
diff --git a/files/en-us/web/api/rtcpeerconnection/connectionstatechange_event/index.md b/files/en-us/web/api/rtcpeerconnection/connectionstatechange_event/index.md
@@ -11,34 +11,27 @@ browser-compat: api.RTCPeerConnection.connectionstatechange_event
 ---
 {{APIRef("WebRTC")}}
 
-The **`connectionstatechange`** event is sent to the {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}} event handler on an {{domxref("RTCPeerConnection")}} object after a new track has been added to an {{domxref("RTCRtpReceiver")}} which is part of the connection.
+The **`connectionstatechange`** event is sent to the `onconnectionstatechange` event handler on an {{domxref("RTCPeerConnection")}} object after a new track has been added to an {{domxref("RTCRtpReceiver")}} which is part of the connection.
 The new connection state can be found in {{domxref("RTCPeerConnection.connectionState", "connectionState")}},
 and is one of the string values:
 `new`, `connecting`, `connected`, `disconnected`,
 `failed`, or `closed`.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("Event")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler</th>
-      <td>
-        {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('connectionstatechange', event => { });
+
+onconnectionstatechange = event => { };
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
 
 ## Examples
 

diff --git a/files/en-us/web/api/rtcpeerconnection/createdatachannel/index.md b/files/en-us/web/api/rtcpeerconnection/createdatachannel/index.md
@@ -73,7 +73,7 @@ dataChannel = RTCPeerConnection.createDataChannel(label[, options]);
         data channels are negotiated in-band,
         where one side calls `createDataChannel`, and
         the other side listens to the {{domxref("RTCDataChannelEvent")}} event
-        using the {{DOMxRef("RTCPeerConnection.ondatachannel", "ondatachannel")}} event handler.
+        using the {{DOMxRef("RTCPeerConnection.datachannel_event", "ondatachannel")}} event handler.
         Alternatively (`true`),
         they can be negotiated out of-band,
         where both sides call `createDataChannel`