WebRTC音视频数据采集六、第二节 WebRTC_API_适配

我不是女神ヾ 2023-02-22 05:14 19阅读 0赞

# getUserMedia适配 #

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

# getUserMedia的不同实现 #

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

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

fireFox也在前面加了一个mozGetUserMedia,

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

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

自己实现

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

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

# 使用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][https_webrtc.github.io_adapter_adapter-latest.js]，最新版本就是[adapter-latest.js][https_webrtc.github.io_adapter_adapter-latest.js]，如果是我们自己开发的时候，最好是能够带上版本号，而不是用这个最新版本，最为最新版本会 随着这个WebRTC的发展，随着这个规范的新的制定，那 它会做一些改变，这样有可能对老的浏览器产生一些问题，所以我们最好在真正使用的时候，使用它具体的某个版本号，而不是使用这个最新的。

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

<html>
      <head>
        <title>捕获音视频数据 WebRTC capture video and audio</title>
      </head>
      <body>
        
        <video autoplay playsinlin id="player"></video>
        
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src="./js/client.js"></script>
      </body>
    </html>

[https_webrtc.github.io_adapter_adapter-latest.js]: https://webrtc.github.io/adapter/adapter-latest.js