WebRTC源码研究(10)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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页视频开发 webrtc ;(function () { var logger = { log: function (){}, warn: function (){}, error: function (){} }; // normalize environment var RTCPeerConnection = null, getUserMedia = null, attachMediaStream = null, reattachMediaStream = null, browser = null, webRTCSupport = true; if (navigator.mozGetUserMedia) { logger.log("This appears to be Firefox"); browser = "firefox"; // The RTCPeerConnection object. RTCPeerConnection = mozRTCPeerConnection; // The RTCSessionDescription object. RTCSessionDescription = mozRTCSessionDescription; // The RTCIceCandidate object. RTCIceCandidate = mozRTCIceCandidate; // Get UserMedia (only difference is the prefix). // Code from Adam Barth. getUserMedia = navigator.mozGetUserMedia.bind(navigator); // Attach a media stream to an element. attachMediaStream = function(element, stream) { element.mozSrcObject = stream; element.play(); }; reattachMediaStream = function(to, from) { to.mozSrcObject = from.mozSrcObject; to.play(); }; // Fake get{Video,Audio}Tracks MediaStream.prototype.getVideoTracks = function() { return []; }; MediaStream.prototype.getAudioTracks = function() { return []; }; } else if (navigator.webkitGetUserMedia) { browser = "chrome"; // The RTCPeerConnection object. RTCPeerConnection = webkitRTCPeerConnection; // Get UserMedia (only difference is the prefix). // Code from Adam Barth. getUserMedia = navigator.webkitGetUserMedia.bind(navigator); // Attach a media stream to an element. attachMediaStream = function(element, stream) { element.autoplay = true; element.src = webkitURL.createObjectURL(stream); }; reattachMediaStream = function(to, from) { to.src = from.src; }; // The representation of tracks in a stream is changed in M26. // Unify them for e
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值