1 files changed, 86 insertions, 0 deletions
diff --git a/tests/manual/widgets/webrtc/index.html b/tests/manual/widgets/webrtc/index.html
new file mode 100644
index 000000000..433d643c3
--- /dev/null
+++ b/tests/manual/widgets/webrtc/index.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html>
+    <head>
+        <style>
+            body {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-wrap: wrap;
+                flex-flow: column;
+            }
+            buttons {
+                justify-content: space-around;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="buttons" >
+            <input value ="getDisplayMedia" onclick="getDisplayMedia(true, true);" type="button">
+            <input value = "chooseDesktopMedia" onclick="chooseDesktopMedia();" type="button">
+            <input value ="Stop" onclick="stop();" type="button">
+        </div>
+        <div id="content"></div>
+    </body>
+    <script>
+        const EXTENSION_ID = "nkeimhogjdpnpccoofpliimaahmaaome"; // hangout services extension
+        const content = document.getElementById("content");
+        const video = document.createElement("video");
+        video.setAttribute("width", 640);
+        video.setAttribute("height", 640);
+        video.setAttribute("style", "background-color: black;");
+        content.appendChild(video);
+
+        async function getDisplayMedia(v = true, a = true) {
+            stop();
+            navigator.mediaDevices.getDisplayMedia({ video: v, audio: a })
+            .then(stream => {
+                start(stream);
+            }, error => {
+            console.error(error);
+            });
+        }
+
+        function chooseDesktopMedia() {
+            stop();
+            // Connect to the 'chooseDesktopMedia' listener within the hangout services extension.
+            let port = chrome.runtime.connect(EXTENSION_ID, {name: "chooseDesktopMedia"})
+
+            // The 'chooseDesktopMedia' api returns a streamId that
+            // identifies a media source in the constraints of 'getUserMedia'
+            // (see chromeMediaSourceId)
+            port.onMessage.addListener(result => {
+                navigator.mediaDevices.getUserMedia({
+                    video: {
+                        mandatory: {
+                            chromeMediaSource: "desktop",
+                            chromeMediaSourceId: result.value.streamId
+                        },
+                    }
+                }).then(stream => {
+                    start(stream);
+                }, error => {
+                    console.error(error);
+                })
+            })
+
+            // Trigger the listener on the other side,
+            // we should see the picker dialog after this call.
+            port.postMessage({method: "chooseDesktopMedia"})
+        }
+
+        function stop() {
+            if (video.srcObject)
+                for (const track of video.srcObject.getTracks())
+                    track.stop()
+            video.srcObject = null;
+            video.setAttribute("style", "background-color: black;");
+        }
+
+        function start(stream) {
+            video.srcObject = stream;
+            video.play();
+        }
+
+    </script>
+</html>