{"id":18352790,"url":"https://github.com/membraneframework/membrane_webrtc_plugin","last_synced_at":"2025-04-06T11:33:08.311Z","repository":{"id":232213709,"uuid":"762360285","full_name":"membraneframework/membrane_webrtc_plugin","owner":"membraneframework","description":"Plugin for streaming via WebRTC","archived":false,"fork":false,"pushed_at":"2024-04-18T09:20:18.000Z","size":2039,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-10T07:45:18.682Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/membraneframework.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-23T16:07:07.000Z","updated_at":"2024-05-29T22:36:19.063Z","dependencies_parsed_at":"2024-04-11T11:28:40.563Z","dependency_job_id":"b9ab4532-362e-484d-94ff-000144a6c084","html_url":"https://github.com/membraneframework/membrane_webrtc_plugin","commit_stats":null,"previous_names":["membraneframework-labs/membrane_webrtc_plugin"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/membraneframework%2Fmembrane_webrtc_plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/membraneframework%2Fmembrane_webrtc_plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/membraneframework%2Fmembrane_webrtc_plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/membraneframework%2Fmembrane_webrtc_plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/membraneframework","download_url":"https://codeload.github.com/membraneframework/membrane_webrtc_plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478152,"owners_count":20945258,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T21:37:25.627Z","updated_at":"2025-04-06T11:33:08.305Z","avatar_url":"https://github.com/membraneframework.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Membrane WebRTC Plugin\n\n[![Hex.pm](https://img.shields.io/hexpm/v/membrane_webrtc_plugin.svg)](https://hex.pm/packages/membrane_webrtc_plugin)\n[![API Docs](https://img.shields.io/badge/api-docs-yellow.svg?style=flat)](https://hexdocs.pm/membrane_webrtc_plugin)\n[![CircleCI](https://circleci.com/gh/membraneframework/membrane_webrtc_plugin.svg?style=svg)](https://circleci.com/gh/membraneframework/membrane_webrtc_plugin)\n\nMembrane Plugin for sending and receiving streams via WebRTC. It's based on [ex_webrtc](https://github.com/elixir-webrtc/ex_webrtc).\n\nIt's a part of the [Membrane Framework](https://membrane.stream).\n\n## Installation\n\nThe package can be installed by adding `membrane_webrtc_plugin` to your list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:membrane_webrtc_plugin, \"~\u003e 0.25.3\"}\n  ]\nend\n```\n\n## Demos\n\nThe `examples` directory shows how to send and receive streams from a web browser.\nThere are the following three demos:\n* `live_view` - a simple Phoenix LiveView project using `Membrane.WebRTC.Live.Player` and `Membrane.WebRTC.Live.Capture` to echo video stream\ncaptured from the user's browser.\n* `phoenix_signaling` - showcasing simple Phoenix application that uses `Membrane.WebRTC.PhoenixSignaling` to echo stream captured\nfrom the user's browser and sent via WebRTC. See `assets/phoenix_signaling/README.md` for details on how to run the demo.\n* `webrtc_signaling` - it consists of two scripts: `file_to_browser.exs` and `browser_to_file.exs`. The first one displays the stream from\nthe fixture file in the user's browser. The latter captures the user's camera input from the browser and saves it in the file.\nTo run one of these demos, type: `elixir \u003cscript_name\u003e` and visit `http://localhost:4000`.\n\n## Exchanging Signaling Messages\n\nTo establish a WebRTC connection you have to exchange WebRTC signaling messages between peers. \nIn `membrane_webrtc_plugin` it can be done by the user, with `Membrane.WebRTC.Signaling` or by passing WebSocket address to \n`Membrane.WebRTC.Source` or `Membrane.WebRTC.Sink`, but there are two additional ways of doing it, dedicated to be used within\n`Phoenix` projects:\n - The first one is to use `Membrane.WebRTC.PhoenixSignaling` along with `Membrane.WebRTC.PhoenixSignaling.Socket`\n - The second one is to use `Phoenix.LiveView` `Membrane.WebRTC.Live.Player` or `Membrane.WebRTC.Live.Capture`. These modules expect\n `t:Membrane.WebRTC.Signaling.t/0` as an argument and take advantage of WebSocket used by `Phoenix.LiveView` to exchange WebRTC \n signaling messages, so there is no need to add any code to handle signaling messages.\n\n### How to use Membrane.WebRTC.PhoenixSignaling in your own Phoenix project?\n\nThe see the full example, visit `example/phoenix_signaling`.\n\n1. Create a new socket in your application endpoint, using the `Membrane.WebRTC.PhoenixSignaling.Socket`, for instance at `/signaling` path:\n```\nsocket \"/signaling\", Membrane.WebRTC.PhoenixSignaling.Socket,\n  websocket: true,\n  longpoll: false\n```\n2. Create a Phoenix signaling channel with the desired signaling ID and use it as `Membrane.WebRTC.Signaling.t()`\nfor `Membrane.WebRTC.Source`, `Membrane.WebRTC.Sink` or [`Boombox`](https://github.com/membraneframework/boombox):\n```\nsignaling = Membrane.WebRTC.PhoenixSignaling.new(\"\u003csignaling_id\u003e\")\n\n# use it with Membrane.WebRTC.Source:\nchild(:webrtc_source, %Membrane.WebRTC.Source{signaling: signaling})\n|\u003e ...\n\n# or with Membrane.WebRTC.Sink:\n...\n|\u003e child(:webrtc_sink, %Membrane.WebRTC.Sink{signaling: signaling})\n\n# or with Boombox:\nBoombox.run(\n  input: {:webrtc, signaling},\n  output: ...\n)\n```\n\n\u003ePlease note that `signaling_id` is expected to be globally unique for each WebRTC connection about to be\n\u003eestabilished. You can, for instance:\n\u003e1. Generate a unique id with `:uuid` package and assign it to the connection in the page controller:\n\u003e```\n\u003eunique_id = UUID.uuid4()\n\u003erender(conn, :home, layout: false, signaling_id: unique_id)\n\u003e```\n\u003e\n\u003e2. Generate HTML based on HEEx template, using the previously set assign:\n\u003e```\n\u003e\u003cvideo id=\"videoPlayer\" controls muted autoplay signaling_id={@signaling_id}\u003e\u003c/video\u003e\n\u003e```\n\u003e\n\u003e3. Access it in your client code:\n\u003e```\n\u003econst videoPlayer = document.getElementById('videoPlayer');\n\u003econst signalingId = videoPlayer.getAttribute('signaling_id');\n\u003e```\n\n\n3. Use the Phoenix Socket to exchange WebRTC signaling data.\n```\nlet socket = new Socket(\"/signaling\", {params: {token: window.userToken}})\nsocket.connect()\nlet channel = socket.channel('\u003csignaling_id\u003e')\nchannel.join()\n  .receive(\"ok\", resp =\u003e { console.log(\"Signaling socket joined successfully\", resp)\n    // here you can exchange WebRTC data\n  })\n  .receive(\"error\", resp =\u003e { console.log(\"Unable to join signaling socket\", resp) })\n```\n\nVisit `examples/phoenix_signaling/assets/js/signaling.js` to see how WebRTC signaling messages exchange might look like.\n\n## Integrating Phoenix.LiveView with Membrane WebRTC Plugin\n\n`membrane_webrtc_plugin` comes with two `Phoenix.LiveView`s: \n - `Membrane.WebRTC.Live.Capture` - exchanges WebRTC signaling messages between `Membrane.WebRTC.Source` and the browser. It \n expects the same `Membrane.WebRTC.Signaling` that has been passed to the related `Membrane.WebRTC.Source`. As a result, \n `Membrane.Webrtc.Source` will return the media stream captured from the browser, where `Membrane.WebRTC.Live.Capture` has been \n rendered.\n - `Membrane.WebRTC.Live.Player` - exchanges WebRTC signaling messages between `Membrane.WebRTC.Sink` and the browser. It \n expects the same `Membrane.WebRTC.Signaling` that has been passed to the related `Membrane.WebRTC.Sink`. As a result, \n `Membrane.WebRTC.Live.Player` will play media streams passed to the related `Membrane.WebRTC.Sink`. Currently supports up \n to one video stream and up to one audio stream.\n\n### Usage \n\nTo use `Phoenix.LiveView`s from this repository, you have to use related JS hooks. To do so, add the following code snippet to `assets/js/app.js`\n\n```js\nimport { createCaptureHook, createPlayerHook } from \"membrane_webrtc_plugin\";\n\nlet Hooks = {};\nconst iceServers = [{ urls: \"stun:stun.l.google.com:19302\" }];\nHooks.Capture = createCaptureHook(iceServers);\nHooks.Player = createPlayerHook(iceServers);\n```\n\nand add `Hooks` to the WebSocket constructor. It can be done in the following way:\n\n```js\nnew LiveSocket(\"/live\", Socket, {\n  params: SomeParams,\n  hooks: Hooks,\n});\n```\n\nTo see the full usage example, you can go to `examples/live_view/` directory in this repository (take a look especially at `examples/live_view/assets/js/app.js` and `examples/live_view/lib/example_project_web/live_views/echo.ex`).\n\n## Copyright and License\n\nCopyright 2020, [Software Mansion](https://swmansion.com/?utm_source=git\u0026utm_medium=readme\u0026utm_campaign=membrane_webrtc_plugin)\n\n[![Software Mansion](https://logo.swmansion.com/logo?color=white\u0026variant=desktop\u0026width=200\u0026tag=membrane-github)](https://swmansion.com/?utm_source=git\u0026utm_medium=readme\u0026utm_campaign=membrane_webrtc_plugin)\n\nLicensed under the [Apache License, Version 2.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmembraneframework%2Fmembrane_webrtc_plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmembraneframework%2Fmembrane_webrtc_plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmembraneframework%2Fmembrane_webrtc_plugin/lists"}