Add PhoenixSignaling

README.md

@@ -15,14 +15,20 @@ The package can be installed by adding `membrane_webrtc_plugin` to your list of
 ```elixir
 def deps do
   [
-    {:membrane_webrtc_plugin, "~> 0.24.0"}
+    {:membrane_webrtc_plugin, "~> 0.25.0"}
   ]
 end
 ```
 
 ## Usage
 
 The `examples` directory shows how to send and receive streams from a web browser.
+There are following two demos there:
+* `phoenix_signaling` - showcasing simple Phoenix application that uses `Membrane.WebRTC.PhoenixSignaling` to echo stream captured
+from the user's browser and sent via WebRTC. See `assets/phoenix_signaling/README.md` for details on how to run the demo.
+* `webrtc_signaling` - it consists of two scripts: `file_to_browser.exs` and `browser_to_file.exs`. The first one display stream from
+the fixture file in the user's browser. The later one captures user's camera input from the browser and saves it in the file.
+To run one of these demos, type: `elixir <script_name>` and visit `http://localhost:4000`.
 
 ## Copyright and License
 

examples/phoenix_signaling/.formatter.exs

@@ -0,0 +1,5 @@
+[
+  import_deps: [:phoenix],
+  plugins: [Phoenix.LiveView.HTMLFormatter],
+  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}"]
+]

examples/phoenix_signaling/.gitignore

@@ -0,0 +1,37 @@
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where 3rd-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Temporary files, for example, from tests.
+/tmp/
+
+# Ignore package tarball (built via "mix hex.build").
+phoenix_signaling-*.tar
+
+# Ignore assets that are produced by build tools.
+/priv/static/assets/
+
+# Ignore digested assets cache.
+/priv/static/cache_manifest.json
+
+# In case you use Node.js/npm, you want to ignore these.
+npm-debug.log
+/assets/node_modules/
+

examples/phoenix_signaling/README.md

@@ -0,0 +1,56 @@
+# PhoenixSignaling
+
+To start your Phoenix server:
+
+  * Run `mix setup` to install and setup dependencies
+  * Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
+
+Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
+You should be able to see a video player displaying video captured from your camera.
+
+## How to use PhoenixSignaling in your own Phoenix project?
+
+1. Create new socket in your application endpoint, using the `Membrane.WebRTC.PhoenixSignaling.Socket`, for instance at `/signaling` path:
+```
+  socket "/signaling", Membrane.WebRTC.PhoenixSignaling.Socket,
+  websocket: true,
+  longpoll: false
+```
+2. Create a Phoenix signaling channel with desired signaling ID, for instance in your controller:
+```
+signaling = Membrane.WebRTC.PhoenixSignaling.new("<signaling_id>")
+```
+
+>Please note that `signaling_id` is expected to be unique for each WebRTC connection about to be
+>estabilished. You can, for instance:
+>1. Generate unique id with `:uuid` package and assign to the connection in the page controller:
+>```
+>unique_id = UUID.uuid4()
+>render(conn, :home, layout: false, signaling_id: unique_id)
+>```
+>
+>2. Generate HTML based on HEEx template, using the previously set assign:
+>```
+><video id="videoPlayer" controls muted autoplay signaling_id={@signaling_id}></video>
+>```
+>
+>3. Access it in your client code:
+>```
+>const videoPlayer = document.getElementById('videoPlayer');
+>const signalingId = videoPlayer.getAttribute('signaling_id');
+>```
+
+
+3. Use the Phoenix Socket to exchange WebRTC signaling data.
+```
+let socket = new Socket("/singaling", {params: {token: window.userToken}})
+socket.connect()
+let channel = socket.channel('<signaling_id>')
+channel.join()
+  .receive("ok", resp => { console.log("Joined successfully", resp)
+    // here you can exchange WebRTC data
+  })
+  .receive("error", resp => { console.log("Unable to join", resp) })
+```
+
+Visit `assets/js/app.js` to see how WebRTC exchange can be done.

examples/phoenix_signaling/assets/js/app.js

