angular: getUserMedia and RTCPeerConnection gives problems in iOS 11.2.5 on Safari

Same WebRTC app with Angular (and zone.js patches) gives problems, without Angular no problem.

I am not sure if this is really zone.js related to be honest. When I read all the stuff I found here, I think it is. I miss the knowledge with zone.js to really investigate this, so hopefully you can help me.

I forked @benbro app from this issue. Then pc.component.html added playsinline to support Safari:

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

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';

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

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

Tested this app in iOS Safari (version 11.2.5) on a iPhone 6 (A1586) and iPad mini 2 (A1489).

In both situations this is the behaviour:

The ‘Start’ button works fine. When I give permission localStream is visible. After the ‘Call’ button is pressed the localStream freezes. The remoteStream is visible normal. No error messages in the console.

When I use the same on plain html and javascript no freezes of localStream occurs:

App: https://run.plnkr.co/plunks/z4BJ5OJxFM5WQp7ndD6g/

Editor: https://plnkr.co/edit/z4BJ5OJxFM5WQp7ndD6g

This Plunker is the same as https://webrtc.github.io/samples/src/content/peerconnection/pc1 but with playsinline added