Exploring the challenges of handling closures and callbacks with WebRTC in Javascript

I'm currently facing an issue where I am encountering a problem while creating a closure and debugging through it. The variable connectingClientId is correctly set within the closure callback (localOfferCreated). However, when the callback is invoked by createOffer, the connectedClientId turns out to be undefined. It's been a frustrating night trying to figure out what could be causing this situation.

function publishStream(handShakeInitiator, connectingClientId) {
    var localOfferCreated = offerClosure(connectingClientId);
    var localIceCandidate = iceClosure(connectingClientId);
    peerConnections[connectingClientId] = new RTCPeerConnection(peerConnectionConfig);
    peerConnections[connectingClientId].onicecandidate = localIceCandidate;

    peerConnections[connectingClientId].addStream(localStream);

    if (handShakeInitiator) {
        peerConnections[connectingClientId].createOffer(localOfferCreated, createOfferError, offerOptions);
    }
}

function offerClosure(id) {

    var connectingClientId = id;

    function offerCreated(description) {
        peerConnections[connectingClientId].setLocalDescription(description, function (connectingClientId) {
            webSocket.send(JSON.stringify({
                'control': signalConstants.sendToClient,
                'cid': connectingClientId,
                'sdp': description
            }));
        }, function () {
            console.log('Error setting description.');
        });
    };

    return offerCreated;
}

Take a look at these insights from the debugger:

connectingClientId is set - https://i.sstatic.net/MV1MA.png

connectingClientId becomes unset upon call - https://i.sstatic.net/1Q5Ej.png

What could I possibly be overlooking here?

javascriptcallbackclosureswebrtc

Answer №1

Reference: RTCPeerConnection.setLocalDescription

Key to success
This function, which does not require any parameters, is triggered upon successful setting of the description. Once this occurs, it's time to transmit the offer to a server that can then relay it to a remote client.

You are assigning a new value to connectingClientID within an inner function parameter. Keep in mind that defining a named function argument is akin to declaring a variable implicitly. According to the documentation, since the success callback doesn't provide any parameters, it will result in being undefined. Functions in JavaScript have access to their enclosing scope, hence the anonymous function you're using doesn't necessitate passing this argument; it can directly reference it by creating a closure.