@@ -0,0 +1,107 @@
+// If you want to use Phoenixdle method=PUT/DELETE in forms and buttons.
+import "phoenix_html"
+import {Socket} from "phoenix"
+
+async function startEgressConnection(channel, topic) {
+const pcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' },] };
+const mediaConstraints = { video: true, audio: true }
+
+const connStatus = document.getElementById("status");
+  const localStream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
+  const pc = new RTCPeerConnection(pcConfig);
+
+  pc.onicecandidate = event => {
+    if (event.candidate === null) return;
+    console.log("Sent ICE candidate:", event.candidate);
+    channel.push(topic, JSON.stringify({ type: "ice_candidate", data: event.candidate }));
+  };
+
+  pc.onconnectionstatechange = () => {
+    if (pc.connectionState == "connected") {
+      const button = document.createElement('button');
+      button.innerHTML = "Disconnect";
+      button.onclick = () => {
+        localStream.getTracks().forEach(track => track.stop())
+      }
+      connStatus.innerHTML = "Connected ";
+      connStatus.appendChild(button);
+    }
+  }
+
+  for (const track of localStream.getTracks()) {
+    pc.addTrack(track, localStream);
+  }
+
+  channel.on(topic, async payload=> {
+    type = payload.type
+    data = payload.data
+
+    switch (type) {
+      case "sdp_answer":
+        console.log("Received SDP answer:", data);
+        await pc.setRemoteDescription(data);
+        break;
+      case "ice_candidate":
+        console.log("Received ICE candidate:", data);
+        await pc.addIceCandidate(data);
+        break;
+    }
+  })
+
+  const offer = await pc.createOffer();
+  await pc.setLocalDescription(offer);
+  console.log("Sent SDP offer:", offer)
+  channel.push(topic, JSON.stringify({ type: "sdp_offer", data: offer }));
+}
+
+async function startIngressConnection(channel, topic) {
+  videoPlayer.srcObject = new MediaStream();
+
+  const pc = new RTCPeerConnection(pcConfig);
+  pc.ontrack = event => videoPlayer.srcObject.addTrack(event.track);
+  pc.onicecandidate = event => {
+    if (event.candidate === null) return;
+
+    console.log("Sent ICE candidate:", event.candidate);
+    channel.push(topic, JSON.stringify({ type: "ice_candidate", data: event.candidate }));
+  };
+
+  channel.on(topic, async payload => {
+    type = payload.type
+    data = payload.data
+
+    switch (type) {
+      case "sdp_offer":
+        console.log("Received SDP offer:", data);
+        await pc.setRemoteDescription(data);
+        const answer = await pc.createAnswer();
+        await pc.setLocalDescription(answer);
+        channel.push(topic, JSON.stringify({ type: "sdp_answer", data: answer }));
+        console.log("Sent SDP answer:", answer)
+        break;
+      case "ice_candidate":
+        console.log("Recieved ICE candidate:", data);
+        await pc.addIceCandidate(data);
+    }
+  });
+}
+const videoPlayer = document.getElementById('videoPlayer');
+const signalingId = videoPlayer.getAttribute('signaling_id');
+
+let socket = new Socket("/signaling", {params: {token: window.userToken}})
+socket.connect()
+let egressChannel = socket.channel(`${signalingId}_egress`)
+egressChannel.join()
+  .receive("ok", resp => { console.log("Joined successfully", resp)
+    startEgressConnection(egressChannel, `${signalingId}_egress`);
+  })
+  .receive("error", resp => { console.log("Unable to join", resp) })
+
+const pcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' },] };
+
+let ingressChannel = socket.channel(`${signalingId}_ingress`)
+ingressChannel.join()
+  .receive("ok", resp => { console.log("Joined successfully", resp)
+    startIngressConnection(ingressChannel, `${signalingId}_ingress`);
+  })
+  .receive("error", resp => { console.log("Unable to join", resp) })

examples/phoenix_signaling/assets/vendor/topbar.js

