diff --git a/README.md b/README.md index 28f0fe2..58dc801 100644 --- 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 index 63c0d8a..7a48ea9 100644 --- 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 index f78f3a9..0475a74 100644 --- 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 index a5de25d..1093607 100644 --- a/examples/phoenix_signaling/assets/js/signaling.js +++ b/examples/phoenix_signaling/assets/js/signaling.js @@ -1,14 +1,14 @@ -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 })); @@ -16,23 +16,23 @@ const connStatus = document.getElementById("status"); 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,11 +44,11 @@ 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 })); } @@ -56,17 +56,17 @@ 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 index 63a315b..5032866 100644 --- 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); } }; -}; \ No newline at end of file +}; diff --git a/lib/membrane_webrtc/live/capture.ex b/lib/membrane_webrtc/live/capture.ex index b2a33d5..4d6b65d 100644 --- 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 index aca126e..6e151dd 100644 --- 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