我正在使用 WebRTC 构建一个应用程序，但它无法在 iOS Safari 上的 Angular 5 中运行。我使用原生 WebRTC API，没有框架。
首先没有 Angular
为了证明我的观点 Angular 是问题所在，我使用纯 html 和 javascript 进行了 WebRTC 测试。所以我有一个index.html and a my-webrtc.js.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebRTC Test</title>
</head>
<body>
<div>
<video id="local-video" playsinline autoplay muted></video>
<video id="remote-video" playsinline autoplay></video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/my-webrtc.js"></script>
</body>
</html>
我将这两个文件放在 TLS/SSL 安全 Web 服务器上。在同一台服务器上，我安装了一个基本的信令服务器。在里面my-webrtc.js一切应有尽有：发信号、提供、应答、ice 候选者以及将流连接到 HTML 元素。
对于所有测试，我仅使用 LAN 只是为了确保不需要 STUN 或 TURN。
检测结果
在这些经过测试的情况下一切正常：
- 桌面/Chrome 桌面/Chrome
- 桌面/Chrome 桌面/Firefox
- 桌面/Chrome 桌面/Safari
- 桌面/Chrome Android/Tab/Chrome
- 桌面/Chrome iPhone/Safari
- 桌面/Chrome iPad/Safari
- 桌面/Safari iPhone/Safari
- 桌面/Safari iPad/Safari
- iPad/Safari iPhone/Safari
设备规格：
桌面/Chrome
- Macbook MacOS 10.12.6
- Chrome 64.0.3282.140
桌面/火狐
- Macbook MacOS 10.12.6
- 火狐58.0.1
桌面/Safari
- Macbook MacOS 10.12.6
- Safari 11.0.3
安卓/标签/Chrome
- 三星 Galaxy Tab3 8.0 英寸 (SM-T310)
- 安卓4.4.2
- Chrome 64.0.3282.137
iPad/Safari
- iPad 迷你 2 (A1489)
- iOS 11.2.5
- 苹果浏览器
iPhone/Safari
- iPhone 6 (A1586)
- iOS 11.2.5
- 苹果浏览器
之后我做了另一次测试离开adapter-latest.js出于index.html然后上述所有测试情况仍然可以正常工作。
现在我把所有东西都放在 Angular 中
现在我进行下一步。我使用 Angular CLI 版本 1.6.3 创建一个新的 Angular 测试应用程序：
ng new webrtc-angular-test
它会生成一个新的 Angular 5.2.3 应用程序。为了发出信号，我需要安装socket.io:
npm install --save [email protected] /cdn-cgi/l/email-protection
对于打字稿中的打字，我添加：
npm install --save @types/[email protected] /cdn-cgi/l/email-protection
npm install --save @types/[email protected] /cdn-cgi/l/email-protection
Then in app.component.html我把同样的index.html:
<video id="local-video" playsinline autoplay muted></video>
<video id="remote-video" playsinline autoplay></video>
And in app.component.ts我粘贴所有内容my-webrtc.js。我必须做一些小的修改，以便 javascript 在打字稿中工作。我还没有导入任何适配器。
然后构建它：
ng build
并复制内容dist到信令服务器也运行的同一个 TLS/SSL 安全 Web 服务器。
测试结果
它在这些情况下效果很好：
- 桌面/Chrome 桌面/Chrome
- 桌面/Chrome 桌面/Safari
- 桌面/Chrome Android/Tab/Chrome
- 桌面/Chrome 桌面/Firefox
在 iOS 上授予权限后，localStream 可见。当。。。的时候RTCPeerConnection建立后，remoteStream 在 iOS 上正常可见，几乎同时 localStream 冻结。控制台中没有错误消息。在桌面端一切正常。如果涉及两个 iOS 设备，则两侧的 localStream 都会冻结。这种情况发生在以下情况：
- 桌面/Chrome iPhone/Safari
- 桌面/Chrome iPad/Safari
- 桌面/Safari iPhone/Safari
- 桌面/Safari iPad/Safari
- iPad/Safari iPhone/Safari
添加 Webrtc 适配器
然后我安装webrtc-adapter:
npm install --save [email protected] /cdn-cgi/l/email-protection
In app.component.ts我放了一个import 'webrtc-adapter';
但事情变得更糟！
测试结果
它在这些情况下效果很好：
- 桌面/Chrome 桌面/Chrome
- 桌面/Chrome 桌面/Safari
- 桌面/Chrome Android/Tab/Chrome
- 桌面/Chrome 桌面/Firefox
在 iOS 上授予权限后，localStream 可见。当。。。的时候RTCPeerConnection建立后，remoteStream 在 iOS 上正常可见，几乎同时 localStream 冻结。控制台中没有错误消息。在桌面端一切正常。如果涉及两个 iOS 设备，则两侧的 localStream 都会冻结。这种情况发生在以下情况：
- 桌面/Chrome iPhone/Safari
- 桌面/Chrome iPad/Safari
LocalStream 两边都可见，但remoteStream 两边都不可见。日志记录显示peerConnection 已创建。发送/接收报价并发送/接收答复。 RemoteStream 已添加但不可见。没有发送 Ice 候选人。 RTC 对等连接状态更改为“正在检查”。没有错误消息。以下情况也会发生同样的情况：
- 桌面/Safari iPhone/Safari
- 桌面/Safari iPad/Safari
- iPad/Safari iPhone/Safari
我的结论：
我有一个工作的 WebRTC 环境，只是带有 javascript 的纯 html。然后我用 typescript 将其放入 Angular 5 中，但它在 iOS Safari 上不再工作。这肯定是 Angular 5、typescript 或 zone.js 之类的依赖项的问题。
我的问题：
您同意我的结论还是我忽略了某些事情？
谁知道问题是什么并知道解决方案？
非常感谢帮助！
