WebRTC源码研究（10）webrtc api 适配

最新推荐文章于 2024-05-11 09:56:09 发布

极客雨露

最新推荐文章于 2024-05-11 09:56:09 发布

阅读量968

点赞数

分类专栏： WebRTC

本文链接：https://blog.csdn.net/kyl282889543/article/details/106633172

版权

WebRTC 专栏收录该内容

62 篇文章 86 订阅

订阅专栏

文章目录

WebRTC源码研究（10）webrtc api 适配
1. WebRTC 常用的api 简介
2. WebRTC 音视频采集相关api 简介
3. WebRTC api 适配

WebRTC源码研究（10）webrtc api 适配

1. WebRTC 常用的api 简介

2. WebRTC 音视频采集相关api 简介

3. WebRTC api 适配

3.1 getUserMedia适配

在WebRTC 1.0规范出来之前，各个浏览器厂商都在按照自己的计划在使用WebRTC，推动自己的API，这样就使得各个浏览器厂商它使用的getUserMedia的名字是不一样的，它都增加了一个自己的前缀。

3.2 getUserMedia的不同实现

在www规范里面我们采集音视频的API就是getUserMedia,

谷歌chrome起了个名字就在前面加了一个webkitGetUserMedia,

fireFox也在前面加了一个mozGetUserMedia,

这样就给前端的开发人员造成很大的麻烦，那我要想采集音视频数据，通过这个 API，对于不同的浏览器厂商要做不同的判断。

3.3 适配置不同浏览器的方法

自己实现如下api:

var getUserMedia =  navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

这样做虽然可以，但是非常的麻烦。

3.4 使用Google开源库adapter.js

随着WebRTC在各个浏览器厂商中推进，google开源了一个库adapter.js, adapter.js的主要作用是适配各个不同浏览器的API，就是给它定义一个统一的接口，会根据不同的浏览器来调用它底层对应的API，但是随着这个WebRTC的发展，这个adapter.js也是越来越复杂，现在差不多有两千多行的代码，维护量其实也是非常大的。

但是随着各个浏览器厂商都按照WebRTC 1.0规范越来越严格，后面有可能这个adapter.js就不用了，但是就目前而言adapter.js还是起到非常大的效果的。所以在我们写这个直播相关的应用程序的时候，我们最好还是使用一下这个adapter.js，让它做一下适配。

这样就省去了我们很多的麻烦。

adapter的地址就是 https://webrtc.github.io/adapter/adapter-latest.js，最新版本就是adapter-latest.js，如果是我们自己开发的时候，最好是能够带上版本号，而不是用这个最新版本，最为最新版本会随着这个WebRTC的发展，随着这个规范的新的制定，那它会做一些改变，这样有可能对老的浏览器产生一些问题，所以我们最好在真正使用的时候，使用它具体的某个版本号，而不是使用这个最新的。

下面我们就来实战一下，将这个 adapter.js加入到项目中去。这样代码就更完善一些。

<html>
  <head>
    <title>捕获音视频数据 WebRTC capture video and audio</title>
  </head>
  <body>
    <!-- 
      我们创建一个video标签，这个标签就可以显示我们捕获的音视频数据 
      autoplay 表示当我们拿到视频源的时候直接播放
      playsinlin  表示在浏览器页面中播放而不是调用第三方工具
     -->
    <video autoplay playsinlin id="player"></video>
    <!-- 引入 adapter.js库 来做 不同浏览器的兼容 -->
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="./js/client.js"></script>
  </body>
</html>