Experience screen sharing through WEBRTC without the need for any additional browser extensions

One question that I have is: Is it possible to implement screen sharing that works on a wide range of devices and browsers without the need for plugins or experimental settings?

I have searched online and come across some plugins for Chrome, but I am looking for a solution that does not require any additional installations or settings.

The ideal scenario would be to have a stream from the navigator similar to how I capture video from my camera.

Here is the code snippet for capturing video from the camera:

this.navig.getUserMedia =  ( this.navig.getUserMedia || this.navig.webkitGetUserMedia || this.navig.mozGetUserMedia || this.navig.msGetUserMedia );
this.navig.getUserMedia({video: true, audio: true}, (stream) => {
        this.videoElement.nativeElement.src = window.URL.createObjectURL(stream);
        this.videoElement.nativeElement.play();
}, (error) => console.warn('video error' + error))

Therefore, I am interested in obtaining a stream object with my screen captured. Is this achievable?

I have come across this code online, but unfortunately, it is returning errors...

navigator.mediaDevices.getDisplayMedia({ video: true })
.then(stream => {
    // we have a stream, attach it to a feedback video element
    videoElement.srcObject = stream;
  }, error => {
    console.log("Unable to acquire screen capture", error);
  });

Answer №1

New information for 2019: indeed, it can be done. Functioning smoothly on Chrome, Firefox, and Safari by utilizing the getDisplayMedia feature.

let displayMediaOptions = {video: true, audio: false};
navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
.then(function(stream){
  video_el.srcObject = stream;
})

Check out a live demonstration here: thescreenshare.com

Answer №2

Currently, only Firefox allows users to utilize screen sharing without the need for extra security plugins or services.

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

Discover the power of integrating JSON and HTTP Request in the Play Framework

My aim is to develop a methodology that can effectively manage JSON and HTTP requests. This approach will facilitate the transition to creating both a Webapp and a Mobile App in the future, as JSON handling is crucial for processing requests across differe ...

Unable to transfer information from the Parent component to the Child component

Can you help me solve this strange issue? I am experiencing a problem where I am passing data from a parent component to a child component using a service method that returns data as Observable<DemoModel>. The issue is that when the child component ...

Tips for eliminating double quotes from an input string

I am currently developing an input for a website that will generate a div tag along with its necessary child elements to ensure the website functions correctly. I have a couple of key questions regarding this setup: <!DOCTYPE html> <html> < ...

Retrieving information from an object using JavaScript

Hello, I am facing a challenge with extracting data from an object via a web API in ReactJS. It seems like the data returned by the API is not structured properly as a JavaScript object. To view the issue directly in your browser visit: I need assistance ...

Adding graphs dynamically to Dygraphs allows for real-time updates and interactive data

I recently started using Dygraphs for one of my projects and I am still learning how to work with it. After reading through the documentation and looking at a few examples, I noticed that the constructor for Dygraphs requires a div element where the graph ...

Generate a random word using Typed.js

Can Typed.js generate a random word for output? $(function(){ $(".element").typed({ strings: ["Lorem", "Ipsum", "Dolor"], typeSpeed: 0 }); }); The output should be one of the following words. (Lorem / Ipsum / Dolor) ...

`Is There a Solution When Compilation Fails?`

I keep encountering an issue when I run the command npm start. The problem seems to be originating from PancakeSwap Frontend and after several attempts, I am still unable to resolve it. Your assistance is greatly appreciated :) Below is a snippet of my Ap ...

Embed Javascript Code Within Text Field

Is there a way to incorporate this JavaScript into the "price" text value? Below is the code snippet: <script> function myFunction() { var x = document.getElementById('car-select')[document.getElementById('car-selec ...

What is the process for importing a .gltf/.glb model into a Three.js application?

After browsing through several related topics on SO, I'm still unable to find a solution to my current issue. The problem I'm facing is that the .glb model simply refuses to load. My Vue application utilizes webpack (specifically the Quasar frame ...

"Unlock the power of Meteor: dynamically serve up the specific range of items

I am facing a challenge with my vast collection of over 5000+ records. I aim to display the records in groups of 10 for easier viewing. How can I update the data dynamically to achieve this? Here is what I have attempted so far: In my server.js file : M ...

Issues with Fetch API and CORS in Web Browsers

Hello, I'm encountering an issue related to CORS and the Fetch API when using browsers. Currently, my setup involves running a NodeJS server built with Express on localhost:5000. This server responds to a GET request made to the URL /get_a, serving ...

ReactJS state refuses to update

In my FreeCodeCamp leaderboard table, I have implemented functionality where clicking on the highlighted table header calls different URLs based on sorting criteria. The application either calls https://fcctop100.herokuapp.com/api/fccusers/top/recent or ht ...

I am eager to create a Material-UI textfield using an array

My current task involves utilizing TextField based on an Array, but I am facing an issue with dynamically changing all the values. I understand that I can employ ternary conditions to accomplish this task effectively. const TextField = () => { r ...

Utilizing the Django object array in AngularJS – a comprehensive guide

I have a Django variable structured like this: [<Topic object>, <Topic object>] When passing it to Angular using ng-init, I wrote the following: <div class="profile-navigation" ng-init="ProfileTopics={{ProfileTopics|safe}} "> However, ...

The error message "POST .../wp-admin/admin-ajax.php net::ERR_CONNECTION_CLOSED" appears when a WordPress AJAX request receives data that exceeds 1MB in size

When I attempt to submit a jquery ajax form from the frontend and upload a blob (a variable of string) as a .txt file to WordPress using wp_handle_upload(), everything works smoothly until the file size reaches around 1mb. At that point, an error is displa ...

An unhandled promise rejection occurred because no routes could be found to match. URL Segment:

I'm facing an issue with my application where it doesn't recognize the route even though I have defined and imported it in app.module. Whenever I try to redirect to a specific route upon data retrieval, I encounter this exception: onSubmit(){ ...

Encountering issues while trying to incorporate a trading chart library into an Angular 7 project

ERROR in src/assets/datafeeds/udf/src/udf-compatible-datafeed-base.ts(243,74): error TS2339: 'errmsg' Property Not Found The property 'errmsg' does not exist on the type 'UdfErrorResponse | UdfSearchSymbolsResponse'. The p ...

Using json_encode with chart.js will not produce the desired result

I am attempting to utilize chart.js (newest version) to generate a pie chart. I have constructed an array that I intend to use as the data input for the chart. This is the PHP code snippet: <?php if($os != null) { $tiposOs = array('Orçamento ...

Tips for passing down props or all the properties of an object to create a dynamic component

I am facing an issue with a v-for loop in my project. The loop is supposed to iterate through objects in a list of todos fetched from the backend. These objects are then passed down to a child component, which displays each todo individually. However, I ha ...

Discovering if an input field is read-only or not can be achieved by using Selenium WebDriver along with Java

Currently, I am utilizing selenium webdriver along with Java to create a script. One issue we are encountering is that certain fields become disabled after clicking on a button. We need to determine if these fields are transitioning into readonly mode or ...