live_ex_webrtc

Phoenix Live Components for Elixir WebRTC


Keywords
audio, elixir, phoenix-framework, phoenix-liveview, video, webrtc
License
Apache-2.0

Documentation

LiveExWebRTC

Hex.pm API Docs

Phoenix Live Components for Elixir WebRTC.

Installation

In your mix.exs:

def deps do
  [
    {:live_ex_webrtc, "~> 0.8.0"}
  ]
end

In your tailwind.config.js

module.exports = {
  content: [
    "../deps/live_ex_webrtc/**/*.*ex" // ADD THIS LINE
  ]
}

Usage

LiveExWebRTC comes with two Phoenix.LiveViews:

  • LiveExWebRTC.Publisher - sends audio and video via WebRTC from a web browser to a Phoenix app (browser publishes)
  • LiveExWebRTC.Player - sends audio and video via WebRTC from a Phoenix app to a web browser and plays it in the HTMLVideoElement (browser subscribes)

See module docs and live_broadcaster for more.

Local development

For local development:

  • include live_ex_webrtc in your mix.exs via path

  • modify NODE_PATH env variable in your esbuild configuration, which is located in config.exs - this will allow for importing javascript hooks from live_ex_webrtc.

    For example:

    config :esbuild,
      # ...
      default: [
        # ...
        env: %{
          "NODE_PATH" => "#{Path.expand("../deps", __DIR__)}:/path/to/parent/dir/of/live_ex_webrtc"
        }
      ]
  • modify content in tailwind.config.js - this will compile tailwind classes used in live components.

    For example:

    module.exports = {
      content: [
        // ...
        "../deps/**/*.ex"
      ]
    }

Important {: .info}

Separate paths with : on MacOS/Linux and with ; on Windows.

Important {: .info}

Specify path to live_ex_webrtc's parent directory.