电子商务网站建设与维护 书,网页编辑用户信息原理,WordPress主题素材资源中文模板,黑龙江做网站公司背景 webRTC是Google在2010年收购GIP公司之后获得的一项技术。如下图所示#xff0c;它提供了音视频的采集、处理(降噪#xff0c;回声消除等)、编解码、传输等技术。webRTC的目标是实现无需安装任何插件就可以通过浏览器进行P2P的实时音视频通话及文件传输#xff0c;来看看…背景 webRTC是Google在2010年收购GIP公司之后获得的一项技术。如下图所示它提供了音视频的采集、处理(降噪回声消除等)、编解码、传输等技术。 webRTC的目标是实现无需安装任何插件就可以通过浏览器进行P2P的实时音视频通话及文件传输来看看Google的demo是不是很酷本文将带你分析webRTC的原理并逐步编写一个简单的demo。 原理 如图浏览器之间媒体流的传输是P2P的但是这并不意味着webRTC不需要服务器支持。建立P2P视频连接需要的信息如用来初始化通信的session信息双方的ip、端口视频分辨率编解码格式等等还是需要通过服务器来传输的。webRTC没有规定这些信息传输的机制XHR、webSocket、Socket.io等都是可以的因为Socket.io自带了房间的概念便于双向视频的撮合所以我在demo里选择了Socket.io。 当然连接建立的过程不会这么简单。首先提到P2P就绕不开NAT(Network Address Translation)webRTC使用ICE(Interactive Connectivity Establishment)框架ICE是一种综合性的NAT穿越技术它整合了STUN、TURN。当穿越网络时ICE会先尝试STUN查出自己位于哪种类型的NAT之后以及NAT为某一个本地端口所绑定的Internet端端口从而建立UDP连接如果失败了ICE就会再尝试TCP(先尝试HTTP再尝试HTTPS)如果仍然失败就使用中继的TURN服务器。 再来看看建立连接过程中的具体步骤 调用getUserMedia获取本地的MediaStreams从STUN获取自己的外网IP及端口通过Signaling Server向对方发送Offer(SDP协议)并收到Answer同时webRTC会生成一些包含自己的内网、外网IP等信息的candidate同样通过Signaling Server相互传输建立P2P连接传输媒体信息。API getUserMedia: 获取本地视频、音频可以传入constraints调整分辨率、帧率返回一个promiseRTCPeerConnection: 生成一个RTCPeerConnection实例传输视频、音频流createOffer: 会话发起方生成SDP Offer包含了本地媒体流信息setLocalDescription在此方法被调用之前oncandidate事件不会被触发setRemoteDescription: 接收到offer或者answer之后调用addIceCandidate: 接收到icecandidate之后调用Steps 获取媒体流 var constraints {audio: false,video: true
};navigator.mediaDevices.getUserMedia(constraints)
.then(gotStream)
.catch(function(e) {alert(getUserMedia() error: e.name);
});function gotStream(stream) {localVideo.srcObeject stream;localStream stream;
}
复制代码 getUserMedia存在兼容性问题需要在项目中引用webRTC官方给出的adapter.js。constraints还可以配置video的分辨率、帧率、对移动端还可以选择前后摄像头 var constraints { video: { width: { min:640, ideal: 1280, max: 1920 }, height: { min: 480 ideal: 720, max: 1080 }, facingMode: user // 前置摄像头 } }; 定义RTCPeerConnection var serverConfig {iceServers: [{urls: stun:stun.l.google.com:19302}]
};function createPeerConnection() {var pc new RTCPeerConnection(serverConfig);pc.onicecandidate function(e) {if (e.candidate) {pc.addIceCandidate(e.candidate);}};// 添加对方的媒体流pc.onaddstream function(e) {remoteVideo.srcObeject e.stream;remoteStream stream;};
}
复制代码 由STUN、TURN配置生成对应的RTCPeerConnection实例再定义相关的事件处理函数如onicecandidate、onaddstream、onremovestream等。 创建连接 function start() {pc.addstream(localStream);if (isCaller) {pc.createOffer(function(sessionDescription) {pc.setLocalDescription(sessionDescription);send(sessionDescription); // 根据不同的Signaling方式实现});if (receiveAnswer) {pc.setRemoteDescription(answer.sessionDescription);}} else {if (receiveOffer) {pc.setRemoteDescription(offer.sessionDescription);}pc.createAnswer(function(sessionDescription) {pc.setLocalDescription(sessionDescription);send(sessionDescription);});}
}
复制代码 必须先getUserMedia后才能生成sessionDescription并且只有在setLocalDescription后onicecandidate事件才会触发。上面代码中的只是为了说明大致流程实际项目中结合socket.io的事件更容易实现。 中断会话 function stop() {pc.stop();pc null;
}
复制代码 关于socket.io有关的代码本文没有贴出详情可参考socket.io的用法。 可行性 按照上面的步骤可以成功地搭建webRTC的小demo但是能否将webRTC运用到实际项目中去呢下面从浏览器兼容性和webRTC本身的性能两个方面去分析。 兼容性 IOS: 只有最新的ios11支持webRTC且仅限safari浏览器微信内置浏览器尚不支持getUserMedia,不支持DataChannel视频编解码格式为H.264 Android: 安卓4.4以上(不含4.4)经测试各大手机厂商自带浏览器均不支持getUserMedia但微信内置浏览器可以正常运行另外61版本以上的Chrome for Android也都支持 PC: Chrome49以上Firefox55以上Edge支持Safari只有11支持IE不支持。 性能 诚然webRTC在回声消除图像编解码等方面已经做得十分出色但它在性能上的问题还是不可忽视的 由于需要进行视频编解码所以CPU占用率非常高尤其是在移动设备上在移动设备上获取的视频分辨率有限最高只能达到640 * 480带宽有限时音视频质量较差延时明显综上所述虽然webRTC具有不需安装插件或者客户端开源免费强大的网络穿透能力出色的音视频处理技术等等优点但由于兼容性及性能上的问题要投入到生产中还需要时间主要是IOS11的普及以及CPU占用率和延时的问题。 参考文章 WebRTC in the real world: STUN, TURN and signaling How to Select a Signaling Protocol for Your Next WebRTC Project? Getting Started with WebRTC 使用WebRTC搭建前端视频聊天室——入门篇 转载于:https://juejin.im/post/5c866629f265da2d8d6a1466
