关于adapter.js

一、由来

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>

参考:WebRTC adapter.js是什么以及我们为什么需要它?

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
网页视频开发 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
这个错误是由于在adapter.min.js文件的第一行发现了一个意外的字符。根据引用中提到的错误信息,该错误提示了"Uncaught SyntaxError: Unexpected token '<'"。根据引用中的描述,这个错误通常发生在文件格式返回错误的情况下,通常是由于文件返回的是text/html格式而不是正确的application/javascript格式。为了解决这个错误,你需要确保adapter.min.js文件返回的是正确的文件格式。你可以联系运维部门来解决这个问题。此外,引用中提供了关于JS错误解决方法的相关信息,你可以参考它来了解更多关于处理此类异常的常见原因和解决方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue项目报错:Uncaught SyntaxError: Unexpected token ‘<‘ (at TrackAnimation.min.js:1:1)](https://blog.csdn.net/weixin_65793170/article/details/128481662)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Uncaught SyntaxError: Unexpected token ‘<‘ (at chunk-vendors.js:1:1) app.js:1 Uncaught Syntax...](https://blog.csdn.net/weixin_44283432/article/details/128252078)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法](https://download.csdn.net/download/weixin_38725625/12998018)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值