参考
WebRTC adapter.js是什么以及我们为什么需要它？（一）
WebRTC adapter.js是什么以及我们为什么需要它？（二）
https://github.com/webrtcHacks/adapter
一、adapter.js发展背景
adapter.js自2012年底或者2013年初WebRTC早期的时候就已经出现了。它最初是Google的apprtc demo的一部分。原始版本仍可在Chrome tree中找到。它是一个非常小的项目，还没有150行。主要功能是隐藏像webkitRTCPeerConnection和mozRTCPeerConnection这样的前缀差异，并提供函数将MediaStream附加到HTML的<audio>或<video>元素。
在WebRTC自由发展的日子里，每个人都在编写自己的库，使WebRTC更加简单。这在2015年中期开始发生变化，当时微软的Edge浏览器也出现了。虽然Edge浏览器不需要getUserMedia的前缀，但将MediaStream附加到视频元素仍然可以在三种不同的实现中使用。这表明有必要出现一种标准化的行为。另外，正如微软的Bernard Aboba指出的那样，书籍中出现的API的前缀版本—这是错误的引导。
随着复杂性的增加（目前超过2200行代码），对adapter.js代码本身进行更改的测试面临着更多的问题。最初由Selenium提供支持的测试已经分解为单元测试和端到端测试，这些测试使用标准测试工具，如karma，mocha，和chai，在Travis-CI上的各种浏览器中运行时做出决定，并将结果与以前的运行结果做比较。这体现了测试WebRTC库的最新技术水平，并一杯其他项目采用。
在2017年的大部分时间里，主要关注点都在Chrome中填充track-based API。这是向WebRTC 1.0 API迈出的一大步，在Mozilla的这篇博文中有所描述，同样也在adapter.js中。这些测试测试证明确保API的一致性是非常棘手的，因为现有代码可能依赖于与旧API的某些交互，并且该API未被指定。正如往常一样，在大量变化中也有一些回归—但是，在JavaScript库中发现可以固定版本的那些回归比使用本机生成的回归更好。在2018年初，Chrome 64版将会变得更稳定，原生的addTrack版本将会替代产生。注意：由于与getStats相关的错误，addTrack还没有完全准备好作为产品。直到Chrome M65的出现之前，shim还将是首选—确保你的adapter版本在更改后进行了更新。
二、adapter.js基本用法
1.在HTML中引入
https://webrtc.github.io/adapter/adapter-latest.js
引入指定的版本
https://webrtc.github.io/adapter/adapter-1.0.2.js
2.npm引入
npm install webrtc-adapter
3.使用
import adapter from 'webrtc-adapter';
看一下浏览器信息
adapter.browserDetails.browser
adapter.browserDetails.version
4.检查是否支持WebRTC，检查是否定义了RTCPeerConnection
!!window.RTCPeerConnection
三、WEBRTC能力测试
参考
https://webrtc.qq.com:8687/
http://qcloudtrtc.com/webrtc-samples/abilitytest/index.html
https://www.qcloudtrtc.com/webrtc-samples/index.html
https://main.qcloudimg.com/raw/document/product/pdf/647_16862_cn.pdf
1.页面准备
视频播放的媒介是 H5 提供的 Video（音视频）和 Audio（纯音频）。
video 和 audio 的 muted autoplay playsinline 属性都是需要注意的，请看下面的代码注释
<body >
<!-- 音视频 -->
<!--
本地视频流
muted:
本地视频流的video必须置为静音（muted)，否则会出现啸叫/回声等问题
Mac / iPhone / iPad 需要用js设置muted属性
autoplay：必须为激活状态
playsinline：保证在ios safari中不全屏播放
-->
<video id="localVideo" muted autoplay playsinline></video>
<!-- 远端视频流 -->
<video id="remoteVideo" autoplay playsinline></video>
<!-- 纯音频 -->
<!-- 本地音频流 / 这种场景下，localaudio 其实没有播放的必要了，可以用来调试 -->
<!-- <audio id="localAudioMedia" muted autoplay></audio> -->
<!-- 远端音频流 -->
<!-- <audio id="remoteAudioMedia" autoplay ></audio> -->
<script src="https://sqimg.qq.com/expert_qq/webrtc/3.0/WebRTCAPI.min.js"></script>
</body>
2.H5 支持的平台
| 操作系统平台 | 浏览器/webview | 版本要求 | 备注 |
|---|---|---|---|
| iOS | Safari ( 只支持Safari ) | 11.1.2 | 由于苹果 Safari 仍有偶现的 bug，产品化方案建议先规避，待苹果解决后再使用对于iOS可以考虑使用我们的小程序解决方案 |
| Android | TBS （微信和手机QQ的默认Webview） | 43600 | 微信和手机QQ默认内置的浏览器内核为TBS。TBS 介绍 |
| Android | Chrome | 60+ | 需要支持 H264 |
| Mac | Chrome | 47+ | |
| Mac | Safari | 11+ | |
| Windows(PC) | Chrome | 52+ | |
| Windows(PC) | QQ浏览器 | 10.2 |
function checkTBSVersion(ua) {
//ua = "Mozilla/5.0 (Linux; Android 7.1.1; vivo X9 Build/NMF26F; wv)
//AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49
//Mobile MQQBrowser/6.2 TBS/043501 Safari/537.36
//MicroMessenger/6.5.13.1100 NetType/WIFI Language/zh_CN";
var list = ua.split(" ");
for (var i = 0; i < list.length; i++) {
var item = list[i];
if (item.indexOf("TBS") !== -1 || item.indexOf("tbs") !== -1) {
var versionStr = item.split("/")[1];
var version = parseInt(versionStr) || 0;
if (version <= 43600) {
alert("您的TBS版本号(" + versionStr + ")过低，不支持WebRTC，请升级!");
}
}
}
}
网友评论