目的 帮助自己了解webrtc 实现端对端通信
# 使用流程
git clone https://gitee.com/wjj0720/webrtc.git
cd ./webRTC
npm i
npm run dev
# 访问 127.0.0.1:3003/test-1.html 演示h5媒体流捕获
# 访问 127.0.0.1:3003/local.html 演示rtc 本地传输
# 访问 127.0.0.1:3003/p2p.html 演示局域网端对端视屏
WebRTC(Web Real-Time Communication) 网页即时通信 ,是一个支持网页浏览器进行实时语音、视频对话的API。
于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准
闲话:目前主流实时流媒体 实现方式
RTP :(Real-time Transport Protocol) 建立在 UDP 协议上的一种协议加控制
HLS(HTTP Live Streamin)苹果公司实现的基于HTTP的流媒体传输协议
RTMP(Real Time Messaging Protocol) Adobe公司基于TCP
WebRTC google 基于RTP协议
目标:打开摄像头将媒体流显示到页面
navigator.mediaDevices.getUserMedia({
video: true, // 摄像头
audio: true // 麦克风
}).then(steam => {
// video标签的srcObject
video.srcObject = stream
}).catch(e => {
console.log(e)
})
RTCPeerConnection api提供了 WebRTC端创建、链接、保持、监控闭连接的方法的实现 RTCPeerConnection MDN
以 A<=>B 创建p2p连接为例
A端:
1.创建RTCPeerConnection实例:peerA
2.将自己本地媒体流(音、视频)加入实例,peerA.addStream
3.监听来自远端传输过来的媒体流 peerA.onaddstream
4.创建[SDP offer]目的是启动到远程(此时的远端也叫候选人)))对等点的新WebRTC连接 peerA.createOffer
5.通过[信令服务器]将offer传递给呼叫方
6.收到answer后去[stun]服务拿到自己的IP,通过信令服务将其发送给呼叫放
B端:
1.收到信令服务的通知 创建RTCPeerConnection peerB,
2.也需要将自己本地媒体流加入通信 peerB.addstream
3.监听来自远端传输过来的媒体流 peerA.onaddstream
4.同样创建[SDP offer] peerA.createAnswer
5.通过[信令服务器]将Answer传递给呼叫方
6.收到对方IP 同样去[stun]服务拿到自己的IP 传递给对方
至此完成p2p连接 触发双发onaddstream事件
因为没有钱买服务器 没试过
coturn 据说使用它搭建 STUN/TURN 服务非常的方便
# 编译
cd coturn
./configure --prefix=/usr/local/coturn
sudo make -j 4 && make install
# 配置
listening-port=3478 #指定侦听的端口
external-ip=39.105.185.198 #指定云主机的公网IP地址
user=aaaaaa:bbbbbb #访问 stun/turn服务的用户名和密码
realm=stun.xxx.cn #域名,这个一定要设置
#启动
cd /usr/local/coturn/bin
turnserver -c ../etc/turnserver.conf
trickle-ice https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice 按里面的要求输入 stun/turn 地址、用户和密码
输入的信息分别是:
STUN or TURN URI 的值为: turn:stun.xxx.cn
用户名为: aaaaaa
密码为: bbbbbb
let ice = {"iceServers": [
{"url": "stun:stun.l.google.com:19302"}, // 无需密码的
// TURN 一般需要自己去定义
{
'url': 'turn:192.158.29.39:3478?transport=udp',
'credential': 'JZEOEt2V3Qb0y27GRntt2u2PAYA=', // 密码
'username': '28224511:1379330808' // 用户名
},
{
'url': 'turn:192.158.29.39:3478?transport=tcp',
'credential': 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
'username': '28224511:1379330808'
}
]}
// 可以提供多iceServers地址,但RTC追选择一个进行协商
// 实例化的是给上参数 RTC会在合适的时候去获取本地墙后IP
let pc = new RTCPeerConnection(ice);
/*
// 据说这些免费的地址都可以用
stun:stun1.l.google.com:19302
stun:stun2.l.google.com:19302
stun:stun3.l.google.com:19302
stun:stun4.l.google.com:19302
stun:23.21.150.121
stun:stun01.sipphone.com
stun:stun.ekiga.net
stun:stun.fwdnet.net
stun:stun.ideasip.com
stun:stun.iptel.org
stun:stun.rixtelecom.se
stun:stun.schlund.de
stun:stunserver.org
stun:stun.softjoys.com
stun:stun.voiparound.com
stun:stun.voipbuster.com
stun:stun.voipstunt.com
stun:stun.voxgratia.org
stun:stun.xten.com
*/