navigator.getDisplayMedia is not a function in angular 6

navigator.mediadevices.getdisplaymedia typescript
getdisplaymedia screenshot
navigator getusermedia is not a function
getdisplaymedia must be called from a user gesture handler
cannot read property 'getdisplaymedia' of undefined
media devices get display media
typescript navigator
angular screen sharing

I am trying to share user screen and need to use getDisplayMedia but getting error during project compile time

Property 'getDisplayMedia' does not exist on type 'Navigator'

Here is the code

let stream = await navigator.getDisplayMedia({ video: true })

Package versions are as

  1. Node v10.14.2
  2. NPM v6.5.0
  3. @angular/cli v6.1.5

According to the documentation you need to use navigator.mediaDevices.getDisplayMedia

The error you are seeing it because there is no property available with navigator named getDisplayMedia

navigator.getDisplayMedia is not a function in angular 6, getdisplaymedia must be called from a user gesture handler. navigator.​getusermedia is not a function cannot read property 'getdisplaymedia' of undefined getDisplayMedia now available in adapter.js Contributed by Philipp Hancke, doing things webrtc at appear.in. If you ever had a meeting over video and wanted to present some slides, there is a high chance you have used screen-sharing to do so. The WebRTC specification recently converged on a standard way to accomplish this.


In Angular 6+

let stream = await navigator.getDisplayMedia({ video: true })
console.log(stream)

Note: To record the screen in Angular 6+, you need to enable experimental web platform features in chrome://flags until it is launched properly because it is in development and testing mode

see the below image for details:

why does getDisplayMedia live on navigator and not navigator , Is there a reason for getDisplayMedia living on navigator instead of navigator. fippo opened this issue on Mar 3, 2018 · 6 comments. Closed Clarifications relating to the operation of constraints should not require moving the method. as we all know angular is being developed every day so there are lots of changes every day and this solution is for angular 6 and rxjs 6 first to work with http yo should import it from : after all you have to declare the HttpModule in app.module.ts


getDisplayMedia is no longer available in navigator. It was moved to navigator.mediaDevices.getDisplayMedia.

Source

Also make sure you have the typing for the navigator installed.

getDisplayMedia now available in adapter.js, Update 11/17/18: getDisplayMedia used to live on navigator but was We did not want to make any default integration choices that break feature which lets the developer supply a function that returns a Promise that  Use a pure pipe instead of a function in Angular templates. This only works with primitive input types. If the input is an object, make sure you are providing a new object reference.


MediaDevices.getDisplayMedia(), The MediaDevices interface's getDisplayMedia() method prompts the user to both in terms of whether or not they're supported at all by the media recorder let captureStream = null; try { captureStream = await navigator. as we all know angular is being developed every day so there are lots of changes every day and this solution is for angular 6 and rxjs 6 first to work with http yo should import it from : after all you have to declare the HttpModule in app.module.ts


How to record desktop screen in electron app using angular 6 , allowRunningInsecureContent: true } }) TypeError: navigator.getDisplayMedia is not a function More detail When I run angular (without Electron) and enable  As a general rule, when routing, the angular router will re-use the same instance of a component if it can. So, for example, navigating from /component/1 to /component/2, where the url is mapped to the same component (but with different params) will cause the router to instantiate an instance of Component when you navigate to /component/1, and then re-use that same instance when you navigate


Screensharing in Angular 6 in Firefox, Implementation in my project. Using this method gives the error in both versions of Firefox: TypeError: "navigator.mediaDevices.getDisplayMedia is not a function​  Angular Router: A Complete Example (build a Bootstrap Navigation Menu) Last Updated: 24 April 2020 local_offer Angular Router In this post, we are going to learn how to use several features of the Angular Router in order to build a navigation system with multiple navigation levels, similar to what you would find in an online learning platform or an online store like Amazon (but simpler).