getUserMedia and RTCPeerConnection

[benbro]

getUserMedia and RTCPeerConnection behave differently on Chrome, Firefox, Edge and Safari when using zone.js. On Chrome callbacks are run inside the zone while on other browsers they run outside the zone.

I've added the webrtc/samples PeerConnection example to a simple Angular 5 app.

Test the following app in Firefox 56 and compare it with Chrome 62.

• Click the 'Start' button to request a webcam stream.
• Click allow in the popup to use your camera.
• You should see your webcam on the left video element.
• The 'Call' button should be enabled (line 40) but it stays disabled on Firefox because the callback run outside the zone. On Chrome the callback run inside the zone and the 'Call' button is enabled.

App: https://angular-gitter-mgsmnr.stackblitz.io

Editor: https://stackblitz.com/edit/angular-gitter-mgsmnr

[JiaLiPassion]

@benbro , I will test it, thanks.

[aullman]

I have also found that events don't work on RTCPeerConnections in Safari at all when you include zone.js. With zone.js included on the page if I execute:

let pc = new RTCPeerConnection();
pc.addEventListener('icecandidate', function(){alert('candidate');});
pc.dispatchEvent(new Event('icecandidate'));

Then I don't get the alert at all, the event does not dispatch. But if I don't include zone.js then it works as expected. This results in WebRTC apps not working at all when using Zone.js because we can't get any of the ice candidate events.

[aullman]

Oops, sorry, just found this has already been fixed with https://github.com/angular/zone.js/issues/883

I just had to add this to my polyfills.ts file.

import 'zone.js/dist/webapis-rtc-peer-connection';

[JiaLiPassion]

@benbro , @aullman , just like @aullman said, to use getUserMedia and rtcpeerconnection, please include following files into polyfill.ts

// rtc peer connection patch
import 'zone.js/dist/webapis-rtc-peer-connection';
// getUserMedia patch
import 'zone.js/dist/zone-patch-user-media.js';

if there is still problem , please let me know.

[benbro]

@JiaLiPassion thanks. Is this specifically for Safari or for Edge and Firefox too?

[benbro]

Edge uses ORTC which uses newer API. Chrome is adding support over time. RTCIceGatherer RTCIceTransport RTCDtlsTransport RTCRtpSender RTCRtpReceiver

[JiaLiPassion]

@benbro , I am not familiar with the RTC differences between all those browsers, as your very first comments, some browser work, some not, is that correct?

And I will check those new API later.

[benbro]

RTCRtpSender RTCRtpSender and RTCRtpReceiver RTCIceGatherer RTCIceTransport RTCDtlsTransport

[hermanfransen]

I forked @benbro app and upgraded zone.js 0.8.18 -> 0.8.20 and polyfills.ts added patches:

// rtc peer connection patch
import 'zone.js/dist/webapis-rtc-peer-connection';
// getUserMedia patch
import 'zone.js/dist/zone-patch-user-media';

Then pc.component.html added playsinline to support Safari (see issue #1019):

<video #localVideo playsinline autoplay muted></video>
<video #remoteVideo playsinline autoplay></video>

App: https://webrtc-angular-test.stackblitz.io/

Editor: https://stackblitz.com/edit/webrtc-angular-test

But even with the patches the 'Call' button stays disabled on Firefox (I used Firefox 58.0.2 (64-bits) on MacOS 10.12.6)

[JiaLiPassion]

@hermanfransen , thank you for the stackblitz demo, I will check it.

[tamiorzel]

what about IE?

[hermanfransen]

@JiaLiPassion , you are welcome. It's the same as the repo I send you in #1019 by the way.

[hermanfransen]

@tamiorzel , WebRTC is not supported by IE. See this for more information.

[marcelrouw]

@hermanfransen There few WeRTC plugins for IE like Temasys. So it's possible to use WeRTC in IE. There are still some (mainly big) companies that rather use IE with a plugin instead of a modern browser with a native implementation of WeRTC.

[JiaLiPassion]

close this for duplicate issue in angular repo.