WebRTC 在 Angular 5 on iOS Safari 中不工作

WebRTC does not work in Angular 5 on iOS Safari

我正在使用 WebRTC 构建一个应用程序，但它在 Angular 5 和 iOS Safari 中无法运行。我使用原生 WebRTC API，没有框架。

首先没有Angular

为了证明我的观点 Angular 是问题所在，我用普通的 html 和 javascript 进行了 WebRTC 测试。所以我有一个 index.html 和一个 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>

我将这两个文件放在 TSL/SSL 安全网络服务器上。在同一台服务器上，我安装了一个基本的信令服务器。在 my-webrtc.js 中有一切：信号、提供、回答、ice candidates 以及将流连接到 HTML 元素。

对于所有测试，我只使用 LAN 来确保不需要 STUN 或 TURN。

测试结果

在这些测试情况下一切正常：

设备规格：

Desktop/Chrome
- Macbook MacOS 10.12.6
- Chrome 64.0.3282.140

Desktop/Firefox
- Macbook MacOS 10.12.6
- 火狐 58.0.1

Desktop/Safari
- Macbook MacOS 10.12.6
- 野生动物园 11.0.3

Android/Tab/Chrome
- 三星 Galaxy Tab3 8.0 英寸 (SM-T310)
- Android 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 socket.io-client@2.0.4

对于打字稿中的打字，我添加：

npm install --save @types/webrtc@0.0.22
npm install --save @types/socket.io-client@1.4.32

然后在 app.component.html 中输入与 index.html 相同的内容：

<video id="local-video" playsinline autoplay muted></video>
<video id="remote-video" playsinline autoplay></video>

然后在 app.component.ts 中，我粘贴了 my-webrtc.js 中的所有内容。我不得不做一些小的修改，以便 javascript 在打字稿中工作。我还没有导入任何适配器。

然后构建它：

ng build

并将 dist 的内容复制到运行信令服务器的同一 TSL/SSL 安全网络服务器。

测试结果

在这些情况下效果很好：

授予 iOS 权限后，localStream 可见。当 RTCPeerConnection 建立时，remoteStream 在 iOS 上正常可见，几乎同时 localStream 冻结。控制台中没有错误消息。在桌面端一切正常。如果涉及两个 iOS 设备，则双方的 localStream 都会冻结。在这些情况下会发生这种情况：

添加 Webrtc 适配器

然后我安装 webrtc-adapter: 

npm install --save webrtc-adapter@6.1.1

在app.component.ts我放了一个import 'webrtc-adapter';

但事情变得更糟了！！

测试结果

在这些情况下效果很好：

授予 iOS 权限后，localStream 可见。当 RTCPeerConnection 建立时，remoteStream 在 iOS 上正常可见，几乎同时 localStream 冻结。控制台中没有错误消息。在桌面端一切正常。如果涉及两个 iOS 设备，则双方的 localStream 都会冻结。在这些情况下会发生这种情况：

LocalStream两边可见，remoteStream两边不可见。日志显示 peerConnection 已创建。报价是 send/received，答案是 send/received。 RemoteStream 已添加但不可见。没有 Ice Candidates 被发送。 RTC 对等连接状态更改为 'checking'。没有错误消息。在以下情况下也会发生同样的情况：

我的结论：

我有一个可用的 WebRTC 环境，只是简单的 html 和 javascript。然后我用 typescript 把它放到 Angular 5 中，它在 iOS Safari 上不再工作了。这一定是 Angular 5 或打字稿或 zone.js.

之类的依赖项的问题

我的问题：

你同意我的结论还是我忽略了什么？
谁知道问题是什么并知道解决方案？

非常感谢帮助！！

添加webrtc-adapter后出现的问题是由zone.js引起的，通过在polyfills.ts中添加以下行解决（如果使用angular-cli）

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

你应该在这个文件中已有的 import 'zone.js/dist/zone'; 之后添加它。

我在 GitHub 上针对 iOS 上 localStream 冻结的主要问题放弃了一个问题。