-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (140 loc) · 5.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<html>
<body>
Local: <br>
<script src="./socket.io.js">
</script>
<script>
var otherSocket,
guid = (function () {
var guid = "";
for (var i = 1; i <= 32; i++) {
var n = Math.floor(Math.random() * 16.0).toString(16);
guid += n;
if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
guid += "-";
}
return guid;
})(),
socket = io(`http://${document.domain}`),
pc=new(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection)();
function hasUserMedia() {
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
// 与信令服务器的WebSocket连接
// stun和turn服务器
// var iceServer = {
// "iceServers": [{
// "url": "stun:stun.l.google.com:19302"
// }, {
// "url": "turn:numb.viagenie.ca",
// "username": "webrtc@live.com",
// "credential": "muazkh"
// }]
// };
// 创建PeerConnection实例 (参数为null则没有iceserver,即使没有stunserver和turnserver,仍可在局域网下通讯)
// 发送ICE候选到其他客户端
pc.onicecandidate = function (event) {
if (event.candidate !== null) {
socket.send(JSON.stringify({
"socketId": guid,
"event": "_ice_candidate",
"data": {
"candidate": event.candidate
}
}));
}
};
// 如果检测到媒体流连接到本地,将其绑定到一个video标签上输出
pc.onaddstream = function (event) {
var video = document.createElement('video');
video.setAttribute('autoplay', '');
video.setAttribute('data-socketId',otherSocket)
document.body.appendChild(video)
video.src = URL.createObjectURL(event.stream);
};
// 发送offer和answer的函数,发送本地session描述
var sendOfferFn = function (desc) {
console.log(3)
pc.setLocalDescription(desc);
socket.send(JSON.stringify({
"socketId": guid,
"event": "_offer",
"data": {
"sdp": desc
},
}));
alert('offer')
},
sendAnswerFn = function (desc) {
console.log(4)
pc.setLocalDescription(desc);
socket.send(JSON.stringify({
"socketId": guid,
"event": "_answer",
"data": {
"sdp": desc
},
}));
};
// 获取本地音频和视频流
if (hasUserMedia()) {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getUserMedia({
// "audio": true,
"video": true
}, function (stream) {
console.log(5)
//绑定本地媒体流到video标签用于输出
var video = document.createElement('video');
video.setAttribute('autoplay', '');
document.body.appendChild(video)
video.src = URL.createObjectURL(stream);
//向PeerConnection中加入需要发送的流
pc.addStream(stream);
//如果是发起方则发送一个offer信令
socket.emit('socketId', guid)
socket.emit('con_number')
socket.on('con_number', function (event) {
if (event) {
pc.createOffer(sendOfferFn, function (error) {
console.log('Failure callback: ' + error);
});
}
})
}, function (error) {
//处理媒体流创建失败错误
console.log('getUserMedia error: ' + error);
});
} else {
}
//处理到来的信令
socket.on('rtc', function (event) {
var json = JSON.parse(event);
console.log('onmessage: ', json);
// pc.createAnswer(sendAnswerFn, function (error) {})
// pc.addIceCandidate(new RTCIceCandidate(json.data.sdp));
//如果是一个ICE的候选,则将其加入到PeerConnection中,否则设定对方的session描述为传递过来的描述
if (json.event === "_ice_candidate") {
otherSocket=json.socketId;
pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
} else {
pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp),function(){ pc.createAnswer(sendAnswerFn, function (error) {
console.log('我就加一次嘻嘻')
console.log(2)
console.log('Failure callback: ' + error);
})},(error)=>console.log(error)); //firefox 需要三个参数
// 如果是一个offer,那么需要回复一个answer
}
});
socket.on('socket_closed',data=>{
alert(`用户${data}已下线`)
document.body.removeChild(document.querySelector(`video[data-socketId="${data}"]`))
})
window.onbeforeunload=function(){
socket.emit('socket_c losed',guid)
socket.close();
}
</script>
</body>
</html>