Implementing screen sharing feature in the webrtc application but encountering difficulties in connecting with other users

I recently tried adding screen share functionality to my app, but encountered an issue. The screen share feature only seems to work on my end and not the other user's. Here is the code snippet I used:

try {
  navigator.mediaDevices
    .getDisplayMedia({
      video: true,
      audio: true
    })
    .then((stream) => {
      const videoElement = document.createElement("video");
      videoElement.controls = true;
      addVideoStream(videoElement, stream);

      socket.on("user-connected", (userId) => {
        const call = peer.call(userId, stream);
        stream.getVideoTracks()[0].addEventListener("ended", () => {
          videoElement.remove();
        });
        call.on("close", () => {});
      });
      stream.getVideoTracks()[0].addEventListener("ended", () => {
        videoElement.remove();
      });
    });
} catch (error) {
  console.log("Error: " + error);
}

Answer №1

One possibility is that the issue may be connected to signaling, which can vary depending on the specific project. To troubleshoot, you might consider beginning with a functional example of streaming from a webcam/microphone and then transitioning to screen sharing.

In this HTML5 Live Streaming demo, you have the option to switch between camera and desktop sources while maintaining continuous transmission. Starting with a camera streaming example and testing it could help achieve a similar outcome in your project.

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

Uploading files with extra information in Node.js using Express

Just starting out with Node JS and I'm trying to create a Rest API for uploading images, but I've hit a roadblock. I need to set up a post method that can handle multiple files as well as additional data from inputs. Here's the code snippet ...

Implement a counter in a JavaScript table, initializing it to zero

I have successfully written my code, but there is one issue. The first row is starting with the number one instead of zero. I'm looking for suggestions on how to start from zero. Any help would be greatly appreciated. Thanks! <script> var tabl ...

Identify and automatically switch to the mobile site following a selection

Seeking a way to incorporate a redirect on my Joomla site that leads users to a mobile-friendly HTML5 app. After much thought, I've put together the following script: <script type="text/javascript> <!-- if (screen.width <= 800) { ...

Empty input fields in Javascript calculations will result in a NaN output

I need to perform a calculation using values entered into form fields and JavaScript. The formula I'll be using is as follows: totalEarnings = income1 + income2 * 0.7 + income3 / 48 + (income4 * 0.7) / 48; The variables income1, income2, income3, an ...

Which specific page initiates the post request?

Seeking help with my post request that originates from a specific page on my website: reqdata = 'text=' + mytext; $.ajax({ type: "POST", url: "/request.php", data: reqdata, cache: false, success: function(html) { alert(html) } ...

premature submission alert on button press

I'm encountering an issue where my form is being submitted prematurely when I click on the button. The desired behavior is for the button to create a textarea upon clicking, allowing me to write in it before submitting by clicking the button again. Ho ...

React: Error parsing - Missing closing JSX tag for <input> element

I am currently learning React and am in the process of working on a new component. Here is the code snippet that I have so far: order-item.component.jsx: import React, { Component } from 'react'; import { connect } from 'react-redux'; ...

Struggling to display a PHP success message using AJAX

So I have this code where I am trying to create a form in PHP and send a message. The message is being submitted successfully, but I am facing an issue when it comes to displaying a success message. The page submits the data but does not show any output. H ...

What is the best method to assign the value of a useState variable to a specific field in an array of objects for inserting data in

**I have a billing form that includes product details for the admin to fill out. One field, labeled "BillID", should automatically populate with a default value of 'Bill ID + 1' through a variable. **Below is the code: const [BillIdFetch, setB ...

Animate the CSS when the content is within the viewport using pagepiling.js integration

I'm currently working on animating content as it enters the viewport. However, I've encountered an issue where jQuery (used to check if the content is in the viewport) isn't functioning properly alongside pagepiling.js (). I suspect this mig ...

Having trouble with form validation in React.js? Wondering about the best ways to compare two fields? Let's

It's important to ensure that users enter the same email in both the email and confirmEmail input fields. I've experimented with a few methods, but I'm not certain of the best approach. Is there a simpler way that I might be overlooking? In ...

Experiencing difficulties connecting JavaScript with HTML

I'm encountering difficulty with implementing my JavaScript on my website. While it functions properly in this JS Fiddle, I am experiencing issues when trying to use it on my actual site. Below is how I have linked the JS on my site: <head> < ...

Can you list out the directives that are responsible for generating child scopes in AngularJS?

I recently discovered that when using ng-if, it actually creates a child scope, leading to some confusion on my end. I'm curious about the reasons or benefits behind ng-if's scope creation. Can you also tell me which other built-in directives cre ...

Using an if statement following the iteration of a JSON object in a React Native application

I am currently working on a weather app using react native as a fun project. I have set up an API to fetch weather data in JSON format. My goal is to show the hourly weather details based on the current time of the day. export default class App extends ...

Executing an external HTTP request within an ExpressJS middleware prior to rendering the response

Currently, I am facing a challenge while trying to utilize Express middleware for a login request. The default route generates an external URL that redirects to /login?code={login-code}. This URL triggers an external HTTP request to obtain the user_id and ...

Struggling to get Redux state to update an array

I'm encountering an issue with my redux implementation in React for the first time. I've successfully utilized it for logging and registering users, but now I'm facing a challenge with fetching an array of objects from the backend using axio ...

Using AXIOS and VueJs to visually represent data with a two-dimensional array

I'm new to vuejs and I want to display my data response in a two-dimensional table. This is the data I have: [{ "origine": "", "nb": 15 }, { "origine": "?", "nb": 18 }, { "origine": "?L", "nb": 1 }, { "origine": "G", "nb": 298 }, { ...

selenium webdriver is having trouble advancing beyond the loading stage of a javascript table

I am in the process of creating a web scraping tool to extract public data from a specific website's table Below is the code I have written for this purpose: options = webdriver.ChromeOptions() options.add_argument('--headless') driver = we ...

What is the best way to update the type = date values with my "SearchDate" parameter in a Python template?

I have the variable search_date in my view and I need to display this data in a template. How can I achieve this? In the object, the date is set as "2020-09-01". I tried to write the following code but it did not work as expected: {% extends 'bas ...

What is the process for specifying a method on a third-party class in TypeScript?

I'm facing a challenge while trying to extend a third-party class in TypeScript. The issue is that I am unable to access any existing methods of the class within my new method. One possible solution could be to redeclare the existing methods in a sep ...