function offerCreated(description) {
    peerConnections[connectingClientId].setLocalDescription(description, function() {  
        webSocket.send(JSON.stringify({
            control: signalConstants.sendToClient,
            cid: connectingClientId,
            sdp: description
        }));
    }, function () {
        console.log('Error setting description.');
    });
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to effortlessly convert a JSON string into a JavaScript object

Hello everyone, I am working with DynamoDB and need to parse the JSON Object that is returned from a call in order to retrieve the password hash field. jsonString = JSON.stringify(data) console.log(jsonString) This is what the output looks like: {"Count ...

javascriptjsonnode.js

Tips for refreshing the Vuex store to accommodate a new message within a messageSet

I've been working on integrating vue-socket.io into a chat application. I managed to set up the socket for creating rooms, but now I'm facing the challenge of displaying messages between chats and updating the Vuex store to show messages as I swi ...

javascriptvue.jsvuex

Designing a MongoDB schema for scheduling interview time slots

I am in the process of developing a website that allows administrators to create interviews by choosing participants, start times, and end times. I have categorized the participants into two groups - Applicants and Team_Members. Initially, I considered cre ...

javascriptnode.jsmongodbmongoosenosql

An effective method for determining the number of <div> elements using Javascript

Hello everyone, I'm encountering an issue with my code. In my main component, I have several sub-components structured like this: <template> <div id="container"> <div v-if=condition> Component1 </div> < ...

javascripthtmlcssvue.js

Arrays data being retrieved and set by Chrome Extension are visible in the console but not appearing in the HTML

Having trouble displaying my arrays in HTML. I'm attempting to do this within a Chrome Extension. While I can view the array perfectly in console.log, I'm encountering issues when trying to add it to the HTML DOM: /* Generating the array f ...

javascriptarraysjsonstringobject

Switch the Div's orientation from left to right

I'm attempting to toggle a div from left to right, but the code I currently have only toggles it from top to bottom. How can I modify it to slide from left to right instead? jQuery: $(document).ready(function(e) { $('#button').on(' ...

javascriptjquery

What is the process for searching a specific column in a Vuetify v-data-table that is not included in the headers?

Header for Product Data: headers: [ { text: "Product Name", value: "name" }, { text: "Quantity", value: "quantity" }, { text: "Price", value: "price" }, { text: "Orders", value: &quo ...

javascriptvue.jsvuejs2vuetify.jsv-data-table

Incorporate nested components on the fly within Angular 8

As I work on developing my angular 8 application, I find myself faced with the task of dynamically adding a nested component to the parent component upon clicking a button. Essentially, I am looking to create a functionality where the ADD button places the ...

javascriptangularparent-child

The triggering of fire OnClick is contingent upon the outcome of OnClientClick

I am currently faced with integrating legacy code written in JavaScript and C#. I need to write a new piece of code that will determine whether the OnClick event should fire based on certain conditions. My approach involves checking these conditions within ...

javascriptc#asp.net

Relocating scripts that have already been loaded

When using AJAX to load a page, the entire content including <html>, <head>, <body> is loaded. This means that all scripts meant to run on page load will be called. However, sometimes the browser may remember that certain scripts have alr ...

javascriptajaxjquery

Displaying iframes in AngularJS using a service

I am currently developing an Angular app and encountering some difficulties with rendering a Soundcloud embed iframe in my HTML. The issue arises when I try to display the tracks stored in the array generated by my getTracks function. Despite successfully ...

javascriptangularjssoundcloud

The Meteor Call object stands apart from the Meteor Method object that was received

When I send an object from the client to the server using a Meteor Call and Meteor method, something strange happens. The object is received in the Method but it looks different - nested within the giftList. Meteor Call - JSON.stringify {"personName& ...

javascripttypescriptmeteor

What could be the reason for my div being draggable on a smaller screen, yet becoming unresponsive to dragging when viewed on a larger screen during inspection?

The positioning of the div also changes when viewed on a larger screen. When inspected on a bigger screen, the position of the div shifts completely. Check out the jsfiddle here: https://jsfiddle.net/annahisenberg/ft10ersb/20/ To view it in full screen m ...

javascriptcssreactjsdrag-and-drop

Utilize Node.js to simultaneously connect with several APIs

Consider a scenario where multiple APIs need to be called in parallel using promise.all(). The issue arises when promise.all() rejects if any API fails. In this case, instead of giving up on failed APIs, I want to retry them until they succeed. However, ...

javascriptnode.js

Endless invocation of AngularJS $http requests

Could someone kindly clarify why the $http request is continuously sending an infinite number of requests to the server in my application? The code snippet provided is causing this issue: (function(){ var app = angular.module("GrahamsSocksProducts", [ ...

javascriptangularjsnode.jshttpmean-stack

Exploring the power of "then" in AngularJS promises: Jasmine's journey

In my AngularJS controller, I have the following function: service.getPlaceByAddress = function(address) { return $q(function(resolve, reject) { geocoder().geocode({'address': address}, function(result, status) { // gets ...

javascriptangularjsjasminekarma-jasmine

What steps are needed to convert the format to an array in JavaScript?

I have received a value in the format: [["first"],["second"],["third"]] However, I need it to be like this: {"first","second","third"} How can I achieve this using JavaScript? ...

javascriptarrays

Unable to publish due to a Node.js issue

I'm a beginner in back-end development and I've encountered an issue here: app.js var express = require("express"); var app = express(); var bodyParser = require("body-parser"); var mongoose = require("mongoose"); var Campground = require("./m ...

javascriptnode.jsmongodbexpress

Errors in Data Capture from AJAX Dropdown Selections

Recently, I've encountered an issue with one of my data fields while attempting to save it to a mySQL database. The problem seems to be related to the fact that the 'id' for the text value is saved instead of the actual text value itself, wh ...

phpjavascriptajaxgoogle-maps-api-3

What's the best way to align this text and icon next to each other?

I have text and an icon that are currently displaying far apart. How can I align the icon to the right of the text like shown below: Water Jug-> For reference, here is the link to a Codesandbox demonstration: https://codesandbox.io/s/responsivestack-ma ...

javascriptreactjsmaterial-ui