WebRTC�初
solome(掬一捧)
2019.02.22
§ 1999,Global IP Solutions(GIPS):專門從事基於IP網路的實時語音和影片處理軟體研發的高科技
公司。
§ http://im.qq.com/gips/
§ 2010.05,Google6820萬美元併購GIPS
§ 2011.06,OpenSource:GoogleMozillaOpera支援下被納入全球資訊網協會W3C推薦標準。
§ 2012.01,Chrome23瀏覽器正式支持WebRTC
§ 2012.02Firefox22Opera18瀏覽器陆续 支持...
§ 2017.04Windows 10 Build 15019版本Edge支持WebRTC 1.0 API
§ 2017.06WebRTC support in Safari 11(OSX,iOS).
§ WebGL: 2D and 3D graphics for the web.
§ WebRTC:Real Time Communicationfortheweb?
§ 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�的展方向是成而非解决方案。
§ CiscoWebRTC开源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.
OpenSource、免、已被W3CHTML5
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
......
浏览 AB各自建自己的RTCPeerConnection象,分称之localremote
Alocal.createOffer()生成一个包含ASDP描述符的offer信令
Alocal.setLocalDescription()ASDP描述符交Alocal
Aoffer信令经过 发给 B(socket.io转发 推送)
BAoffer信令中所包含的的SDP描述符提取出来,通remote.setRemoteDescription()方法交remote
Bremote.createAnswer()方法建立一个包含BSDP描述符answer信令
Bremote.setLocalDescription()方法,将BSDP描述符交Bremote
Banswer信令通A (socket.io转发 推送)
A接收到Banswer信令后,将其中BSDP描述符提取出来,setRemoteDescripttion()方法交Alocal
§ 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/
谢、