Initial commit

Author: markandrus

.eslintrc

@@ -0,0 +1,92 @@
+root: true
+
+env:
+  es6: true
+  node: true
+  browser: true
+
+parserOptions:
+  ecmaVersion: 2018
+
+extends:
+  'eslint:recommended'
+
+rules:
+  array-bracket-spacing: 2
+  block-spacing: 2
+  callback-return: 0
+  camelcase: 2
+  comma-spacing: 2
+  comma-style: [2, last]
+  computed-property-spacing: 2
+  consistent-return: 1
+  consistent-this: [2, self]
+  dot-location: [2, property]
+  dot-notation: 2
+  eol-last: 2
+  eqeqeq: 2
+  func-style: [2, declaration]
+  handle-callback-err: 2
+  key-spacing: 2
+  linebreak-style: [2, unix]
+  new-cap: 2
+  new-parens: 2
+  no-alert: 2
+  no-caller: 2
+  no-console: 1
+  no-const-assign: 2
+  no-else-return: 2
+  no-eval: 2
+  no-extend-native: 2
+  no-extra-bind: 2
+  no-implicit-coercion: 0
+  no-implied-eval: 2
+  no-invalid-this: 2
+  no-iterator: 2
+  no-labels: 2
+  no-lone-blocks: 2
+  no-lonely-if: 2
+  no-loop-func: 2
+  no-multiple-empty-lines: 2
+  no-nested-ternary: 0
+  no-new-object: 2
+  no-new-require: 2
+  no-path-concat: 2
+  no-process-env: 2
+  no-process-exit: 2
+  no-proto: 2
+  no-return-assign: 2
+  no-shadow: 0
+  no-shadow-restricted-names: 2
+  no-script-url: 2
+  no-self-compare: 2
+  no-sequences: 2
+  no-spaced-func: 2
+  no-throw-literal: 2
+  no-trailing-spaces: 2
+  no-undef-init: 2
+  no-undefined: 2
+  no-unneeded-ternary: 2
+  no-unused-expressions: 2
+  no-use-before-define: [2, nofunc]
+  no-useless-call: 2
+  no-useless-concat: 2
+  no-warning-comments: 1
+  no-with: 1
+  object-curly-spacing: [2, always]
+  one-var: [2, never]
+  operator-assignment: [2, always]
+  quote-props: [2, consistent]
+  quotes: [2, single]
+  semi: [2, always]
+  keyword-spacing: 2
+  space-before-blocks: [2, always]
+  space-before-function-paren: [2, {
+    anonymous: 'never',
+    named: 'never',
+    asyncArrow: 'always'
+  }]
+  space-infix-ops: 2
+  space-unary-ops: 2
+  spaced-comment: 1
+  strict: [2, global]

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

README.md

