Screensharing in Angular 6 in Firefox
I'm making an Angular application and I need to be able to share the users screen.
I'm using adapter.js version 6.4.8 and testing it in Firefox Developer 64.0b11 & Firefox 63.0.3, I know there are a lot of differences in implementations between browsers. I want to make the application work in Firefox at least, if I can support more browsers that's even better.
After running the following command
npm install webrtc-adapter && @types/webrtc
I imported the adapter like this:
import 'webrtc-adapter'
There are a lot of changes being made around capturing screens in webRTC recently it seems, the most recent draft of WebRTC specs says you have to implement screencapture like this:
try {
let mediaStream = await navigator.mediaDevices.getDisplayMedia({video:true});
videoElement.srcObject = mediaStream;
} catch (e) {
console.log('Unable to acquire screen capture: ' + e);
}
Implementation in my project
Using this method gives the error in both versions of Firefox:
TypeError: "navigator.mediaDevices.getDisplayMedia is not a function"
Also, in the node CLI if gives me this error:
ERROR in src/app/video/video.component.ts(32,52): error TS2339: Property 'getDisplayMedia' does not exist on type 'MediaDevices'.
I also found this post:
https://groups.google.com/forum/#!topic/mozilla.dev.platform/20EhEy_ahKg
Which states (I think?) that the navigator.mediaDevices.getDisplayMedia is not supported until Firefox 64/65.
But isn't that what the adapter.js API is for? I thought adapter.js acted as an abstraction layer between the spec and different browser implementations.
At this point I don't know what I'm doing wrong, am I importing the webrtc-adapter wrong in my Angular project, interpreting the specs wrong?
I hope I provided you with enough information for you to help me, I'd really appreciate help with this problem because webRTC is new to me and I don't know what to do next.
Handy links I found trying to solve this problem:
Share screen in Firefox using RTCMultiConnection
https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/
https://jsfiddle.net/jib1/q75yb8pf
These are solutions of how to solve this problem in javascript, but I can't seem to make it work in typescript.
EDIT: I got it to work thanks to the answers of Philipp Hancke & jib, what I did is import the webrtc-adapter like this:
import adapter from "webrtc-adapter";
And called it from my code like this:
var video = document.querySelector('video');
if (adapter.browserDetails.browser == 'firefox') {
adapter.browserShim.shimGetDisplayMedia(window, 'screen');
}
navigator.mediaDevices.getDisplayMedia({video: true}).then(this.onSucces).catch(this.onError);
}
onSucces(stream: MediaStream): void{
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
}
onError(error: Error):void {
console.log('Error message: ' + error.message);
console.log('Error name: ' + error.name);
}
angular firefox webrtc screensharing get-display-media
add a comment |
I'm making an Angular application and I need to be able to share the users screen.
I'm using adapter.js version 6.4.8 and testing it in Firefox Developer 64.0b11 & Firefox 63.0.3, I know there are a lot of differences in implementations between browsers. I want to make the application work in Firefox at least, if I can support more browsers that's even better.
After running the following command
npm install webrtc-adapter && @types/webrtc
I imported the adapter like this:
import 'webrtc-adapter'
There are a lot of changes being made around capturing screens in webRTC recently it seems, the most recent draft of WebRTC specs says you have to implement screencapture like this:
try {
let mediaStream = await navigator.mediaDevices.getDisplayMedia({video:true});
videoElement.srcObject = mediaStream;
} catch (e) {
console.log('Unable to acquire screen capture: ' + e);
}
Implementation in my project
Using this method gives the error in both versions of Firefox:
TypeError: "navigator.mediaDevices.getDisplayMedia is not a function"
Also, in the node CLI if gives me this error:
ERROR in src/app/video/video.component.ts(32,52): error TS2339: Property 'getDisplayMedia' does not exist on type 'MediaDevices'.
I also found this post:
https://groups.google.com/forum/#!topic/mozilla.dev.platform/20EhEy_ahKg
Which states (I think?) that the navigator.mediaDevices.getDisplayMedia is not supported until Firefox 64/65.
But isn't that what the adapter.js API is for? I thought adapter.js acted as an abstraction layer between the spec and different browser implementations.
At this point I don't know what I'm doing wrong, am I importing the webrtc-adapter wrong in my Angular project, interpreting the specs wrong?
I hope I provided you with enough information for you to help me, I'd really appreciate help with this problem because webRTC is new to me and I don't know what to do next.
Handy links I found trying to solve this problem:
Share screen in Firefox using RTCMultiConnection
https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/
https://jsfiddle.net/jib1/q75yb8pf
These are solutions of how to solve this problem in javascript, but I can't seem to make it work in typescript.
EDIT: I got it to work thanks to the answers of Philipp Hancke & jib, what I did is import the webrtc-adapter like this:
import adapter from "webrtc-adapter";
And called it from my code like this:
var video = document.querySelector('video');
if (adapter.browserDetails.browser == 'firefox') {
adapter.browserShim.shimGetDisplayMedia(window, 'screen');
}
navigator.mediaDevices.getDisplayMedia({video: true}).then(this.onSucces).catch(this.onError);
}
onSucces(stream: MediaStream): void{
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
}
onError(error: Error):void {
console.log('Error message: ' + error.message);
console.log('Error name: ' + error.name);
}
angular firefox webrtc screensharing get-display-media
add a comment |
I'm making an Angular application and I need to be able to share the users screen.
I'm using adapter.js version 6.4.8 and testing it in Firefox Developer 64.0b11 & Firefox 63.0.3, I know there are a lot of differences in implementations between browsers. I want to make the application work in Firefox at least, if I can support more browsers that's even better.
After running the following command
npm install webrtc-adapter && @types/webrtc
I imported the adapter like this:
import 'webrtc-adapter'
There are a lot of changes being made around capturing screens in webRTC recently it seems, the most recent draft of WebRTC specs says you have to implement screencapture like this:
try {
let mediaStream = await navigator.mediaDevices.getDisplayMedia({video:true});
videoElement.srcObject = mediaStream;
} catch (e) {
console.log('Unable to acquire screen capture: ' + e);
}
Implementation in my project
Using this method gives the error in both versions of Firefox:
TypeError: "navigator.mediaDevices.getDisplayMedia is not a function"
Also, in the node CLI if gives me this error:
ERROR in src/app/video/video.component.ts(32,52): error TS2339: Property 'getDisplayMedia' does not exist on type 'MediaDevices'.
I also found this post:
https://groups.google.com/forum/#!topic/mozilla.dev.platform/20EhEy_ahKg
Which states (I think?) that the navigator.mediaDevices.getDisplayMedia is not supported until Firefox 64/65.
But isn't that what the adapter.js API is for? I thought adapter.js acted as an abstraction layer between the spec and different browser implementations.
At this point I don't know what I'm doing wrong, am I importing the webrtc-adapter wrong in my Angular project, interpreting the specs wrong?
I hope I provided you with enough information for you to help me, I'd really appreciate help with this problem because webRTC is new to me and I don't know what to do next.
Handy links I found trying to solve this problem:
Share screen in Firefox using RTCMultiConnection
https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/
https://jsfiddle.net/jib1/q75yb8pf
These are solutions of how to solve this problem in javascript, but I can't seem to make it work in typescript.
EDIT: I got it to work thanks to the answers of Philipp Hancke & jib, what I did is import the webrtc-adapter like this:
import adapter from "webrtc-adapter";
And called it from my code like this:
var video = document.querySelector('video');
if (adapter.browserDetails.browser == 'firefox') {
adapter.browserShim.shimGetDisplayMedia(window, 'screen');
}
navigator.mediaDevices.getDisplayMedia({video: true}).then(this.onSucces).catch(this.onError);
}
onSucces(stream: MediaStream): void{
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
}
onError(error: Error):void {
console.log('Error message: ' + error.message);
console.log('Error name: ' + error.name);
}
angular firefox webrtc screensharing get-display-media
I'm making an Angular application and I need to be able to share the users screen.
I'm using adapter.js version 6.4.8 and testing it in Firefox Developer 64.0b11 & Firefox 63.0.3, I know there are a lot of differences in implementations between browsers. I want to make the application work in Firefox at least, if I can support more browsers that's even better.
After running the following command
npm install webrtc-adapter && @types/webrtc
I imported the adapter like this:
import 'webrtc-adapter'
There are a lot of changes being made around capturing screens in webRTC recently it seems, the most recent draft of WebRTC specs says you have to implement screencapture like this:
try {
let mediaStream = await navigator.mediaDevices.getDisplayMedia({video:true});
videoElement.srcObject = mediaStream;
} catch (e) {
console.log('Unable to acquire screen capture: ' + e);
}
Implementation in my project
Using this method gives the error in both versions of Firefox:
TypeError: "navigator.mediaDevices.getDisplayMedia is not a function"
Also, in the node CLI if gives me this error:
ERROR in src/app/video/video.component.ts(32,52): error TS2339: Property 'getDisplayMedia' does not exist on type 'MediaDevices'.
I also found this post:
https://groups.google.com/forum/#!topic/mozilla.dev.platform/20EhEy_ahKg
Which states (I think?) that the navigator.mediaDevices.getDisplayMedia is not supported until Firefox 64/65.
But isn't that what the adapter.js API is for? I thought adapter.js acted as an abstraction layer between the spec and different browser implementations.
At this point I don't know what I'm doing wrong, am I importing the webrtc-adapter wrong in my Angular project, interpreting the specs wrong?
I hope I provided you with enough information for you to help me, I'd really appreciate help with this problem because webRTC is new to me and I don't know what to do next.
Handy links I found trying to solve this problem:
Share screen in Firefox using RTCMultiConnection
https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/
https://jsfiddle.net/jib1/q75yb8pf
These are solutions of how to solve this problem in javascript, but I can't seem to make it work in typescript.
EDIT: I got it to work thanks to the answers of Philipp Hancke & jib, what I did is import the webrtc-adapter like this:
import adapter from "webrtc-adapter";
And called it from my code like this:
var video = document.querySelector('video');
if (adapter.browserDetails.browser == 'firefox') {
adapter.browserShim.shimGetDisplayMedia(window, 'screen');
}
navigator.mediaDevices.getDisplayMedia({video: true}).then(this.onSucces).catch(this.onError);
}
onSucces(stream: MediaStream): void{
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
}
onError(error: Error):void {
console.log('Error message: ' + error.message);
console.log('Error name: ' + error.name);
}
angular firefox webrtc screensharing get-display-media
angular firefox webrtc screensharing get-display-media
edited Dec 24 '18 at 14:39
jib
21.1k64491
21.1k64491
asked Nov 21 '18 at 19:39
RobbeVRobbeV
83
83
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
screensharing is not shimmed by default, see the mozilla hacks post for instructions how to use getDisplayMedia. Also make sure you are using the latest adapter.js version, getDisplayMedia moved recently.
When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.
– RobbeV
Nov 21 '18 at 20:01
try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.
– Philipp Hancke
Nov 21 '18 at 20:35
Yeah that did the job, thanks a lot! And keep up the good work ;)
– RobbeV
Nov 21 '18 at 20:39
add a comment |
It works for me in Firefox with adapter-latest.js like this:
adapter.browserShim.shimGetDisplayMedia(window, "window"); // or "screen"
(async () => {
try {
video.srcObject = await navigator.mediaDevices.getDisplayMedia({video: true});
} catch(e) {
console.log(e);
}
})();
Unfortunately, Firefox still forces the app to pick between sharing the full screen or a window. This should be fixed once it's supported natively.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419415%2fscreensharing-in-angular-6-in-firefox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
screensharing is not shimmed by default, see the mozilla hacks post for instructions how to use getDisplayMedia. Also make sure you are using the latest adapter.js version, getDisplayMedia moved recently.
When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.
– RobbeV
Nov 21 '18 at 20:01
try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.
– Philipp Hancke
Nov 21 '18 at 20:35
Yeah that did the job, thanks a lot! And keep up the good work ;)
– RobbeV
Nov 21 '18 at 20:39
add a comment |
screensharing is not shimmed by default, see the mozilla hacks post for instructions how to use getDisplayMedia. Also make sure you are using the latest adapter.js version, getDisplayMedia moved recently.
When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.
– RobbeV
Nov 21 '18 at 20:01
try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.
– Philipp Hancke
Nov 21 '18 at 20:35
Yeah that did the job, thanks a lot! And keep up the good work ;)
– RobbeV
Nov 21 '18 at 20:39
add a comment |
screensharing is not shimmed by default, see the mozilla hacks post for instructions how to use getDisplayMedia. Also make sure you are using the latest adapter.js version, getDisplayMedia moved recently.
screensharing is not shimmed by default, see the mozilla hacks post for instructions how to use getDisplayMedia. Also make sure you are using the latest adapter.js version, getDisplayMedia moved recently.
answered Nov 21 '18 at 19:47
Philipp HanckePhilipp Hancke
6,4791513
6,4791513
When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.
– RobbeV
Nov 21 '18 at 20:01
try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.
– Philipp Hancke
Nov 21 '18 at 20:35
Yeah that did the job, thanks a lot! And keep up the good work ;)
– RobbeV
Nov 21 '18 at 20:39
add a comment |
When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.
– RobbeV
Nov 21 '18 at 20:01
try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.
– Philipp Hancke
Nov 21 '18 at 20:35
Yeah that did the job, thanks a lot! And keep up the good work ;)
– RobbeV
Nov 21 '18 at 20:39
When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.
– RobbeV
Nov 21 '18 at 20:01
When trying to use adapter.browserDetails.browser & adapter.browserShim.shimGetDisplayMedia() typescript gives the following error: [ts] Cannot find name 'adapter'. [2304], do you know why this is? It seems like it doesn't know what adapter is and can't access. Is it a problem with the importing of webrtc-adapter? I'm using version 6.4.8 of webrtc-adapter which is the latest.
– RobbeV
Nov 21 '18 at 20:01
try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.
– Philipp Hancke
Nov 21 '18 at 20:35
try importing like this: import adapter from "webrtc-adapter"; beyond that it might be a typescript thing which i know nothing about.
– Philipp Hancke
Nov 21 '18 at 20:35
Yeah that did the job, thanks a lot! And keep up the good work ;)
– RobbeV
Nov 21 '18 at 20:39
Yeah that did the job, thanks a lot! And keep up the good work ;)
– RobbeV
Nov 21 '18 at 20:39
add a comment |
It works for me in Firefox with adapter-latest.js like this:
adapter.browserShim.shimGetDisplayMedia(window, "window"); // or "screen"
(async () => {
try {
video.srcObject = await navigator.mediaDevices.getDisplayMedia({video: true});
} catch(e) {
console.log(e);
}
})();
Unfortunately, Firefox still forces the app to pick between sharing the full screen or a window. This should be fixed once it's supported natively.
add a comment |
It works for me in Firefox with adapter-latest.js like this:
adapter.browserShim.shimGetDisplayMedia(window, "window"); // or "screen"
(async () => {
try {
video.srcObject = await navigator.mediaDevices.getDisplayMedia({video: true});
} catch(e) {
console.log(e);
}
})();
Unfortunately, Firefox still forces the app to pick between sharing the full screen or a window. This should be fixed once it's supported natively.
add a comment |
It works for me in Firefox with adapter-latest.js like this:
adapter.browserShim.shimGetDisplayMedia(window, "window"); // or "screen"
(async () => {
try {
video.srcObject = await navigator.mediaDevices.getDisplayMedia({video: true});
} catch(e) {
console.log(e);
}
})();
Unfortunately, Firefox still forces the app to pick between sharing the full screen or a window. This should be fixed once it's supported natively.
It works for me in Firefox with adapter-latest.js like this:
adapter.browserShim.shimGetDisplayMedia(window, "window"); // or "screen"
(async () => {
try {
video.srcObject = await navigator.mediaDevices.getDisplayMedia({video: true});
} catch(e) {
console.log(e);
}
})();
Unfortunately, Firefox still forces the app to pick between sharing the full screen or a window. This should be fixed once it's supported natively.
answered Nov 21 '18 at 20:39
jibjib
21.1k64491
21.1k64491
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419415%2fscreensharing-in-angular-6-in-firefox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown