WebRTC学习总结

原创 2018年04月16日 14:50:29

WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下,创建点对点(Peer-to-Peer)的数据分享和电话会议成为可能。

本篇文章从自身实践出发,结合相关代码,总结WebRTC实现的基本流程。

1. 引言

首先我们先看《WebRTC权威指南》上给出的流程图,从这张图,我们要明确两件事:
- 第一,通信双方需要先通过服务器交换一些信息
- 第二,完成信息交换后,通信双方将直接进行连接以传输数据

然后我们再介绍一下WebRTC中的专有名词,方便读者对下文的理解。

  • RTCPeerConnection:核心对象,每一个连接对象都需要新建该对象
  • SDP(Session Description Protocol,会话描述协议):包含建立连接的一些必要信息,比如IP地址等,sdp由RTCPeerConnection对象方法创建,我们不需要知道该对象中的具体内容,使用黑盒传输即可
  • ICE(Interactive Connectivity Establishment,交互式连接建立技术):用户之间建立连接的方式,用来选取用户之间最佳的连接方式

2. WebRTC实现流程

以下代码不能直接运行,因为我这里并没有实现信令服务器,如何实现信令服务器可自由选择。

首先发起方获取视频流,如果成功,则新建RTCPeerConnection对象,然后创建offer,并发送给应答方。

  • addStream方法将getUserMedia方法中获取的流(stream)添加到RTCPeerConnection对象中,以进行传输
  • onaddStream事件用来监听通道中新加入的流,通过e.stream获取
  • onicecandidate事件用来寻找合适的ICE
  • createOffer()是RTCPeerConnection对象自带的方法,用来创建offer,创建成功后调用setLocalDescription方法将localDescription设置为offer,localDescription即为我们需要发送给应答方的sdp
  • sendOffer和sendCandidate方法是自定义方法,用来将数据发送给服务器
// 引入<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>脚本
// 提升浏览器兼容性
var localConnection, 
var constraints={
    audio:false,
    video:true
}
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError)
function handleSuccess(stream) {
  document.getElementById("video").srcObject = stream
  localConnection=new RTCPeerConnection()
  localConnection.addStream(stream)
  localConnection.onaddStream=function(e) {
    console.log('获得应答方的视频流' + e.stream)
  }
  localConnection.onicecandidate=function(event){
    if(event.candidate){
        sendCandidate(event.candidate)
    }
  }
  localConnection.createOffer().then((offer)=>{
    localConnection.setLocalDescription(offer).then(sendOffer)
  })
}

同样的,接收方也需要新建一个RTCPeerConnection对象

var remoteConnection
var constraints={
    audio:false,
    video:true
    }
}
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError)
function handleSuccess(stream) {
  document.getElementById("video").srcObject = stream
  remoteConnection=new RTCPeerConnection()
  remoteConnection.addStream(stream)
  remoteConnection.onaddStream=function(e) {
    console.log('获得发起方的视频流' + e.stream)
  }
  remoteConnection.onicecandidate=function(event){
      if(event.candidate){
          sendCandidate(event.candidate)
      }
  }
}

当应答方收到发起方发送的offer之后,调用setRemoteDescription设置RTCPeerConnection对象的remoteDescription属性,设置成功之后调用createAnswer方法,创建answer成功之后将其设置为localDescription,然后把answer发送给服务器

let desc=new RTCSessionDescription(sdp)
remoteConnection.setRemoteDescription(desc).then(function() {
    remoteConnection.createAnswer().then((answer)=>{
        remoteConnection.setLocalDescription(answer).then(sendAnswer)
    })
})

当发起方收到应答方发送的answer之后,将其设置为remoteDescription,至此WebRTC连接完成。

let desc=new RTCSessionDescription(sdp)
localConnection.setRemoteDescription(desc).then(()=>{console.log('Peer Connection Success')})

此时虽然WebRTC连接已经完成,但是通信双方还不能直接通信,因为发送的ICE还没有处理,通信双方还没有确定最优的连接方式。

应答方收到发起方发送的ICE数据时,调用RTCPeerConnection对象的addIceCandidate方法。

remoteConnection.addIceCandidate(new RTCIceCandidate(ice))

发起方收到应答方发送的ICE数据时,同样调用RTCPeerConnection对象的addIceCandidate方法。

localConnection.addIceCandidate(new RTCIceCandidate(ice))

至此,一个最简单的WebRTC连接已经建立完成。

3. 数据通道

未完待续

参考文献

MDN文档

博客WebRTC学习资料大全

书籍《WebRTC权威指南》,《Learning WebRTC 中文版》

Github地址

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Metropolis_cn/article/details/79960576

Appcan学习手记(1)——初探

不可否认未来是软件开发方向是手机APP,所以一直以来想学习手机应用开发。但是IOS和安卓学习成本太大,再一个开发企业软件的话成本也比较大。所以我的方向转到了HTML5,开始因为之前有使用EXTJS的基...
  • suixufeng
  • suixufeng
  • 2016-01-27 12:49:00
  • 443

Webrtc实时音视频通话实战

本课程完全基于webrtc实战来讲解,根据作者多年在工作中的实际应用,让学员在理解原理的同时,一步一步带着你实际命令操作; 通过本课程的学习,学员便可搭建自己的webrtc服务器,实现web、app、微信之间的音视频通话功能,且可应用于实际项目,纯粹的干货学习视频。
  • 2017年12月03日 00:16

WebRTC学习资料大全

在学习WebRTC,找了些资料,记录一下,供以后查询。
  • foruok
  • foruok
  • 2016-11-02 10:56:25
  • 5782

webrtc零基础教程

从最基础的怎么从网上下载webrtc教程开始,由浅入深讲解webrtc的整个框架。拿webrtc的经典例子peerconnection_client来讲解。从代码细节深入进去
  • 2016年02月25日 15:13

WebRTC音视频同步机制实现分析【转】

来自:http://befo.io/4022.html 音视频同步事关多媒体产品的最直观用户体验,是音视频媒体数据传输和渲染播放的最基本质量保证。音视频如果不同步,有可能造成延迟、卡顿等非常...
  • chenyefei
  • chenyefei
  • 2017-04-05 13:59:17
  • 339

WebRTC学习之七:精炼的信号和槽机制

关于信号和槽有一个非常精炼的C++实现,作者是Sarah Thompson,该实现只有一个头文件sigslot.h,源码在: http://sigslot.cvs.sourceforge.net/vi...
  • caoshangpa
  • caoshangpa
  • 2017-01-05 09:06:52
  • 1323

音视频技术WebRTC初探

WebRTC的核心源于GIPS。GIPS(Global IP Sound)原是世界顶尖的互联网音视频方案提供商,于2010年被GOOGLE 用6820万美元收购,我们常用的QQ语音视频聊天到现在都还是使用GIPS的技术。 本次课程主要是基于WebRTC的编程初探和学习,欢迎感兴趣的同学来捧场。
  • 2016年04月18日 11:13

WebRTC学习之一:开篇

一.无插件的实时通讯        想像一下,如果你的手机、电视、电脑都可以通过一个平台进行通信,想像一下,你可以在Web应用中轻松地加入视频聊天和p2p数据分享,这就是WebRTC的愿景。     ...
  • caoshangpa
  • caoshangpa
  • 2016-11-23 17:25:19
  • 13286

WebRTC入门学习之初识WebRTC

引言:          先声明本人只是小小实习生一枚,若有不正确的,希望大家帮忙指正。 一、WebRTC基本架构                                    ...
  • mandagod
  • mandagod
  • 2017-01-02 13:33:16
  • 386

WebRTC学习笔记_Demo收集

1.     WebRTC学习 1.1   WebRTC现状 本人最早接触WebRTC是在2011年底,那时Google已经在Android源码中加入了webrtc源码,放在/extern...
  • yangyayuan
  • yangyayuan
  • 2013-09-26 21:48:50
  • 26556
收藏助手
不良信息举报
您举报文章:WebRTC学习总结
举报原因:
原因补充:

(最多只允许输入30个字)