关于adapter.js

最新推荐文章于 2024-10-10 08:07:25 发布

sxc1989

最新推荐文章于 2024-10-10 08:07:25 发布

阅读量1w

点赞数

分类专栏： webrtc 文章标签： webrtc

本文链接：https://blog.csdn.net/sxc1989/article/details/79704635

版权

webrtc 专栏收录该内容

3 篇文章

订阅专栏

一、由来

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>