8

我正在使用 WebRTC 构建一个应用程序,但它在 iOS Safari 上的 Angular 5 中不起作用。我使用原生 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有一切:信号、提议、回答、候选者以及将流连接到 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

Android/Tab/Chrome
- 三星 Galaxy Tab3 8.0 英寸 (SM-T310)
- Android 4.4.2
- Chrome 64.0.3282.137

iPad/Safari
- iPad mini 2 (A1489)
- iOS 11.2.5
- Safari

iPhone/Safari
- iPhone 6 (A1586)
- iOS 11.2.5
- Safari

之后,我做了另一次测试,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 在 typescript 中工作。我还没有导入任何适配器。

然后构建它:

ng build

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

测试结果

它在这些情况下运行良好:

  • 桌面/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 webrtc-adapter@6.1.1

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 已添加但不可见。没有冰候选人被发送。RTC 对等连接状态更改为“检查”。没有错误消息。在以下情况下也会发生同样的情况:

  • 桌面/Safari <-> iPhone/Safari
  • 桌面/Safari <-> iPad/Safari
  • iPad/Safari <-> iPhone/Safari

我的结论:

我有一个工作的 WebRTC 环境,只是带有 javascript 的纯 html。然后我用打字稿把它放到 Angular 5 中,它在 iOS Safari 上不再工作了。这一定是 Angular 5 或 typescript 或 zone.js 之类的依赖项的问题。

我的问题:

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

非常感谢您的帮助!

4

1 回答 1

8

添加后出现的问题是由于在(如果使用)中添加以下行webrtc-adapter引起并解决zone.jspolyfills.tsangular-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 上针对 localStream 冻结的 iOS 上的主要问题放弃了一个问题。

于 2018-02-12T16:41:00.547 回答