[Broadcaster] Port broadcaster to Phoenix (#11)

* Port `broadcaster` to Phoenix

* Add ExWebRTC dashboard

* Use proper token for WHIP

Author: LVala

broadcaster/.formatter.exs

@@ -1,4 +1,5 @@
-# Used by "mix format"
 [
-  inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"]
+  import_deps: [:phoenix],
+  plugins: [Phoenix.LiveView.HTMLFormatter],
+  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}"]
 ]

broadcaster/.gitignore

@@ -7,7 +7,7 @@
 # The directory Mix downloads your dependencies sources to.
 /deps/
 
-# Where third-party dependencies like ExDoc output generated docs.
+# Where 3rd-party dependencies like ExDoc output generated docs.
 /doc/
 
 # Ignore .fetch files in case you like to edit your project deps locally.
@@ -19,8 +19,19 @@ erl_crash.dump
 # Also ignore archive artifacts (built via "mix archive.build").
 *.ez
 
-# Ignore package tarball (built via "mix hex.build").
-whip_whep_server-*.tar
-
 # Temporary files, for example, from tests.
 /tmp/
+
+# Ignore package tarball (built via "mix hex.build").
+broadcaster-*.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/
+

broadcaster/README.md

@@ -1,42 +1,24 @@
 # Broadcaster
 
-A [WHIP](https://datatracker.ietf.org/doc/html/draft-ietf-wish-whip-13)/[WHEP](https://datatracker.ietf.org/doc/html/draft-ietf-wish-whep-01) broadcasting server with a simble browser front-end.
+A [WHIP](https://datatracker.ietf.org/doc/html/draft-ietf-wish-whip-13)/[WHEP](https://datatracker.ietf.org/doc/html/draft-ietf-wish-whep-01) broadcasting server with a simple browser front-end.
 
 ## Usage
 
 Clone this repo and change the working directory to `apps/broadcaster`.
 
-Fetch dependencies
+Fetch dependencies and run the app:
 
 ```shell
 mix deps.get
-```
-
-Set the evironment variables
-
-```shell
-# note: these are actually the default values,
-# so you can omit setting the variables
-export BCR_IP="127.0.0.1"
-export BCR_PORT="5002"
-export BCR_TOKEN="test"
-export BCR_HOST="http://localhost:$BCR_PORT"
-export BCR_ADMIN_USERNAME="admin"
-export BCR_ADMIN_PASSWORD="admin"
-```
-
-Run the app
-
-```shell
-mix run --no-halt
+mix phx.server
 ```
 
 We will use [OBS](https://github.com/obsproject/obs-studio) as a media source.
 Open OBS an go to `settings > Stream` and change `Service` to `WHIP`.
 
-Pass `$BCR_HOST/api/whip` as the `Server` value and `$BCR_TOKEN` as the `Bearer Token` value, using the environment
+Pass `http://localhost:4000/api/whip` as the `Server` value and `example` as the `Bearer Token` value, using the environment
 variables values that have been set a moment ago. Press `Apply`.
 
 Close the settings, choose a source of you liking (e.g. a web-cam feed) and press `Start Streaming`.
 
-Acces `$BCR_HOST/` in your browser. You should see the live stream from you OBS.
+Now you can visit [`localhost:4000`](http://localhost:4000) from your browser. You should see the stream from OBS.

broadcaster/assets/css/app.css

@@ -0,0 +1,5 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* This file is for your main application CSS */

broadcaster/assets/js/app.js

@@ -0,0 +1,52 @@
+// If you want to use Phoenix channels, run `mix help phx.gen.channel`
+// to get started and then uncomment the line below.
+// import "./user_socket.js"
+
+// You can include dependencies in two ways.
+//
+// The simplest option is to put them in assets/vendor and
+// import them using relative paths:
+//
+//     import "../vendor/some-package.js"
+//
+// Alternatively, you can `npm install some-package --prefix assets` and import
+// them using a path starting with the package name:
+//
+//     import "some-package"
+//
+
+// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
+import "phoenix_html"
+// Establish Phoenix Socket and LiveView configuration.
+import {Socket} from "phoenix"
+import {LiveSocket} from "phoenix_live_view"
+import topbar from "../vendor/topbar"
+
+import {Home} from "./home.js"
+import {Player} from "./player.js"
+
+let Hooks = {}
+Hooks.Home = Home
+Hooks.Player = Player
+
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let liveSocket = new LiveSocket("/live", Socket, {
+  longPollFallbackMs: 2500,
+  params: {_csrf_token: csrfToken},
+  hooks: Hooks,
+})
+
+// Show progress bar on live navigation and form submits
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
+window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+
+// connect if there are any LiveViews on the page
+liveSocket.connect()
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> liveSocket.disableLatencySim()
+window.liveSocket = liveSocket
+

broadcaster/priv/static/public/script.js renamed to broadcaster/assets/js/home.js

@@ -1,6 +1,5 @@
 const pcConfig = { iceServers: [{ urls: "stun:stun.l.google.com:19302" }] };
-const endpointBase = window.location.href.split("/").slice(0, -1).join("/");
-const whepEndpoint = `${endpointBase}/api/whep`;
+const whepEndpoint = `${window.location.origin}/api/whep`
 const videoPlayer = document.getElementById("videoPlayer");
 const candidates = [];
 let patchEndpoint;
@@ -74,4 +73,8 @@ async function connect() {
   await pc.setRemoteDescription({ type: "answer", sdp: sdp });
 }
 
-connect();
+export const Home = {
+  mounted() {
+    connect()
+  }
+}

broadcaster/priv/static/admin/stream/stream.js renamed to broadcaster/assets/js/player.js

@@ -122,4 +122,8 @@ async function run() {
   bindControls();
 }
 
-run();
+export const Player = {
+  mounted() {
+    run()
+  }
+}

broadcaster/assets/tailwind.config.js

@@ -0,0 +1,75 @@
+// See the Tailwind configuration guide for advanced usage
+// https://tailwindcss.com/docs/configuration
+
+const plugin = require("tailwindcss/plugin")
+const fs = require("fs")
+const path = require("path")
+
+module.exports = {
+  content: [
+    "./js/**/*.js",
+    "../lib/broadcaster_web.ex",
+    "../lib/broadcaster_web/**/*.*ex"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: "#4339AC",
+      }
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
+    plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
+    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
+    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
+    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+
+    // Embeds Heroicons (https://heroicons.com) into your app.css bundle
+    // See your `CoreComponents.icon/1` for more information.
+    //
+    plugin(function({matchComponents, theme}) {
+      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
+      let values = {}
+      let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"],
+        ["-micro", "/16/solid"]
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+        })
+      })
+      matchComponents({
+        "hero": ({name, fullPath}) => {
+          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          let size = theme("spacing.6")
+          if (name.endsWith("-mini")) {
+            size = theme("spacing.5")
+          } else if (name.endsWith("-micro")) {
+            size = theme("spacing.4")
+          }
+          return {
+            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--hero-${name})`,
+            "mask": `var(--hero-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": size,
+            "height": size
+          }
+        }
+      }, {values})
+    })
+  ]
+}