Issue encountered with WebRTC: Inability to establish local description following creation of an answer

Right now, I am in the process of developing a straightforward video chat service using WebRTC with Ajax as the signalling method.

Following the suggestion of another user on Stack Overflow, to ensure my understanding of a typical WebRTC application flow, I initially created a basic WebRTC video chat service where I displayed the offer or answer and ICE candidates on the screen. I manually copied this information into a text area in the other client's window to establish the connection successfully.

Once that was working correctly, I attempted to switch to using Ajax for signalling. However, I have encountered difficulties in getting it to function properly.

In my current setup, each time offer/answer or ICE candidate information is generated, I immediately create an Ajax object to store this data (after executing the JSON.stringify method) in a DB table. Both clients continuously check this DB table for any new information from the other client.

I have been closely monitoring console output, and it appears that a valid offer is always sent from one client to another. Despite successfully setting this offer as the remote description and creating an answer upon receiving it, every effort to set the local description of the "answerer" fails.

Could there be a specific reason for this issue? Below is a snippet of my code:

var i,
  len;

for (i = 0, len = responseData.length; i < len; i += 1) {

  message = JSON.parse(responseData[i]);

  if (message.type === 'offer') {

    makeAnswer(message);

  }

  // Code omitted,

}

...

makeAnswer = function (offer) {

  pc.setRemoteDescription(new RTCSessionDescription(offer), function () {

    pc.createAnswer(function (desc) {
      
      // An answer is always properly generated here.
      
      pc.setLocalDescription(desc, function () {
        
        // This success callback function is never executed.
        
        setPayload(JSON.stringify(pc.localDescription));
        
      }, function () {
        
        // I always end up here.
        
      });

    });

  });

};

To summarize, I iterate through retrieved data from the DB, checking for both an offer and multiple candidate information gathered simultaneously. When encountering a message with the type property as 'offer,' I invoke the makeAnswer function. From there, I attempt to set the remote description to the received offer, create an answer, and assign the answer as the local description, but it consistently fails during this last step.

If anyone can provide guidance on why this issue may arise, I would greatly appreciate it.
Thank you for your help.

Answer №1

After careful investigation, I finally identified the root cause of the issue. It turns out that I overlooked encoding the SDP and ICE information before transmitting it to a PHP script via Ajax. Consequently, any plus signs (+) in the SDP/ICE data were being replaced with spaces, resulting in discrepancies between the local and remote clients rendering them ineffective.

While I have always used encodeURIComponent for GET requests in Ajax, I was unaware that this function is also necessary for POST requests. This new insight proved valuable.

Subsequently, upon implementing the encodeURIComponent function for the transmitted data and refining my logic to ensure that ICE candidates are only established after both local and remote descriptions are set, the functionality improved significantly.

On a positive note, while everything worked flawlessly on my local environment, transferring the identical code to my web-hosted server revealed a different outcome. Despite receiving confirmation in the console that the offer/answer and ICE information were successfully exchanged and configured, the remote video feed failed to appear.

Despite this setback, I am determined to overcome this final obstacle and bring this project to completion.

In conclusion, it is imperative to utilize encodeURIComponent prior to sending SDP/ICE information to a server-side script to ensure consistency in the received string at the receiving end.

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

Navigating to the next page in Angular JS by clicking "Save and Next" which

Hey there, I'm currently diving into Angular JS and working on a CMS system with it. Right now, we're dealing with around 30 to 40 Objects that we load into a list. Whenever one of these objects is clicked, a Modal Window pops up using the Modal ...

Navigate quickly to different sections using jump links and adjust the positioning with the style attribute, such as "padding-top

My website incorporates Jump Links to navigate between page elements as part of an interactive User Guide. Everything functions properly on Firefox, IE, and Edge, but Chrome and Opera seem to disregard the 'padding'. Due to a fixed menu bar on t ...

What is the reason for the input type number in the <input> field being passed as a string?

I am currently developing a straightforward component that allows the user to input the balance they wish to add. Here is the template used for taking input from the user: <h3>Add Balance:</h3> <input #payment type="number"> < ...

Update pinpoint descriptions in JavaScript using the Google Maps API

I found this JS code on a website called GeoCodeZip After setting up the code on my server at this link, I realized the possibilities for customization. You can check out the source code to see how it works. Here's an image of the system: https://i. ...

