Merge branch 'gh-pages' into unskip-test

README.md

@@ -2,6 +2,13 @@
 
 This is a repository for the WebRTC JavaScript code samples. All of the samples can be tested from [webrtc.github.io/samples](https://webrtc.github.io/samples).
 
+To run the samples locally
+```
+npm install && npm start
+```
+and open your browser on the page indicated.
+
+## Contributing
 We welcome contributions and bugfixes. Please see [CONTRIBUTING.md](https://github.com/webrtc/samples/blob/gh-pages/CONTRIBUTING.md) for details.
 
 ## Bugs

index.html

@@ -23,7 +23,7 @@
     <title>WebRTC samples</title>
 
     <link rel="icon" sizes="192x192" href="src/images/webrtc-icon-192x192.png">
-    <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
     <link rel="stylesheet" href="src/css/main.css"/>
 
     <style>

src/content/insertable-streams/endtoend-encryption/index.html

@@ -56,9 +56,9 @@ <h2>Middlebox</h2>
     </p>
 
     <div id="buttons">
-        <button id="start">Start</button>
-        <button id="call" disabled>Call</button>
-        <button id="hangup" disabled>Hang Up</button>
+        <button id="startButton">Start</button>
+        <button id="callButton" disabled>Call</button>
+        <button id="hangupButton" disabled>Hang Up</button>
     </div>
     <div id="status"></div>
 

src/content/insertable-streams/endtoend-encryption/js/main.js

@@ -15,9 +15,9 @@ const video1 = document.querySelector('video#video1');
 const video2 = document.querySelector('video#video2');
 const videoMonitor = document.querySelector('#video-monitor');
 
-const startButton = document.querySelector('button#start');
-const callButton = document.querySelector('button#call');
-const hangupButton = document.querySelector('button#hangup');
+const startButton = document.getElementById('startButton');
+const callButton = document.getElementById('callButton');
+const hangupButton = document.getElementById('hangupButton');
 
 const cryptoKey = document.querySelector('#crypto-key');
 const cryptoOffsetBox = document.querySelector('#crypto-offset');

src/content/insertable-streams/endtoend-encryption/js/test.js

@@ -0,0 +1,79 @@
+/*
+ *  Copyright (c) 2022 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+/* eslint-env node, mocha */
+
+'use strict';
+const webdriver = require('selenium-webdriver');
+const seleniumHelpers = require('../../../../../test/webdriver');
+
+let driver;
+const path = '/src/content/insertable-streams/endtoend-encryption/index.html';
+const url = `${process.env.BASEURL ? process.env.BASEURL : ('file://' + process.cwd())}${path}`;
+
+describe('insertable streams e2ee', () => {
+  before(() => {
+    driver = seleniumHelpers.buildDriver();
+  });
+  after(() => {
+    return driver.quit();
+  });
+
+  beforeEach(() => {
+    return driver.get(url);
+  });
+
+  it('establishes a connection and hangs up', async () => {
+    await driver.findElement(webdriver.By.id('startButton')).click();
+    await driver.wait(() => driver.executeScript(() => {
+      return localStream !== null; // eslint-disable-line no-undef
+    }));
+
+    await driver.wait(() => driver.findElement(webdriver.By.id('callButton')).isEnabled());
+    await driver.findElement(webdriver.By.id('callButton')).click();
+
+    await Promise.all([
+      await driver.wait(() => driver.executeScript(() => {
+        return startToEnd && startToEnd.pc1 && startToEnd.pc1.connectionState === 'connected'; // eslint-disable-line no-undef
+      })),
+      await driver.wait(() => driver.executeScript(() => {
+        return startToEnd && startToEnd.pc2 && startToEnd.pc2.connectionState === 'connected'; // eslint-disable-line no-undef
+      })),
+    ]);
+
+    await driver.wait(() => driver.executeScript(() => {
+      return document.getElementById('video2').readyState === HTMLMediaElement.HAVE_ENOUGH_DATA;
+    }));
+
+    await driver.findElement(webdriver.By.id('hangupButton')).click();
+
+    await driver.wait(() => driver.executeScript(() => {
+      return startToEnd && startToEnd.pc1 && startToEnd.pc1.connectionState === 'closed'; // eslint-disable-line no-undef
+    }));
+  });
+
+  it('establisheѕ a encrypted connection with a key set prior to connecting', async () => {
+    await driver.findElement(webdriver.By.id('startButton')).click();
+    await driver.wait(() => driver.executeScript(() => {
+      return localStream !== null; // eslint-disable-line no-undef
+    }));
+
+    await driver.findElement(webdriver.By.id('crypto-key'))
+        .sendKeys('secret\n');
+    await driver.wait(() => driver.executeScript(() => {
+      return document.getElementById('banner').innerText === 'Encryption is ON';
+    }));
+
+    await driver.wait(() => driver.findElement(webdriver.By.id('callButton')).isEnabled());
+    await driver.findElement(webdriver.By.id('callButton')).click();
+
+    await driver.wait(() => driver.executeScript(() => {
+      return document.getElementById('video2').readyState === HTMLMediaElement.HAVE_ENOUGH_DATA;
+    }));
+  });
+});
+