Merge pull request #29 from membraneframework/fix-media-constraints

FelonEkonom · web-flow · commit 2bdf80ed73ea · 2025-04-02T15:37:00.000+02:00
Fix media constraints
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ The package can be installed by adding `membrane_webrtc_plugin` to your list of
 ```elixir
 def deps do
   [
-    {:membrane_webrtc_plugin, "~> 0.25.2"}
+    {:membrane_webrtc_plugin, "~> 0.25.3"}
   ]
 end
 ```
diff --git a/assets/capture.js b/assets/capture.js
@@ -40,7 +40,7 @@ export function createCaptureHook(iceServers = [{ urls: `stun:stun.l.google.com:
               await this.pc.setRemoteDescription(data);
               break;
             case `ice_candidate`:
-              console.log(`[${this.el.id}] Recieved ICE candidate:`, data);
+              console.log(`[${this.el.id}] Received ICE candidate:`, data);
               await this.pc.addIceCandidate(data);
               break;
           }
diff --git a/assets/player.js b/assets/player.js
@@ -32,7 +32,7 @@ export function createPlayerHook(iceServers = [{ urls: `stun:stun.l.google.com:1
 
             break;
           case `ice_candidate`:
-            console.log(`[${this.el.id}] Recieved ICE candidate:`, data);
+            console.log(`[${this.el.id}] Received ICE candidate:`, data);
             await this.pc.addIceCandidate(data);
         }
       });
diff --git a/examples/phoenix_signaling/assets/js/signaling.js b/examples/phoenix_signaling/assets/js/signaling.js
@@ -1,38 +1,38 @@
-import {Socket} from "phoenix"
+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 pcConfig = { iceServers: [{ urls: "stun:stun.l.google.com:19302" }] };
+  const mediaConstraints = { video: true, audio: true };
 
-const connStatus = document.getElementById("status");
+  const connStatus = document.getElementById("status");
   const localStream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
   const pc = new RTCPeerConnection(pcConfig);
 
-  pc.onicecandidate = event => {
+  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');
+      const button = document.createElement("button");
       button.innerHTML = "Disconnect";
       button.onclick = () => {
-        localStream.getTracks().forEach(track => track.stop())
-      }
+        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
+  channel.on(topic, async (payload) => {
+    type = payload.type;
+    data = payload.data;
 
     switch (type) {
       case "sdp_answer":
@@ -44,29 +44,29 @@ const connStatus = document.getElementById("status");
         await pc.addIceCandidate(data);
         break;
     }
-  })
+  });
 
   const offer = await pc.createOffer();
   await pc.setLocalDescription(offer);
