html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webrtc</title>
<style>
#yours{
width:300px;
position:absolute;
top:200px;
left:100px;
}
#theirs{
width:300px;
position:absolute;
top:200px;
left:400px;
}
</style>
</head>
<body>
<button onclick="createOffer()">建立连接</button>
<video id="yours" autoplay></video>
<video id="theirs" autoplay></video>
</body>
<script src="./lib/jquery.min.js"></script>
<script src="./lib/webrtc.js"></script>
</html>
webrtc.js
1 var websocket;
2
3 function randomNum(minNum,maxNum){
4 switch(arguments.length){
5 case 1:
6 return parseInt(Math.random()*minNum+1,10);
7 break;
8 case 2:
9 return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
10 break;
11 default:
12 return 0;
13 break;
14 }
15 }
16 const userid = 'user' + randomNum(0,100000);
17
18 function hasUserMedia() {
19 navigator.getUserMedia = navigator.getUserMedia || navigator.msGetUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
20 return !!navigator.getUserMedia;
21 }
22 function hasRTCPeerConnection() {
23 window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection;
24 return !!window.RTCPeerConnection;
25 }
26
27 var yourVideo = document.getElementById("yours");
28 var theirVideo = document.getElementById("theirs");
29 var Connection;
30
31
32 function startPeerConnection() {
33 //return;
34 var config = {
35 'iceServers': [
36 //{ 'urls': 'stun:stun.xten.com:3478' },
37 //{ 'urls': 'stun:stun.voxgratia.org:3478' },
38 { 'url': 'stun:stun.l.google.com:19302' }
39 ]
40 };
41 config = {
42 iceServers: [
43 { urls: 'stun:stun.l.google.com:19302' },
44 { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }
45 ],
46 //sdpSemantics: 'unified-plan'
47 };
48 // {
49 // "iceServers": [{
50 // "url": "stun:stun.1.google.com:19302"
51 // }]
52 // };
53 Connection = new RTCPeerConnection(config);
54 Connection.onicecandidate = function(e) {
55 console.log('onicecandidate');
56 if (e.candidate) {
57 websocket.send(JSON.stringify({
58 "userid":userid,
59 "event": "_ice_candidate",
60 "data": {
61 "candidate": e.candidate
62 }
63 }));
64 }
65 }
66 Connection.onaddstream = function(e) {
67 console.log('onaddstream');
68
69 //theirVideo.src = window.URL.createObjectURL(e.stream);
70 theirVideo.srcObject = e.stream;
71 }
72 }
73
74
75 createSocket();
76 startPeerConnection();
77
78 if (hasUserMedia()) {
79 navigator.getUserMedia({ video: true, audio: false },
80 stream => {
81 yourVideo.srcObject = stream;
82 window.stream = stream;
83 Connection.addStream(stream)
84 },
85 err => {
86 console.log(err);
87 })
88 }
89
90
91 function createOffer(){
92 //发送offer和answer的函数，发送本地session描述
93 Connection.createOffer().then(offer => {
94 Connection.setLocalDescription(offer);
95 websocket.send(JSON.stringify({
96 "userid":userid,
97 "event": "offer",
98 "data": {
99 "sdp": offer
100 }
101 }));
102 });
103 }
104
105
106
107 function createSocket(){
108 //websocket = null;
109 websocket = new WebSocket('wss://www.ecoblog.online/wss');
110 eventBind();
111 };
112 function eventBind() {
113 //连接成功
114 websocket.onopen = function(e) {
115 console.log('连接成功')
116 };
117 //server端请求关闭
118 websocket.onclose = function(e) {
119 console.log('close')
120 };
121 //error
122 websocket.onerror = function(e) {
123
124 };
125 //收到消息
126 websocket.onmessage = (event)=> {
127 if(event.data == "new user") {
128 location.reload();
129 } else {
130 var json = JSON.parse(event.data);
131 console.log('onmessage: ', json);
132 if(json.userid !=userid){
133 //如果是一个ICE的候选，则将其加入到PeerConnection中，否则设定对方的session描述为传递过来的描述
134 if(json.event === "_ice_candidate"&&json.data.candidate) {
135 Connection.addIceCandidate(new RTCIceCandidate(json.data.candidate));
136 }else if(json.event ==='offer'){
137 Connection.setRemoteDescription(json.data.sdp);
138 Connection.createAnswer().then(answer => {
139 Connection.setLocalDescription(answer);
140 console.log(window.stream)
141 websocket.send(JSON.stringify({
142 "userid":userid,
143 "event": "answer",
144 "data": {
145 "sdp": answer
146 }
147 }));
148 })
149 }else if(json.event ==='answer'){
150 Connection.setRemoteDescription(json.data.sdp);
151 console.log(window.stream)
152
153 }
154 }
155 }
156 };
157 }
建立连接的过程：
1⃣️两个浏览器都打开该页面，连接到同一个socket('wss://www.ecoblog.online/wss')；
注意：webrtc只能在localhost或者https下使用，所以线上环境的话，我们的socket服务以及html页面都必须是要有https证书的；
对于wss，利用代理，在nginx的站点配置下如下配置/wss：
正如你所看到的那样，socket服务开在12345端口，所以还要去阿里云网站开一个这个端口的出入站规则；
另外centos的防火墙对该端口开放，或者直接关闭防火墙（自行百度）
socket服务写得比较简陋，但已够用，功能就是把收到的信息发给当前连接的所有c端
2⃣️两个c端已经和socket建立连接，然后任意其中一端点击“建立连接”
此时点击建立连接的端就是offer(携带信号源信息)，发给另外一个端，另外一个端收到offer之后，发出响应answer(携带信号源信息)，offer端收到answer端信息进行存储；
这样每个端都有了自己的信息和对方的信息，
3⃣️candidata信息的发送
其实这块，网上有的说法是offer发出answer发出后设置了localDescription和remoteDescription后就会触发onicecandidate，但是我测试的时候貌似没有，所以
我这里是在获取摄像头信息后通过
Connection.addStream(stream)
来触发Connection.onicecandidate，在这个事件监听的回调里，发出自身端的candidata给对方，如此一来，双方都有了对方的localDescription、remoteDescription和candidata；
三者齐全之后，就会触发Connection.onaddstream,这样，直接通过：
theirVideo.srcObject = e.stream;
把流写到video里面去，这样就能展示对方的视频信息了：
但是这样，只能在局域网内使用，如果要在公网使用的话，还要一个穿透服务器，网上找的一些免费的好像都不能用了？还是说我写得有问题？
具体的可百度，webrtc搭建stun服务器