Skip to content

Fix media constraints #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FelonEkonom merged 2 commits into from
Apr 2, 2025
Merged

Fix media constraints #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a26b805
Fix media constraints sent on frontend
FelonEkonom Apr 2, 2025
85ce5a9
Bump version
FelonEkonom Apr 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
```
Expand Down
2 changes: 1 addition & 1 deletion assets/capture.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion assets/player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link

Copilot AI Apr 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Corrected spelling in the log message from 'Recieved' to 'Received'.

Copilot uses AI. Check for mistakes.
await this.pc.addIceCandidate(data);
}
});
Expand Down
78 changes: 43 additions & 35 deletions examples/phoenix_signaling/assets/js/signaling.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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":
Expand All @@ -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":
Expand All @@ -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);
});
18 changes: 9 additions & 9 deletions examples/websocket_signaling/assets/file_to_browser/file_to_browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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);
}
};
};
};
4 changes: 2 additions & 2 deletions lib/membrane_webrtc/live/capture.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion mix.exs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down