Add code examples

index.html

@@ -65,6 +65,67 @@ <h3>Use case #2: Efficiency enhancements during RTC</h3>
         </p>
       </section>
     </section>
+    <section id="examples">
+      <h2>Examples</h2>
+      <p>The <a data-cite="screen-capture/#example">basic example from
+        the Screen Capture specification</a> is extended below by passing
+        to <code>getDisplayMedia()</code> a <code>CaptureController</code>
+        object. An event handler is set on that object in order to receive
+        {{CapturedMouseEvent}}s with the mouse coordinates over the captured
+        surface.
+      </p>
+<pre class="example highlight">try {
+  let controller = new CaptureController();
+  controller.oncapturedmousechange = (event) => {
+    console.log(`Mouse coordinates: x=${event.surfaceX}, y=${event.surfaceY}`);
+  };
+  let mediaStream = await navigator.mediaDevices.getDisplayMedia({
+    video: true,
+    controller: controller,
+  });
+  videoElement.srcObject = mediaStream;
+} catch (e) {
+  console.log(`Unable to acquire screen capture: ${e}`);
+}</pre>
+</p>
+<p>In the following example, the
+  <a data-cite="screen-capture/#dfn-cursor">cursor constraint</a> is used to
+  omit the cursor from the captured display surface. The mouse coordinates are
+  transmitted via a <a data-cite="webrtc/#rtcdatachannel">RTCDataChannel</a> to
+  the receiving application, which can then redraw the cursor.</p>
+<pre class="example highlight">
+// An peer-to-peer connection is established and a data channel created for
+// transmitting the mouse events.
+const configuration = {iceServers: [{urls: 'stun:stun.example.org'}]};
+let pc = new RTCPeerConnection(configuration);
+let channel = pc.createDataChannel('mouse-events', {negotiated: true, id: 0});
+
+// On the capturing side, the capture session is initialized with the mouse
+// cursor ommitted from the captured surface. The mouse coordinates are
+// transmitted via the data channel.
+let controller = new CaptureController();
+controller.oncapturedmousechange = (event) => {
+  channel.send(JSON.stringify({x: event.surfaceX, y: event.surfaceY}));
+};
+let mediaStream = await navigator.mediaDevices.getDisplayMedia({
+  video: { advanced: [{cursor: "never"}] },
+  controller: controller,
+});
+pc.addTrack(mediaStream.getVideoTracks()[0], mediaStream);
+...
+
+// On the receiving side, the remote stream is rendered in a video and the
+// coordinates received from the data channel are used to redraw the cursor.
+let remoteView = document.getElementById('my-video-element');
+channel.onmessage = ({data}) => redrawCursor(removeView, JSON.parse(data));
+pc.ontrack = ({track, streams}) => {
+  track.onunmute = () => {
+    if (remoteView.srcObject) return;
+    remoteView.srcObject = streams[0];
+  };
+};
+...</pre>
+    </section>
     <section id="captured-mouse-change-event">
       <h2>CapturedMouseEvent interface</h2>
       <p>