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>
diff --git a/htdocs/webrtc/peerconnection.js b/htdocs/webrtc/peerconnection.js
new file mode 100644
index 0000000..9161966
--- /dev/null
+++ b/htdocs/webrtc/peerconnection.js
@@ -0,0 +1,95 @@
+'use strict';
+
+/**
+ * A WebRTC peer connection helper. Tightly coupled with the signaling
+ * class.
+ */
+class WebRTCPeerConnection {
+ constructor(signaling, offering, configuration = null) {
+ // Set default configuration (if none provided)
+ if (configuration === null) {
+ configuration = {
+ iceServers: [{
+ urls: 'stun:stun.services.mozilla.com',
+ }],
+ };
+ }
+
+ // Create peer connection and bind events
+ const pc = new RTCPeerConnection(configuration);
+ pc._offering = offering; // Meh!
+ signaling.pc = pc;
+ pc.onnegotiationneeded = async () => {
+ console.log('Negotiation needed');
+
+ // Create offer (if required)
+ if (offering) {
+ console.log('Creating offer');
+ const description = await pc.createOffer();
+ await pc.setLocalDescription(description);
+ signaling.handleLocalDescription(description);
+ }
+ };
+ pc.signalingstatechange = () => {
+ console.log('Signaling state:', pc.signalingState);
+ };
+ pc.oniceconnectionstatechange = () => {
+ console.log('ICE connection state:', pc.iceConnectionState);
+ };
+ pc.onicegatheringstatechange = () => {
+ console.log('ICE gathering state:', pc.iceGatheringState);
+ };
+ pc.onconnectionstatechange = () => {
+ console.log('Connection state:', pc.connectionState);
+ };
+ pc.onicecandidate = (event) => {
+ signaling.handleLocalCandidate(event.candidate);
+ };
+ pc.onicecandidateerror = (event) => {
+ console.error('ICE candidate error:', event);
+ };
+ pc.ondatachannel = (event) => {
+ const dc = event.channel;
+ console.log('Incoming data channel:', dc.label);
+
+ // Bind events
+ this.bindDataChannelEvents(dc);
+ };
+
+ // Store configuration & signalling instance
+ this.pc = pc;
+ this.dcs = {};
+ }
+
+ createDataChannel(name, options = null) {
+ const pc = this.pc;
+
+ // Create data channel and bind events
+ const dc = pc.createDataChannel(name, options);
+ this.bindDataChannelEvents(dc);
+
+ // Store data channel and return
+ this.dcs[name] = dc;
+ return dc;
+ }
+
+ bindDataChannelEvents(dc) {
+ dc._name = dc.label; // Meh!
+ dc.onopen = () => {
+ console.log(dc._name, 'open');
+ };
+ dc.onclose = () => {
+ console.log(dc._name, 'closed');
+ };
+ dc.onerror = (event) => {
+ console.log(dc._name, 'error:', event);
+ };
+ dc.onbufferedamountlow = () => {
+ console.log(dc._name, 'buffered amount low:', dc.bufferedAmount);
+ };
+ dc.onmessage = (event) => {
+ const size = event.data.byteLength || event.data.size;
+ console.log(dc._name, 'incoming message (' + size + ' bytes)');
+ };
+ }
+}
diff --git a/htdocs/webrtc/signaling.js b/htdocs/webrtc/signaling.js
new file mode 100644
index 0000000..ff3e3b0
--- /dev/null
+++ b/htdocs/webrtc/signaling.js
@@ -0,0 +1,211 @@
+'use strict';
+
+/**
+ * A copy & paste signalling implementation.
+ *
+ * Tightly coupled with the WebRTC peer connection class.
+ */
+class CopyPasteSignaling {
+ constructor(pc = null) {
+ this._pc = pc;
+ this.pending_inbound_messages = [];
+ this.localIceCandidatesSent = false;
+ this.remoteIceCandidatesReceived = false;
+ this._onLocalDescriptionUpdate = null;
+ this._onRemoteDescriptionUpdate = null;
+ }
+
+ set pc(pc) {
+ this._pc = pc;
+
+ // Process all pending inbound messages
+ for (const message of this.pending_inbound_messages) {
+ this.receiveMessage(message.type, message.value);
+ }
+ }
+
+ set onLocalDescriptionUpdate(callback) {
+ this._onLocalDescriptionUpdate = callback;
+ }
+
+ set onRemoteDescriptionUpdate(callback) {
+ this._onRemoteDescriptionUpdate = callback;
+ }
+
+ handleLocalDescription(description, complete = false) {
+ console.log('Local description:', description);
+
+ // Send local description
+ this.sendMessage('description', description);
+ if (complete) {
+ this.localIceCandidatesSent = true;
+ this.maybeClose();
+ console.info('Local description complete');
+ }
+
+ // Call 'update'
+ if (this._onLocalDescriptionUpdate !== null) {
+ this._onLocalDescriptionUpdate(this._pc.localDescription);
+ }
+ }
+
+ async handleRemoteDescription(description, complete = false) {
+ // Set remote description
+ console.log('Setting remote description');
+ await this._pc.setRemoteDescription(description);
+ console.log('Remote description:', this._pc.remoteDescription);
+ if (complete) {
+ this.remoteIceCandidatesReceived = true;
+ this.maybeClose();
+ console.info('Remote description complete');
+ }
+
+ // Call 'update' (remote description)
+ if (this._onRemoteDescriptionUpdate !== null) {
+ this._onRemoteDescriptionUpdate(this._pc.remoteDescription);
+ }
+
+ // Create answer (if required)
+ if (!this._pc._offering) {
+ console.log(name, 'Creating answer');
+ description = await this._pc.createAnswer();
+
+ // Apply local description
+ await this._pc.setLocalDescription(description);
+ this.handleLocalDescription(description);
+ }
+ }
+
+ handleLocalCandidate(candidate) {
+ console.log('Local ICE candidate:', candidate);
+
+ // Send local candidate
+ this.sendMessage('candidate', candidate);
+
+ // Special handling for last candidate
+ if (candidate === null) {
+ this.localIceCandidatesSent = true;
+ this.maybeClose();
+ console.info('Local description complete');
+ }
+
+ // Call 'update' (local description)
+ if (this._onLocalDescriptionUpdate !== null) {
+ this._onLocalDescriptionUpdate(this._pc.localDescription);
+ }
+ }
+
+ async handleRemoteCandidate(candidate) {
+ console.log('Remote ICE candidate:', candidate);
+ if (candidate !== null) {
+ // Add remote candidate (if any)
+ await this._pc.addIceCandidate(candidate);
+ } else {
+ // Special handling for last candidate
+ this.remoteIceCandidatesReceived = true;
+ this.maybeClose();
+ console.info('Remote description complete');
+ }
+
+ // Call 'update' (remote description)
+ if (this._onRemoteDescriptionUpdate !== null) {
+ this._onRemoteDescriptionUpdate(this._pc.remoteDescription);
+ }
+ }
+
+ sendMessage(type, value) {
+ // Does nothing by default
+ }
+
+ receiveMessage(type, value) {
+ // Hold back messages until peer connection is set
+ if (this._pc === null) {
+ this.pending_inbound_messages.push({type: type, value: value});
+ }
+
+ // Handle message
+ switch (type) {
+ case 'description':
+ this.handleRemoteDescription(value).catch((error) => console.error(error));
+ break;
+ case 'candidate':
+ this.handleRemoteCandidate(value).catch((error) => console.error(error));
+ break;
+ default:
+ console.warn('Unknown message type:', type);
+ break;
+ }
+ }
+
+ maybeClose() {
+ // Close once all messages have been exchanged
+ if (this.localIceCandidatesSent && this.remoteIceCandidatesReceived) {
+ console.log('Closing signalling channel');
+ this.close();
+ }
+ }
+
+ close() {
+ // Does nothing by default
+ }
+}
+
+/**
+ * A signalling implementation intended for this signalling server:
+ * https://github.com/rawrtc/rawrtc-terminal-demo/tree/master/signaling
+ *
+ * Tightly coupled with the WebRTC peer connection class.
+ *
+ * Example: `ws://localhost/meow/0` when offering, and
+ * `ws://localhost/meow/1` when answering.
+ */
+class WebSocketSignaling extends CopyPasteSignaling {
+ constructor(wsUrl, pc = null) {
+ super(pc);
+ this.pending_outbound_messages = [];
+
+ const ws = new WebSocket(wsUrl);
+ ws.onopen = () => {
+ console.log('WS open');
+ for (const message of this.pending_outbound_messages) {
+ this.sendMessage(message.type, message.value);
+ }
+ };
+ ws.onclose = () => {
+ console.log('WS closed');
+ };
+ ws.onerror = (event) => {
+ console.error('WS error:', event);
+ };
+ ws.onmessage = (event) => {
+ const message = JSON.parse(event.data);
+ if (!('type' in message)) {
+ console.warn("Invalid message, did not contain a 'type' field");
+ return;
+ }
+ this.receiveMessage(message.type, message.value || null);
+ };
+
+ // Store web socket instance
+ this.ws = ws;
+ }
+
+ sendMessage(type, value) {
+ // Cache if not open, yet.
+ if (this.ws.readyState !== 1) {
+ this.pending_outbound_messages.push({type: type, value: value});
+ return;
+ }
+
+ // Send
+ this.ws.send(JSON.stringify({
+ type: type,
+ value: value
+ }));
+ }
+
+ close() {
+ super.close();
+ this.ws.close();
+ }
+}