WebRTC�初
探
solome（掬一捧）
2019.02.22
历史
§ 1999,�Global IP Solutions�(GIPS):�專門從事基於IP網路的實時語音和影片處理軟體研發的高科技
公司。
§ http://im.qq.com/gips/
§ 2010.05,�Google�以6820萬美元併購GIPS。
§ 2011.06,�Open�Source:�在Google、Mozilla、Opera支援下被納入全球資訊網協會的W3C推薦標準。
§ 2012.01,�Chrome23瀏覽器正式支持WebRTC。
§ 2012.02，Firefox22、Opera18瀏覽器陆续 支持�...
§ 2017.04�Windows 10 Build 15019�版本Edge支持WebRTC 1.0 API。
§ 2017.06�WebRTC support in Safari 11�(OS�X,�iOS).
§ WebGL: 2D and 3D graphics for the web.
§ WebRTC:�Real Time Communication�for�the�web?
§ WebRTC is a free, open project that enables web browsers with Real-Time
Communications (RTC) capabilities via simple JavaScript APIs.
https://webrtc.org/
§ WebRTC�是音视频 、实时传输 技术的�教科书、宝典和工具集。
§ 不仅仅 局限于浏览 器，任何基于互联网/物联网音视频 、实时传输 技术都能通过
WebRTC项目中找到解决方案。
§ WebRTC�极大的降低了音视频 、实时传输 的技术门槛 。
§ WebRTC�的发展方向是成为�标准�而非解决方案。
§ Cisco为WebRTC开源H.264(视频编码 )
§ http://www.openh264.org�、现已集成进WebRTC代码中。
§ Microsoft�也有份类似WebRTC解决方案�CU-RTC-WEB
§ https://www.infoq.com/news/2013/02/WebRTC-CU-RTC-Web�
§ Microsoft CU-RTC-Web is an alternative approach to WebRTC meant to show some of
WebRTC’s weaknesses and to push it forward.
Open�Source、免专利费、已被W3C纳入HTML5标准
Google�认为 支持互联网的核心技术如HTML,�HTTP,�TCP/IP是开发免费的,�互联网也为此繁
荣,�所以音视频 、实时传输 技术也必须免费且高质量。
§ 免插件,�跨平台,�跨浏览 器,�跨移动应 用
§ Mac�OSX、Windows、iOS、Android、Linux
§ https://webrtc.org/native-code/
§ 注：其实浏览 器就是插件，每个OS都会有个浏览 器软件；如果WebRTC是标准，那么每种
浏览 器都得兼容。
WebRTC�API
§ MediaStream�(getUserMedia())、MediaStreamTrack
§ RTCPeerConnection
§ RTCSessionDescription
§ RTCDataChannel
<!-- HTML -->
<videoautoplay=""playsinline=""></video>
//MediaStream
constmediaStream=awaitnavigator.mediaDevices.getUserMedia({video:true})
document.querySelector('video').srcObject=mediaStream
//MediaStreamTrack
constmediaStreamTrack=mediaStream.getVideoTracks()
HTML5�获取摄像头数据
RTCPeerConnection�稳定有效的端到端数据传输 的"句柄
"
• 音视频编 解码
• 数据包丢包隐藏
• 回声消除
• 动态 抖动缓 冲
• 降噪
• 图片清除
• ...�...
WebRTC�执 行流程
§Stun/Turn/ICE服务器
§singaling�信令服务器
const servers = {
����iceServers: [
��������{ urls:�'stun:stun.services.mozilla.com' },
��������{ urls: 'stun:stunserver.org' },
��������{ urls: 'stun:stun.l.google.com:19302 ' }
����],
}
const localPeerConnection = new RTCPeerConnection(servers)
WebRTC�不提供，但一般情况下也不需要自己实现 。
http://git.lianjia.com/solome/webrtc-demos
信令是WebRTC用来协助建立p2p通讯的。主要用于协商双方通讯过 程，
传递 基本信息SDP(会话描述协议 )。
https://datatracker.ietf.org/doc/draft-nandakumar-rtcweb-sdp
比如两个浏览 器间的视频传输 ：浏览 器A和浏览 器B都需要知道对方一些信息，但信令服
务器中断并不影响音视频 数据的传输 。
v=0
o=- 9116124973737985032 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE 0
a=msid-semantic: WMS 01cxlotVj12CwCB8wXDMB3C5OL0qStzQLKmG
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 122 127 121 125 107 108 109 124 120 123 119 114 115 116
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:FFeE
a=ice-pwd:81H2hj/91LYOtBNgRYnCgsoq
a=ice-options:trickle
a=fingerprint:sha-256 6E:D5:C6:45:0B:C9:B9:76:52:95:4B:E6:C0:B5:FC:63:A8:8C:AE:52:9D:03:BE:F5:1C:76:E2:BF:EE:46:2A:90
a=setup:actpass
a=mid:0
a=extmap:2 urn:ietf:params:rtp-hdrext:toffset
a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
...�...
• 浏览 器A�和B�各自创建自己的�RTCPeerConnection�对象，分别称之为local、remote
• A通过local.createOffer()生成一个包含A的SDP描述符的offer信令
• A通过local.setLocalDescription()将A的SDP描述符交给A的local
• A将offer信令经过 服务器发给 B�(socket.io�转发 推送)
• B将A的offer信令中所包含的的SDP描述符提取出来，通过remote.setRemoteDescription()方法交给remote
• B通过remote.createAnswer()方法建立一个包含B的SDP描述符answer信令
• B通过remote.setLocalDescription()方法，将B的SDP描述符交给B的remote
• B将answer信令通过服务器发送给A (socket.io�转发 推送)
• A接收到B的answer信令后，将其中B的SDP描述符提取出来，调用setRemoteDescripttion()方法交给A的local
§ A 创建Offer(sdp)
§ A 设置本地sdp
§ A --- 发送Offer ---> B
§ B 接收Offer(sdp)
§ B 设置远程sdp
§ B 生成Answer(sdp)
§ B设置本地sdp
§ B --- 发送Answer ---> A
§ A 接收Answer
§ A 设置远程sdp
classWebSocket{
constructor(){
this.joined=0
}
init(server){
constio=socketIO(server)
io.on('connection',socket=>{
socket.on('disconnect',()=>console.log('userleave'))
socket.on('userJoin',(data)=>{
if(this.joined<=2)socket.broadcast.emit('userJoin',data)
this.joined++
})
socket.on('answer',(data)=>socket.broadcast.emit('answer',data))
socket.on('answerIce',(data)=>socket.broadcast.emit('answerIce',data))
socket.on('answerOffer',(data)=>socket.broadcast.emit('answerOffer',data))
socket.on('answerAnswer',(data)=>socket.broadcast.emit('answerAnswer',data))
socket.on('iceSwop',(data)=>socket.broadcast.emit('iceSwop',data))
})
}
}
基于�socket.io�实现 SDP数据推送
http://git.lianjia.com/solome/webrtc-demos
• https://webrtc.org/
• https://www.html5rocks.com/en/tutorials/webrtc/basics/
• https://w3c.github.io/webrtc-pc/
• https://w3c.github.io/webrtc-stats/
• https://w3c.github.io/mediacapture-main/
• https://webrtc.github.io/samples/
谢、