WebRTC with Angular is not working on iOS Safari

hermanfransen commented 6 years ago

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

WebRTC with Angular is not working on iOS Safari. Using WebRTC without Angular works fine on iOS Safari. The localStream freezes after the RTCPeerConnection is established. There are no problems on Desktop/Safari, Desktop/Chrome and Android/Chrome.

Expected behavior

The localStream should not freeze after the RTCPeerConnection is established on iOS Safari.

Minimal reproduction of the problem with instructions

Apple is natively supporting WebRTC since iOS 11 and Safari 11 on the desktop.

As a base for testing I used: https://github.com/webrtc/samples/tree/gh-pages/src/content/peerconnection/pc1

Because this example has playsinline missing in video element it's not working on iOS Safari. I took the code of this example in a plunker and added playsinline.

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

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

Tested this plunker in iOS Safari (version 11.2.6) on a iPhone 6 (A1586) and iPad mini 2 (A1489). That is working fine !!

Now the same code I put into an Angular app:

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

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

In polyfills.ts added patches:

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

In detail what goes wrong:

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

Environment


Angular version: 5.0.0

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [x] Safari (iOS) version 11.2.6
- [ ] IE version XX
- [ ] Edge version XX

I also written an issue in the zone.js without any result: https://github.com/angular/zone.js/issues/1019

4i-helpynet commented 5 years ago

Problem accour at iOS 12.1 too with Cordova app.

JerryFZhang commented 4 years ago

Any update on this? Thanks!

angular / angular