-  console.log("Sent SDP offer:", 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 => {
+  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
+  channel.on(topic, async (payload) => {
+    type = payload.type;
+    data = payload.data;
 
     switch (type) {
       case "sdp_offer":
@@ -75,31 +75,39 @@ async function startIngressConnection(channel, topic) {
         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)
+        console.log("Sent SDP answer:", answer);
         break;
       case "ice_candidate":
-        console.log("Recieved ICE candidate:", data);
+        console.log("Received 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 to egress signaling socket", resp)
+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 to egress signaling socket", resp);
     startEgressConnection(egressChannel, `${signalingId}_egress`);
   })
-  .receive("error", resp => { console.log("Unable to join egress signaling socket", resp) })
+  .receive("error", (resp) => {
+    console.log("Unable to join egress signaling socket", resp);
+  });
 
-const pcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' },] };
+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 to ingress signaling socket", resp)
+let ingressChannel = socket.channel(`${signalingId}_ingress`);
+ingressChannel
+  .join()
+  .receive("ok", (resp) => {
+    console.log("Joined successfully to ingress signaling socket", resp);
     startIngressConnection(ingressChannel, `${signalingId}_ingress`);
   })
-  .receive("error", resp => { console.log("Unable to join ingress signaling socket", resp) })
+  .receive("error", (resp) => {
+    console.log("Unable to join ingress signaling socket", resp);
+  });
diff --git a/examples/websocket_signaling/assets/file_to_browser/file_to_browser.js b/examples/websocket_signaling/assets/file_to_browser/file_to_browser.js
@@ -1,23 +1,23 @@
 const videoPlayer = document.getElementById("videoPlayer");
-const pcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' },] };
-const proto = window.location.protocol === "https:" ? "wss:" : "ws:"
+const pcConfig = { iceServers: [{ urls: "stun:stun.l.google.com:19302" }] };
+const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
 const ws = new WebSocket(`${proto}//${window.location.hostname}:8829`);
 ws.onopen = () => start_connection(ws);
-ws.onclose = event => console.log("WebSocket connection was terminated:", event);
+ws.onclose = (event) => console.log("WebSocket connection was terminated:", event);
 
 const start_connection = async (ws) => {
   videoPlayer.srcObject = new MediaStream();
 
   const pc = new RTCPeerConnection(pcConfig);
-  pc.ontrack = event => videoPlayer.srcObject.addTrack(event.track);
-  pc.onicecandidate = event => {
+  pc.ontrack = (event) => videoPlayer.srcObject.addTrack(event.track);
+  pc.onicecandidate = (event) => {
     if (event.candidate === null) return;
 
     console.log("Sent ICE candidate:", event.candidate);
     ws.send(JSON.stringify({ type: "ice_candidate", data: event.candidate }));
   };
 
-  ws.onmessage = async event => {
+  ws.onmessage = async (event) => {
     const { type, data } = JSON.parse(event.data);
 
     switch (type) {
@@ -27,11 +27,11 @@ const start_connection = async (ws) => {
         const answer = await pc.createAnswer();
         await pc.setLocalDescription(answer);
         ws.send(JSON.stringify({ type: "sdp_answer", data: answer }));
-        console.log("Sent SDP answer:", answer)
+        console.log("Sent SDP answer:", answer);
         break;
       case "ice_candidate":
-        console.log("Recieved ICE candidate:", data);
+        console.log("Received ICE candidate:", data);
         await pc.addIceCandidate(data);
     }
   };
-};
+};
diff --git a/lib/membrane_webrtc/live/capture.ex b/lib/membrane_webrtc/live/capture.ex
@@ -197,8 +197,8 @@ if Code.ensure_loaded?(Phoenix) and Code.ensure_loaded?(Phoenix.LiveView) do
           |> Signaling.register_peer(message_format: :json_data)
 
           media_constraints = %{
-            "audio" => inspect(capture.audio?),
-            "video" => inspect(capture.video?)
+            "audio" => capture.audio?,
+            "video" => capture.video?
           }
 
           socket
diff --git a/mix.exs b/mix.exs
@@ -1,7 +1,7 @@
 defmodule Membrane.WebRTC.Plugin.Mixfile do
   use Mix.Project
 
-  @version "0.25.2"
+  @version "0.25.3"
   @github_url "https://github.com/membraneframework/membrane_webrtc_plugin"
 
   def project do

Original file line number	Diff line number	Diff line change
@@ -15,7 +15,7 @@ The package can be installed by adding `membrane_webrtc_plugin` to your list of
`15`	`15`	```elixir
`16`	`16`	`def deps do`
`17`	`17`	`[`
`18`		`- {:membrane_webrtc_plugin, "~> 0.25.2"}`
	`18`	`+ {:membrane_webrtc_plugin, "~> 0.25.3"}`
`19`	`19`	`]`
`20`	`20`	`end`
`21`	`21`	```
Original file line number	Diff line number	Diff line change
@@ -40,7 +40,7 @@ export function createCaptureHook(iceServers = [{ urls: `stun:stun.l.google.com:
`40`	`40`	`await this.pc.setRemoteDescription(data);`
`41`	`41`	`break;`
`42`	`42`	case `ice_candidate`:
`43`		- console.log(`[${this.el.id}] Recieved ICE candidate:`, data);
	`43`	+ console.log(`[${this.el.id}] Received ICE candidate:`, data);
`44`	`44`	`await this.pc.addIceCandidate(data);`
`45`	`45`	`break;`
`46`	`46`	`}`
Original file line number	Diff line number	Diff line change
@@ -32,7 +32,7 @@ export function createPlayerHook(iceServers = [{ urls: `stun:stun.l.google.com:1
`32`	`32`
`33`	`33`	`break;`
`34`	`34`	case `ice_candidate`:
`35`		- console.log(`[${this.el.id}] Recieved ICE candidate:`, data);
	`35`	+ console.log(`[${this.el.id}] Received ICE candidate:`, data);
`36`	`36`	`await this.pc.addIceCandidate(data);`
`37`	`37`	`}`
`38`	`38`	`});`
Original file line number	Diff line number	Diff line change
`@@ -197,8 +197,8 @@ if Code.ensure_loaded?(Phoenix) and Code.ensure_loaded?(Phoenix.LiveView) do`
`197`	`197`	`\|> Signaling.register_peer(message_format: :json_data)`
`198`	`198`
`199`	`199`	`media_constraints = %{`
`200`		`- "audio" => inspect(capture.audio?),`
`201`		`- "video" => inspect(capture.video?)`
	`200`	`+ "audio" => capture.audio?,`
	`201`	`+ "video" => capture.video?`
`202`	`202`	`}`
`203`	`203`
`204`	`204`	`socket`