The second scenario is triggered once the conditions are satisfied using a JavaScript switch case

(Here is a question dedicated to sharing knowledge.) I devised this switch statement to determine which recovery plan to suggest. const numPomodoros = 3; switch (0) { case numPomodoros % 3: console.log('I recommend coffee, V8, and 5 mi ...

I'm experiencing some unexpected behavior in JavaScript when I try to apply style changes using JavaScript. Is it possible that transitions are not occurring in both cases as expected?

Everything seems to be working fine with the transition, but when I skip using setTimeout and directly apply the transform, the div instantly reaches the end of the transition. function move(x, y, delay) { let el = document.getElementById('myDiv& ...

Issues Arising from the Implementation of .on() on Newly Added Elements

After learning that .live() has been deprecated, I switched to using .on. However, I encountered an issue where .on is not working for dynamically added elements in the DOM. In my script, a table is added with multiple text boxes (input type="text"), and ...

Maintain the current states when returning to a previous point in time

In my Angular app, I have multiple pages that allow users to make changes such as opening tabs and pills, modals, etc. For instance, if a user opens a modal and then clicks a link within that modal that takes them to another page, I want the original page ...

Array of Ascending Progress Indicators

I currently have a progress bar that I'm happy with, but I want to enhance it by incorporating stacked progress bars. My aim is to have the progress bar behave in the following way when an option is selected: https://i.stack.imgur.com/Pw9AH.png & ...

Dealing with multiple AJAX requests: Best practices

I have a script that is handling multiple ajax requests. Below is a simplified version of it: function sendAjaxRequest(variable){ $.ajax({ // configuration details }).done(function(data){ // process the returned data // ret ...

iOS displaying CSS Transform issue exclusively

Creating a website that is fully mobile responsive is my goal. However, after designing the header, I realized that it wasn't displaying correctly on IOS devices like my iPad. The "Transform: translateX(-100%);" statement was functional on Android pho ...

What is the best way to adjust font size based on div size?

Imagine a div with fixed dimensions that contains text content. If the text is too long, it overflows and "explodes" the div. On the other hand, if the text is too short, the div looks empty. I think the solution would be to adjust the font size dynamical ...

Extracting JavaScript variable data to PHP using Ajax technology

I've been trying to save latitude and longitude values in PHP variables, but I'm having trouble. Here is the code I'm using. Can anyone please help me figure out why these values are not being stored in PHP variables: Code: <!DOCTYPE h ...

Retrieve the input field value using JavaScript within a PHP iteration loop

I've implemented an input box inside a while loop to display items from the database as IDs like 001,002,003,004,005 and so on. Each input box is accompanied by a button beneath it. My Desired Outcome 1) Upon clicking a button, I expect JavaScript t ...

Differences Between Object.keys().map() and Array.map()

I'm seeking a rationale for why Approach A is considered superior to Approach B. Approach A: const transformCompanyOptions = (companies: Array<{id: string, name: string}>, selectedId: string) => { return companies.map(key => { retu ...

Exploring LZMA compression in conjunction with next.js

Is anyone familiar with using the lzma algorithm to compress video, photo, text, etc. in the Next.js framework? I have searched everywhere but couldn't find a solution. I haven't found a proper demonstration or answer anywhere. I would greatly a ...

The PHP script invoked by ajax is unable to run the start_session() function

When I run script A, it starts the session and initializes some variables. Afterwards, the script triggers an ajax call that calls script B: $("#galleryContent").load("B.php", {op : 'get_thumbs' }, ...

What is the purpose of using href="javascript:void()?

As I was pondering over this query: What exactly does "javascript:void(0)" signify?, I realized the rationale behind using <a href="javascript:void(0)" - to prevent any redirection of the page. Recently, I stumbled upon this snippet of code: <a id= ...

When access to Ajax .responseText in an alert it can be displayed, however it cannot be stored in a variable or

var response_var=""; // Added for debugging purposes ajax.onreadystatechange = function() { if (ajax.readyState == 4 & ajax.status == 200) { response_var = ajax.responseText; alert(ajax.responseText); // This alerts properly (some text ...

Tips for verifying blank form fields

Is there a way to validate empty form fields before submission and show an alert? This validation is important as some fields are hidden using v-show. Here is an example: <!DOCTYPE html> <header> <script src="https://unpkg.com/vue@n ...