Her*_*sen 7 safari ios webrtc zonejs angular
我正在使用 WebRTC 构建一个应用程序，但它在 iOS Safari 上的 Angular 5 中不起作用。我使用原生 WebRTC API，没有框架。
为了证明我的观点 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
- Macbook MacOS 10.12.6
- Chrome 64.0.3282.140
桌面/Firefox
- Macbook MacOS 10.12.6
- Firefox 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 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-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 已创建。发送/接收报价，发送/接收答案。RemoteStream 已添加但不可见。没有发送 Ice 候选人。RTC 对等连接状态更改为“正在检查”。没有错误消息。在以下情况下也会发生同样的情况：
我有一个可用的 WebRTC 环境，只是带有 javascript 的纯 html。然后我用打字稿把它放到 Angular 5 中，它在 iOS Safari 上不再工作了。这一定是 Angular 5、打字稿或 zone.js 等依赖项的问题。
你同意我的结论还是我忽略了什么？
谁知道是什么问题并知道解决方案？
非常感谢帮助！！
添加后出现的问题是由在（如果使用）中添加以下行webrtc-adapter引起zone.js并解决的polyfills.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 上提出了一个问题，以解决 iOS 上 localStream 冻结的主要问题。
| 归档时间： |
|
| 查看次数： |
4613 次 |
| 最近记录： |