@@ -0,0 +1,165 @@
+/**
+ * @license MIT
+ * topbar 2.0.0, 2023-02-04
+ * https://buunguyen.github.io/topbar
+ * Copyright (c) 2021 Buu Nguyen
+ */
+(function (window, document) {
+  "use strict";
+
+  // https://gist.github.com/paulirish/1579671
+  (function () {
+    var lastTime = 0;
+    var vendors = ["ms", "moz", "webkit", "o"];
+    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+      window.requestAnimationFrame =
+        window[vendors[x] + "RequestAnimationFrame"];
+      window.cancelAnimationFrame =
+        window[vendors[x] + "CancelAnimationFrame"] ||
+        window[vendors[x] + "CancelRequestAnimationFrame"];
+    }
+    if (!window.requestAnimationFrame)
+      window.requestAnimationFrame = function (callback, element) {
+        var currTime = new Date().getTime();
+        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+        var id = window.setTimeout(function () {
+          callback(currTime + timeToCall);
+        }, timeToCall);
+        lastTime = currTime + timeToCall;
+        return id;
+      };
+    if (!window.cancelAnimationFrame)
+      window.cancelAnimationFrame = function (id) {
+        clearTimeout(id);
+      };
+  })();
+
+  var canvas,
+    currentProgress,
+    showing,
+    progressTimerId = null,
+    fadeTimerId = null,
+    delayTimerId = null,
+    addEvent = function (elem, type, handler) {
+      if (elem.addEventListener) elem.addEventListener(type, handler, false);
+      else if (elem.attachEvent) elem.attachEvent("on" + type, handler);
+      else elem["on" + type] = handler;
+    },
+    options = {
+      autoRun: true,
+      barThickness: 3,
+      barColors: {
+        0: "rgba(26,  188, 156, .9)",
+        ".25": "rgba(52,  152, 219, .9)",
+        ".50": "rgba(241, 196, 15,  .9)",
+        ".75": "rgba(230, 126, 34,  .9)",
+        "1.0": "rgba(211, 84,  0,   .9)",
+      },
+      shadowBlur: 10,
+      shadowColor: "rgba(0,   0,   0,   .6)",
+      className: null,
+    },
+    repaint = function () {
+      canvas.width = window.innerWidth;
+      canvas.height = options.barThickness * 5; // need space for shadow
+
+      var ctx = canvas.getContext("2d");
+      ctx.shadowBlur = options.shadowBlur;
+      ctx.shadowColor = options.shadowColor;
+
+      var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+      for (var stop in options.barColors)
+        lineGradient.addColorStop(stop, options.barColors[stop]);
+      ctx.lineWidth = options.barThickness;
+      ctx.beginPath();
+      ctx.moveTo(0, options.barThickness / 2);
+      ctx.lineTo(
+        Math.ceil(currentProgress * canvas.width),
+        options.barThickness / 2
+      );
+      ctx.strokeStyle = lineGradient;
+      ctx.stroke();
+    },
+    createCanvas = function () {
+      canvas = document.createElement("canvas");
+      var style = canvas.style;
+      style.position = "fixed";
+      style.top = style.left = style.right = style.margin = style.padding = 0;
+      style.zIndex = 100001;
+      style.display = "none";
+      if (options.className) canvas.classList.add(options.className);
+      document.body.appendChild(canvas);
+      addEvent(window, "resize", repaint);
+    },
+    topbar = {
+      config: function (opts) {
+        for (var key in opts)
+          if (options.hasOwnProperty(key)) options[key] = opts[key];
+      },
+      show: function (delay) {
+        if (showing) return;
+        if (delay) {
+          if (delayTimerId) return;
+          delayTimerId = setTimeout(() => topbar.show(), delay);
+        } else  {
+          showing = true;
+          if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
+          if (!canvas) createCanvas();
+          canvas.style.opacity = 1;
+          canvas.style.display = "block";
+          topbar.progress(0);
+          if (options.autoRun) {
+            (function loop() {
+              progressTimerId = window.requestAnimationFrame(loop);
+              topbar.progress(
+                "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
+              );
+            })();
+          }
+        }
+      },
+      progress: function (to) {
+        if (typeof to === "undefined") return currentProgress;
+        if (typeof to === "string") {
+          to =
+            (to.indexOf("+") >= 0 || to.indexOf("-") >= 0
+              ? currentProgress
+              : 0) + parseFloat(to);
+        }
+        currentProgress = to > 1 ? 1 : to;
+        repaint();
+        return currentProgress;
+      },
+      hide: function () {
+        clearTimeout(delayTimerId);
+        delayTimerId = null;
+        if (!showing) return;
+        showing = false;
+        if (progressTimerId != null) {
+          window.cancelAnimationFrame(progressTimerId);
+          progressTimerId = null;
+        }
+        (function loop() {
+          if (topbar.progress("+.1") >= 1) {
+            canvas.style.opacity -= 0.05;
+            if (canvas.style.opacity <= 0.05) {
+              canvas.style.display = "none";
+              fadeTimerId = null;
+              return;
+            }
+          }
+          fadeTimerId = window.requestAnimationFrame(loop);
+        })();
+      },
+    };
+
+  if (typeof module === "object" && typeof module.exports === "object") {
+    module.exports = topbar;
+  } else if (typeof define === "function" && define.amd) {
+    define(function () {
+      return topbar;
+    });
+  } else {
+    this.topbar = topbar;
+  }
+}.call(this, window, document));