Squashed 'third_party/rawrtc/rawrtc/' content from commit aa3ae4b24
Change-Id: I38a655a4259b62f591334e90a1315bd4e7e4d8ec
git-subtree-dir: third_party/rawrtc/rawrtc
git-subtree-split: aa3ae4b247275cc6e69c30613b3a4ba7fdc82d1b
diff --git a/htdocs/webrtc/index.html b/htdocs/webrtc/index.html
new file mode 100644
index 0000000..f8b27b9
--- /dev/null
+++ b/htdocs/webrtc/index.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+ <meta charset="UTF-8">
+ <title>WebRTC Data Channel Example</title>
+ <style>
+ @keyframes new-fade {
+ 0% {
+ background-color: #fffb85;
+ }
+ 100% {
+ background-color: transparent;
+ }
+ }
+
+ html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ }
+ body {
+ height: 100vh;
+ display: flex;
+ }
+
+ main {
+ width: 100%;
+ display: flex;
+ flex-grow: 1;
+ flex-wrap: nowrap;
+ }
+
+ section, aside {
+ padding: 5px;
+ flex-grow: 1;
+ flex-basis: 0;
+ }
+ aside {
+ overflow-y: auto;
+ }
+
+ section textarea {
+ width: 100%;
+ }
+
+ #log {
+ margin: 0;
+ padding: 0;
+ flex-grow: 1;
+ flex-basis: 0;
+ }
+ #log > * {
+ margin: 2px 0;
+ padding: 0 6px;
+ animation: new-fade 1.5s ease-out 1;
+ }
+ #log .debug, #log .log {
+ border-left: 2px solid lightgrey;
+ }
+ #log .error {
+ border-left: 2px solid red;
+ }
+ #log .info {
+ border-left: 2px solid cornflowerblue;
+ }
+ #log .warn {
+ border-left: 2px solid orange;
+ }
+ </style>
+</head>
+<body>
+
+<main>
+ <section>
+ <form autocomplete="off">
+ <!-- Role -->
+ <label for="role">Role: Offering</label>
+ <input type="checkbox" id="role" checked>
+ <br>
+
+ <!-- Message size to be used -->
+ <label for="message-size">Message size (bytes):</label>
+ <input id="message-size" type="number" name="message-size" value="16384" step="16384">
+ <br>
+
+ <!-- WebSocket URL & Start button -->
+ <input type="text" id="ws-url" placeholder="Optional Server URL">
+ <button type="button" id="start" disabled>Start</button>
+ <br><hr>
+
+ <!-- Copy local description from this textarea -->
+ Copy local description:<br>
+ <textarea rows="15" id="local-description" disabled readonly></textarea>
+
+ <!-- Paste remote description into this textarea -->
+ Paste remote description:<br>
+ <textarea rows="15" id="remote-description" disabled></textarea>
+ <br>
+ </form>
+ </section>
+ <aside>
+ <pre id="log"></pre>
+ </aside>
+</main>
+
+<!-- Import dependencies -->
+<script src="https://webrtc.github.io/adapter/adapter-6.1.1.js"></script>
+<script src="signaling.js"></script>
+<script src="peerconnection.js"></script>
+
+<!-- UI code -->
+<script>
+'use strict';
+
+// Get elements
+const roleCheckbox = document.getElementById('role');
+const messageSizeInput = document.getElementById('message-size');
+const localDescriptionTextarea = document.getElementById('local-description');
+const remoteDescriptionTextarea = document.getElementById('remote-description');
+const wsUrlInput = document.getElementById('ws-url');
+const startButton = document.getElementById('start');
+const logPre = document.getElementById('log');
+
+// Load & store persistent values
+if (typeof(Storage) !== 'undefined') {
+ const persistentElements = [
+ ['role', 'checked', (value) => value === 'true'],
+ ['message-size', 'value'],
+ ['ws-url', 'value']
+ ];
+ for (const [id, property, transform] of persistentElements) {
+ let value = localStorage.getItem(id);
+ const element = document.getElementById(id);
+ if (transform !== undefined) {
+ value = transform(value);
+ }
+ if (value !== null) {
+ element[property] = value;
+ }
+ element.addEventListener('change', () => {
+ localStorage.setItem(id, element[property]);
+ });
+ }
+}
+
+// Display console logs in the browser as well
+for (const name of ['debug', 'error', 'info', 'log', 'warn']) {
+ const method = window.console[name];
+ window.console[name] = function() {
+ method.apply(null, arguments);
+ const entry = document.createElement('div');
+ entry.classList.add(name);
+ for (let i = 0; i < arguments.length; ++i) {
+ let item = arguments[i];
+ if (typeof arguments[i] === 'object') {
+ entry.innerHTML += JSON.stringify(item, null, 2) + ' ';
+ } else {
+ entry.innerHTML += item + ' ';
+ }
+ }
+ logPre.prepend(entry);
+ };
+}
+
+// Auto-select all text when clicking local description
+localDescriptionTextarea.addEventListener('click', function() {
+ this.select();
+});
+
+// Bind start button & enable
+startButton.addEventListener('click', () => {
+ roleCheckbox.disabled = true;
+ messageSizeInput.disabled = true;
+ wsUrlInput.disabled = true;
+ startButton.disabled = true;
+ localDescriptionTextarea.disabled = false;
+ start(roleCheckbox.checked);
+});
+startButton.disabled = false;
+
+const start = (offering) => {
+ console.info('Starting with role:', offering ? 'Offering' : 'Answering');
+
+ // Create signaling instance
+ const wsUrl = wsUrlInput.value;
+ let signaling;
+ if (wsUrl === '') {
+ signaling = new CopyPasteSignaling();
+ } else {
+ signaling = new WebSocketSignaling(wsUrl + (offering ? '/1' : '/0'));
+ }
+ signaling.onLocalDescriptionUpdate = (description) => {
+ localDescriptionTextarea.value = JSON.stringify(description);
+
+ // Enable remote description once local description has been set
+ remoteDescriptionTextarea.disabled = false;
+ };
+ signaling.onRemoteDescriptionUpdate = (description) => {
+ remoteDescriptionTextarea.value = JSON.stringify(description);
+ };
+
+ // Create peer connection instance
+ const pc = new WebRTCPeerConnection(signaling, offering);
+ window.pc = pc;
+
+ // Apply remote description when pasting
+ const onRemoteDescriptionTextareaChange = () => {
+ // Remove event listener
+ remoteDescriptionTextarea.oninput = null;
+ remoteDescriptionTextarea.onchange = null;
+
+ // Apply remote description once (needs to include candidates)
+ const description = JSON.parse(remoteDescriptionTextarea.value);
+ signaling.handleRemoteDescription(description, true)
+ .catch((error) => console.error(error));
+
+ // Make read-only
+ remoteDescriptionTextarea.readOnly = true;
+ };
+ remoteDescriptionTextarea.oninput = onRemoteDescriptionTextareaChange;
+ remoteDescriptionTextarea.onchange = onRemoteDescriptionTextareaChange;
+
+ // Enable remote description early (if not offering)
+ if (!offering) {
+ remoteDescriptionTextarea.disabled = false;
+ }
+
+ // Get message size
+ const messageSize = parseInt(messageSizeInput.value);
+ if (isNaN(messageSize)) {
+ throw 'Invalid message size value';
+ }
+
+ // Create data channels
+ const createDataChannelWithName = (
+ name, options = null, createOnOpenWithName = null, createOnOpenOptions = null
+ ) => {
+ const dc = pc.createDataChannel(name, options);
+ const defaultOnOpenHandler = dc.onopen;
+ dc.onopen = (event) => {
+ defaultOnOpenHandler(event);
+ if (createOnOpenWithName !== null) {
+ window.setTimeout(() => {
+ createDataChannelWithName(createOnOpenWithName, createOnOpenOptions);
+ }, 1000);
+ }
+ if (messageSize > pc.pc.sctp.maxMessageSize) {
+ console.warn(dc._name, 'message size (' + messageSize + ') > maximum message size' +
+ ' (' + pc.pc.sctp.maxMessageSize + ')');
+ }
+ let data = new Uint8Array(messageSize);
+ console.log(dc._name, 'outgoing message (' + data.byteLength + ' bytes)');
+ try {
+ dc.send(data);
+ } catch (error) {
+ if (error.name === 'TypeError') {
+ console.error(dc._name, 'message too large to send');
+ } else {
+ console.error(dc._name, 'Unknown error:', error.name);
+ }
+ }
+ };
+ };
+ createDataChannelWithName('cat-noises', {
+ negotiated: true,
+ id: 0,
+ }, 'dinosaur-noises');
+};
+
+// Introduction
+console.info("Hello! Press 'Start' when you're ready.");
+</script>
+
+</body>
+</html>