@@ -0,0 +1,88 @@
+node-webrtc-examples
+====================
+
+This project presents a few example applications using node-webrtc.
+
+- [audio-video-loopback](examples/audio-video-loopback): relays incoming audio
+  and video using RTCRtpTransceivers.
+- [ping-pong](examples/ping-pong): simple RTCDataChannel ping/pong example.
+- [pitch-detector](examples/pitch-detector): pitch detector implemented using
+  RTCAudioSink and RTCDataChannel.
+- [sine-wave](examples/sine-wave): generates a sine wave using RTCAudioSource;
+  frequency control implemented using RTCDataChannel.
+- [sine-wave-stereo](examples/sine-wave-stereo): generates a stereo sine wave
+  using RTCAudioSource; panning control implemented using RTCDataChannel.
+- [video-compositing](examples/video-compositing): uses RTCVideoSink,
+  [node-canvas](https://github.com/Automattic/node-canvas), and RTCVideoSource
+  to draw spinning text on top of an incoming video.
+
+Usage
+-----
+
+Install the project's dependencies and run the tests before starting the
+application server:
+
+```
+npm install
+npm test
+npm start
+```
+
+Then, navigate to [http://localhost:3000](http://localhost:3000).
+
+Architecture
+------------
+
+Each example application under [examples/](examples) has a Client and Server
+component. RTCPeerConnection negotiation is supported via a REST API (described
+below), and is abstracted away from each example application. Code for
+RTCPeerConnection negotiation lives under [lib/](lib).
+
+### RTCPeerConnection Negotiation
+
+RTCPeerConnections are negotiated via REST API. The Server always offers (with
+host candidates) and the Client always answers. In order to negotiate a new
+RTCPeerConnection, the Client first POSTs to `/connections`. The Server responds
+with an RTCPeerConnection ID and SDP offer. Finally, the Client POSTs an SDP
+answer to the RTCPeerConnection's URL.
+
+```
+Client                                               Server
+  |                                                     |
+  |  POST /connections                                  |
+  |                                                     |
+  |---------------------------------------------------->|
+  |                                                     |
+  |                                             200 OK  |
+  |  { "id": "$ID", "localDescription": "$SDP_OFFER" }  |
+  |                                                     |
+  |<----------------------------------------------------|
+  |                                                     |
+  |  POST /connections/$ID/remote-description           |
+  |  $SDP_ANSWER                                        |
+  |                                                     |
+  |---------------------------------------------------->|
+  |                                                     |
+  |                                             200 OK  |
+  |                                                     |
+  |<----------------------------------------------------|
+```
+
+### RTCPeerConnection Teardown
+
+RTCPeerConnections can be proactively torn down by sending a DELETE to the
+RTCPeerConnection's URL; otherwise, ICE disconnection or failure, if unresolved
+within the `timeToReconnect` window, will also trigger teardown. The default
+`timeToReconnect` value is 10 s.
+
+```
+Client                                               Server
+  |                                                     |
+  |  DELETE /connections/$ID                            |
+  |                                                     |
+  |---------------------------------------------------->|
+  |                                                     |
+  |                                             200 OK  |
+  |                                                     |
+  |<----------------------------------------------------|
+```

examples/audio-video-loopback/client.js

@@ -0,0 +1,49 @@
+'use strict';
+
+const createExample = require('../../lib/browser/example');
+
+const description = 'This example simply relays incoming audio and video using \
+RTCRtpTransceivers.';
+
+const localVideo = document.createElement('video');
+localVideo.autoplay = true;
+localVideo.muted = true;
+
+const remoteVideo = document.createElement('video');
+remoteVideo.autoplay = true;
+
+async function beforeAnswer(peerConnection) {
+  const localStream = await window.navigator.mediaDevices.getUserMedia({
+    audio: true,
+    video: true
+  });
+
+  localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
+
+  localVideo.srcObject = localStream;
+
+  const remoteStream = new MediaStream(peerConnection.getReceivers().map(receiver => receiver.track));
+  remoteVideo.srcObject = remoteStream;
+
+  // NOTE(mroberts): This is a hack so that we can get a callback when the
+  // RTCPeerConnection is closed. In the future, we can subscribe to
+  // "connectionstatechange" events.
+  const { close } = peerConnection;
+  peerConnection.close = function() {
+    remoteVideo.srcObject = null;
+
+    localVideo.srcObject = null;
+
+    localStream.getTracks().forEach(track => track.stop());
+
+    return close.apply(this, arguments);
+  };
+}
+
+createExample('audio-video-loopback', description, { beforeAnswer });
+
+const videos = document.createElement('div');
+videos.className = 'grid';
+videos.appendChild(localVideo);
+videos.appendChild(remoteVideo);
+document.body.appendChild(videos);

examples/audio-video-loopback/server.js

@@ -0,0 +1,12 @@
+'use strict';
+
+function beforeOffer(peerConnection) {
+  const audioTransceiver = peerConnection.addTransceiver('audio');
+  const videoTransceiver = peerConnection.addTransceiver('video');
+  return Promise.all([
+    audioTransceiver.sender.replaceTrack(audioTransceiver.receiver.track),
+    videoTransceiver.sender.replaceTrack(videoTransceiver.receiver.track)
+  ]);
+}
+
+module.exports = { beforeOffer };

examples/ping-pong/client.js

@@ -0,0 +1,50 @@
+'use strict';
+
+const createExample = require('../../lib/browser/example');
+
+const description = 'This example sends a “ping” from the client \
+over an RTCDataChannel. Upon receipt, node-webrtc responds with a \
+“pong”. Open the Console to see the pings and pongs…';
+
+function beforeAnswer(peerConnection) {
+  let dataChannel = null;
+  let interval = null;
+
+  function onMessage({ data }) {
+    if (data === 'pong') {
+      console.log('received pong');
+    }
+  }
+
+  function onDataChannel({ channel }) {
+    if (channel.label !== 'ping-pong') {
+      return;
+    }
+
+    dataChannel = channel;
+    dataChannel.addEventListener('message', onMessage);
+
+    interval = setInterval(() => {
+      console.log('sending ping');
+      dataChannel.send('ping');
+    }, 1000);
+  }
+
+  peerConnection.addEventListener('datachannel', onDataChannel);
+
+  // NOTE(mroberts): This is a hack so that we can get a callback when the
+  // RTCPeerConnection is closed. In the future, we can subscribe to
+  // "connectionstatechange" events.
+  const { close } = peerConnection;
+  peerConnection.close = function() {
+    if (dataChannel) {
+      dataChannel.removeEventListener('message', onMessage);
+    }
+    if (interval) {
+      clearInterval(interval);
+    }
+    return close.apply(this, arguments);
+  };
+}
+
+createExample('ping-pong', description, { beforeAnswer });

examples/ping-pong/server.js

@@ -0,0 +1,24 @@
+'use strict';
+
+function beforeOffer(peerConnection) {
+  const dataChannel = peerConnection.createDataChannel('ping-pong');
+
+  function onMessage({ data }) {
+    if (data === 'ping') {
+      dataChannel.send('pong');
+    }
+  }
+
+  dataChannel.addEventListener('message', onMessage);
+
+  // NOTE(mroberts): This is a hack so that we can get a callback when the
+  // RTCPeerConnection is closed. In the future, we can subscribe to
+  // "connectionstatechange" events.
+  const { close } = peerConnection;
+  peerConnection.close = function() {
+    dataChannel.removeEventListener('message', onMessage);
+    return close.apply(this, arguments);
+  };
+}
+
+module.exports = { beforeOffer };