WebRTC Components

assets/capture.js

@@ -22,10 +22,15 @@ export function createCaptureHook(iceServers = [{ urls: "stun:stun.l.google.com:
           );
         };
 
+        this.el.srcObject = new MediaStream();
+
         for (const track of localStream.getTracks()) {
           this.pc.addTrack(track, localStream);
+          this.el.srcObject.addTrack(track);
         }
 
+        this.el.play();
+
         this.handleEvent("webrtc_signaling-" + this.el.id, async (event) => {
           const { type, data } = event;
 

example_project/README.md

@@ -1,18 +1,23 @@
-# ExampleProject
+# Example Project
 
-To start your Phoenix server:
+Example project showing how `Membrane.WebRTC.Live.Capture` and `Membrane.WebRTC.Live.Player` can be used.
 
-  * Run `mix setup` to install and setup dependencies
-  * Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
+It contains a simple demo, where:
+ - the video stream is get from the browser and sent via WebRTC to Elixir server using `Membrane.WebRTC.Live.Capture`
+ - then, this same video stream is re-sent again to the browser and displayed using `Membrane.WebRTC.Live.Player`.
 
-Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
+This demo uses also [Boombox](https://hex.pm/packages/boombox).
+
+The most important file in the project is `example_project/lib/example_project_web/live_views/echo.ex`, that 
+contains the usage of `Boombox` and  LiveViews defined in `membrane_webrtc_live`.
+
+You can also take a look at `example_project/assets/js/app.js` to see how you can use `membrane_webrtc_live` JS hooks.
 
-Ready to run in production? Please [check our deployment guides](https://hexdocs.pm/phoenix/deployment.html).
+## Run server
 
-## Learn more
+To start Phoenix server:
 
-  * Official website: https://www.phoenixframework.org/
-  * Guides: https://hexdocs.pm/phoenix/overview.html
-  * Docs: https://hexdocs.pm/phoenix
-  * Forum: https://elixirforum.com/c/phoenix-forum
-  * Source: https://github.com/phoenixframework/phoenix
+  * 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.

example_project/assets/vendor/topbar.js

@@ -12,8 +12,7 @@
     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.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
       window.cancelAnimationFrame =
         window[vendors[x] + "CancelAnimationFrame"] ||
         window[vendors[x] + "CancelRequestAnimationFrame"];
@@ -68,15 +67,11 @@
       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]);
+      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.lineTo(Math.ceil(currentProgress * canvas.width), options.barThickness / 2);
       ctx.strokeStyle = lineGradient;
       ctx.stroke();
     },
@@ -93,15 +88,14 @@
     },
     topbar = {
       config: function (opts) {
-        for (var key in opts)
-          if (options.hasOwnProperty(key)) options[key] = opts[key];
+        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  {
+        } else {
           showing = true;
           if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
           if (!canvas) createCanvas();
@@ -111,9 +105,7 @@
           if (options.autoRun) {
             (function loop() {
               progressTimerId = window.requestAnimationFrame(loop);
-              topbar.progress(
-                "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
-              );
+              topbar.progress("+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2));
             })();
           }
         }
@@ -122,9 +114,7 @@
         if (typeof to === "undefined") return currentProgress;
         if (typeof to === "string") {
           to =
-            (to.indexOf("+") >= 0 || to.indexOf("-") >= 0
-              ? currentProgress
-              : 0) + parseFloat(to);
+            (to.indexOf("+") >= 0 || to.indexOf("-") >= 0 ? currentProgress : 0) + parseFloat(to);
         }
         currentProgress = to > 1 ? 1 : to;
         repaint();
@@ -162,4 +152,4 @@
   } else {
     this.topbar = topbar;
   }
-}.call(this, window, document));
+}).call(this, window, document);

example_project/config/config.exs

@@ -34,7 +34,8 @@ config :esbuild,
 # Configures Elixir's Logger
 config :logger, :console,
   format: "$time $metadata[$level] $message\n",
-  metadata: [:request_id]
+  metadata: [:request_id],
+  level: :info
 
 # Use Jason for JSON parsing in Phoenix
 config :phoenix, :json_library, Jason

example_project/lib/example_project_web/live_views/echo.ex → example_project/lib/example_project_web/live/echo.ex

@@ -1,4 +1,4 @@
-defmodule ExampleProjectWeb.LiveViews.Echo do
+defmodule ExampleProjectWeb.Live.EchoLive do
   use ExampleProjectWeb, :live_view
   alias Membrane.WebRTC.Live.{Capture, Player}
 
@@ -8,7 +8,7 @@ defmodule ExampleProjectWeb.LiveViews.Echo do
         ingress_signaling = Membrane.WebRTC.Signaling.new()
         egress_signaling = Membrane.WebRTC.Signaling.new()
 
-        {:ok, _boombox_pid} =
+        {:ok, _task_pid} =
           Task.start_link(fn ->
             Boombox.run(
               input: {:webrtc, ingress_signaling},
@@ -36,8 +36,11 @@ defmodule ExampleProjectWeb.LiveViews.Echo do
 
   def render(assigns) do
     ~H"""
-    <Capture.live_render socket={@socket} capture={"mediaCapture"} />
-    <Player.live_render socket={@socket} player={"videoPlayer"} />
+    <h3>Captured stream preview</h3>
+    <Capture.live_render socket={@socket} capture="mediaCapture" />
+
+    <h3>Stream sent by the server</h3>
+    <Player.live_render socket={@socket} player="videoPlayer" />
     """
   end
 end

example_project/lib/example_project_web/router.ex

@@ -17,7 +17,7 @@ defmodule ExampleProjectWeb.Router do
   scope "/", ExampleProjectWeb do
     pipe_through(:browser)
 
-    live("/", LiveViews.Echo, :index)
+    live("/", Live.EchoLive, :index)
   end
 
   # Other scopes may use custom stacks.