一、由来
adapter.js自2012年底或者2013年初WebRTC早期的时候就已经出现了。它是一个非常小的项目,当时还没有150行。主要功能是隐藏像webkitRTCPeerConnection和mozRTCPeerConnection这样的前缀差异,并提供函数将MediaStream附加到HTML的或元素。随着各个游览器对webrtc的支持, adapter.js用来屏蔽各个游览器之间的差异,对外提供统一的接口,其复杂程度也越来越高,目前超过2200行代码。其github地址为:https://github.com/webrtc/adapter.
二、使用
- 方式一
直接在代码中加入https://webrtc.github.io/adapter/adapter-latest.js
- 方式二
npm install webrtc-adapter
使用时在JavaScript文件中加入一个模块
const adapter = require(‘webrtc-adapter’);
加载完成后既可以使用,例如可使用
console.log(adapter.browserDetails.browser);
来来检测游览器信息。
三、例子
打开摄像并显示视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video autoplay playsinline></video>
</body>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script>
console.log(adapter.browserDetails.browser);
var video = document.querySelector('video');
var constraints = window.constraints = {
audio: false,
video: true
};
function handleSuccess(stream) {
var videoTracks = stream.getVideoTracks();
console.log('Using video device: ' + videoTracks[0].label);
video.srcObject = stream;
}
function handleError(error) {
console.log('getUserMedia error: ' + error.name, error);
}
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
</script>
</html>