WebRTC在iOS Safari

时间:2018-02-08 16:12:46

标签: ios angular safari webrtc zonejs

我正在使用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&lt; - &gt;桌面/ Chrome
  • 桌面/ Chrome&lt; - &gt;桌面/ Firefox
  • 桌面/ Chrome&lt; - &gt;桌面/ Safari
  • 桌面/ Chrome&lt; - &gt; Android / Tab / Chrome
  • 桌面/ Chrome&lt; - &gt; iPhone / Safari
  • 桌面/ Chrome&lt; - &gt; iPad / Safari
  • 桌面/ Safari&lt; - &gt; iPhone / Safari
  • 桌面/ Safari&lt; - &gt; iPad / Safari
  • iPad / Safari&lt; - &gt; iPhone / Safari

设备规格:

桌面/铬
- Macbook MacOS 10.12.6
- Chrome 64.0.3282.140

桌面/火狐
- Macbook MacOS 10.12.6
- Firefox 58.0.1

桌面/野生
- Macbook MacOS 10.12.6
- Safari 11.0.3

的Android /标签/铬
- 三星Galaxy Tab3 8.0英寸(SM-T310)
- Android 4.4.2
- Chrome 64.0.3282.137

ipad公司/野生
- iPad mini 2(A1489)
- iOS 11.2.5
- Safari

iPhone / Safari浏览器
- iPhone 6(A1586)
- iOS 11.2.5
- Safari

之后我做了另一项测试,将adapter-latest.jsindex.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安全网络服务器,同时信令服务器也会运行。

测试结果

在这些情况下效果很好:

  • 桌面/ Chrome&lt; - &gt;桌面/ Chrome
  • 桌面/ Chrome&lt; - &gt;桌面/ Safari
  • 桌面/ Chrome&lt; - &gt; Android / Tab / Chrome
  • 桌面/ Chrome&lt; - &gt;桌面/ Firefox

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

  • 桌面/ Chrome&lt; - &gt; iPhone / Safari
  • 桌面/ Chrome&lt; - &gt; iPad / Safari
  • 桌面/ Safari&lt; - &gt; iPhone / Safari
  • 桌面/ Safari&lt; - &gt; iPad / Safari
  • iPad / Safari&lt; - &gt; iPhone / Safari

添加Webrtc适配器

然后我安装webrtc-adapter

npm install --save webrtc-adapter@6.1.1

app.component.ts中,我添加了import 'webrtc-adapter';

但事情变得更糟!

测试结果

在这些情况下效果很好:

  • 桌面/ Chrome&lt; - &gt;桌面/ Chrome
  • 桌面/ Chrome&lt; - &gt;桌面/ Safari
  • 桌面/ Chrome&lt; - &gt; Android / Tab / Chrome
  • 桌面/ Chrome&lt; - &gt;桌面/ Firefox

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

  • 桌面/ Chrome&lt; - &gt; iPhone / Safari
  • 桌面/ Chrome&lt; - &gt; iPad / Safari

LocalStream在两侧都可见,但remoteStream在两侧都不可见。日志记录表明已创建peerConnection。优惠是发送/接收,回复是发送/接收。 RemoteStream已添加但不可见。没有冰候选人正在发送。 RTC对等连接状态更改为“检查&#39;”。没有错误消息。在以下情况下也会发生同样的情况:

  • 桌面/ Safari&lt; - &gt; iPhone / Safari
  • 桌面/ Safari&lt; - &gt; iPad / Safari
  • iPad / Safari&lt; - &gt; iPhone / Safari

我的结论:

我有一个有效的WebRTC环境,只是简单的带有javascript的html。然后我用打字稿把它放到Angular 5中,它在iOS Safari上不再起作用了。这必须是Angular 5,或者打字稿或者像zone.js这样的依赖项的问题。

我的问题:

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

非常感谢帮助!!

1 个答案:

答案 0 :(得分:2)

添加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上针对iOSStare冻结的主要问题删除了一个问题。