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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
<!DOCTYPE html>
<html>

<head>
    <title>RTC视频通话测试页面</title>
    <meta charset="UTF-8"> <!-- for HTML5 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
</head>
<body>
<style type="text/css">
    body {
        background: #000;
    }

    button {
        height: 40px;
        line-height: 40px;
        width: 500px;
        top: 100px;
        padding: 0 15px;
        contain: content;
        background: #ccc;
        border: none;
        border-radius: 10px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .wrap {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .video-box {
        border-radius: 20px;
        background: pink;
        position: relative;
        width: 800px;
        height: 600px;
        overflow: hidden;
    }

    .remote-video {
        width: 800px;
        height: 600px;
        border: 1px solid black;
        overflow: hidden;
    }

    .local-video {
        width: 320px;
        height: 240px;
        position: absolute;
        right: 0;
        bottom: 0;
        border-radius: 20px 0 0 0;
        overflow: hidden;
    }

    video {
        width: 100%;
        height: 100%;
    }
</style>
<div class="wrap">
    <div>
        <div class="video-box">
            <div class="local-video">
                <video id="local-video" autoplay style=""></video>
            </div>
            <div class="remote-video">
                <video id="remote-video" autoplay></video>
            </div>
        </div>
        <div>
            <button type="button" onclick="startVideo();">开启本机摄像和音频</button>
            <button type="button" onclick="connect();">建立连接</button>
            <button type="button" onclick="hangUp();">挂断</button>
            <button type="button" onclick="refreshPage();">刷新页面</button>
        </div>
    </div>

</div>

<script>
    // ===================以下是socket=======================
    var user = Math.round(Math.random() * 1000) + ""
    //var socketUrl = "ws://localhost:8080/msgServer/" + user;
    var socketUrl = "ws://172.29.40.176:8080/msgServer/"+ user;
    var socket = null
    var socketRead = false
    window.onload = function() {

        socket = new WebSocket(socketUrl)
        socket.onopen = function() {
            console.log("成功连接到服务器...")
            socketRead = true
        }
        socket.onclose = function(e) {
            console.log('与服务器连接关闭: ' + e.code)
            socketRead = false
        }

        socket.onmessage = function(res) {
            var evt = JSON.parse(res.data)
            console.log(evt)
            if (evt.type === 'offer') {
                console.log("接收到offer,设置offer,发送answer....")
                onOffer(evt);
            } else if (evt.type === 'answer' && peerStarted) {
                console.log('接收到answer,设置answer SDP');
                onAnswer(evt);
            } else if (evt.type === 'candidate' && peerStarted) {
                console.log('接收到ICE候选者..');
                onCandidate(evt);
            } else if (evt.type === 'bye' && peerStarted) {
                console.log("WebRTC通信断开");
                stop();
            }
        }
    }

    // ===================以上是socket=======================

    var localVideo = document.getElementById('local-video');
    var remoteVideo = document.getElementById('remote-video');
    var localStream = null;
    var peerConnection = null;
    var peerStarted = false;
    var mediaConstraints = {
        'mandatory': {
            'OfferToReceiveAudio': false,
            'OfferToReceiveVideo': true
        }
    };

    //----------------------交换信息 -----------------------

    function onOffer(evt) {
        console.log("接收到offer...")
        console.log(evt);
        setOffer(evt);
        sendAnswer(evt);
        peerStarted = true
    }

    function onAnswer(evt) {
        console.log("接收到Answer...")
        console.log(evt);
        setAnswer(evt);
    }

    function onCandidate(evt) {
        var candidate = new RTCIceCandidate({
            sdpMLineIndex: evt.sdpMLineIndex,
            sdpMid: evt.sdpMid,
            candidate: evt.candidate
        });
        console.log("接收到Candidate...")
        console.log(candidate);
        peerConnection.addIceCandidate(candidate);
    }

    function sendSDP(sdp) {
        var text = JSON.stringify(sdp);
        console.log('发送sdp.....')
        console.log(text); // "type":"offer"....
        // textForSendSDP.value = text;
        // 通过socket发送sdp
        socket.send(text)
    }

    function sendCandidate(candidate) {
        var text = JSON.stringify(candidate);
        console.log(text); // "type":"candidate","sdpMLineIndex":0,"sdpMid":"0","candidate":"....
        socket.send(text) // socket发送
    }

    //---------------------- 视频处理 -----------------------
    function startVideo() {

        navigator.mediaDevices.enumerateDevices()
        .then(function (devices) {
            devices.forEach(function (device) {
                //打印设备类型，设备名称，设备ID
                console.log(device.kind+":"+device.label+" id="+device.deviceId);
                //根据设备名称，去获取特定的摄像头
                if(device.label.indexOf("Logitech")!=-1){

                }
            })
        });

        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true
            }).then(function(stream) { //success
                localStream = stream;
                localVideo.srcObject = stream;
                //localVideo.src = window.URL.createObjectURL(stream);
                localVideo.play();
                localVideo.volume = 0;
            }).catch(function(error) { //error
                console.error('发生了一个错误: [错误代码：' + error.code + ']');
                return;
            });
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia({
                video: true,
                audio: true
            },function(stream) { //success
                localStream = stream;
                localVideo.srcObject = stream;
                //localVideo.src = window.URL.createObjectURL(stream);
                localVideo.play();
                localVideo.volume = 0;
            }, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia({
                video: true,
                audio: true
            }, function(stream) { //success
                localStream = stream;
                localVideo.srcObject = stream;
                //localVideo.src = window.URL.createObjectURL(stream);
                localVideo.play();
                localVideo.volume = 0;
            }, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia({
                video: true,
                audio: true
            }, function(stream) { //success
                localStream = stream;
                localVideo.srcObject = stream;
                //localVideo.src = window.URL.createObjectURL(stream);
                localVideo.play();
                localVideo.volume = 0;
            }, error);
        }
        
    }

    function refreshPage() {
        location.reload();
    }

    //---------------------- 处理连接 -----------------------
    function prepareNewConnection() {
        var pc_config = {
            "iceServers": []
        };
        var peer = null;
        try {
            peer = new RTCPeerConnection(pc_config);
        } catch (e) {
            console.log("建立连接失败，错误：" + e.message);
        }

        // 发送所有ICE候选者给对方
        peer.onicecandidate = function(evt) {
            if (evt.candidate) {
                console.log(evt.candidate);
                sendCandidate({
                    type: "candidate",
                    sdpMLineIndex: evt.candidate.sdpMLineIndex,
                    sdpMid: evt.candidate.sdpMid,
                    candidate: evt.candidate.candidate
                });
            }
        };
        console.log('添加本地视频流...');
        peer.addStream(localStream);

        peer.addEventListener("addstream", onRemoteStreamAdded, false);
        peer.addEventListener("removestream", onRemoteStreamRemoved, false);

        // 当接收到远程视频流时，使用本地video元素进行显示
        function onRemoteStreamAdded(event) {
            console.log("添加远程视频流");
            // remoteVideo.src = window.URL.createObjectURL(event.stream);
            remoteVideo.srcObject = event.stream;
        }

        // 当远程结束通信时，取消本地video元素中的显示
        function onRemoteStreamRemoved(event) {
            console.log("移除远程视频流");
            remoteVideo.src = "";
        }

        return peer;
    }

    function sendOffer() {
        peerConnection = prepareNewConnection();
        peerConnection.createOffer(function(sessionDescription) { //成功时调用
            peerConnection.setLocalDescription(sessionDescription);
            console.log("发送: SDP");
            console.log(sessionDescription);
            sendSDP(sessionDescription);
        }, function(err) { //失败时调用
            console.log("创建Offer失败");
        }, mediaConstraints);
    }

    function setOffer(evt) {
        if (peerConnection) {
            console.error('peerConnection已存在!');
            return;
        }
        peerConnection = prepareNewConnection();
        peerConnection.setRemoteDescription(new RTCSessionDescription(evt));
    }

    function sendAnswer(evt) {
        console.log('发送Answer,创建远程会话描述...');
        if (!peerConnection) {
            console.error('peerConnection不存在!');
            return;
        }

        peerConnection.createAnswer(function(sessionDescription) { //成功时
            peerConnection.setLocalDescription(sessionDescription);
            console.log("发送: SDP");
            console.log(sessionDescription);
            sendSDP(sessionDescription);
        }, function() { //失败时
            console.log("创建Answer失败");
        }, mediaConstraints);
    }

    function setAnswer(evt) {
        if (!peerConnection) {
            console.error('peerConnection不存在!');
            return;
        }
        peerConnection.setRemoteDescription(new RTCSessionDescription(evt));
    }

    //-------- 处理用户UI事件 -----
    // 开始建立连接
    function connect() {
        if (!localStream) {
            window.alert("请首先捕获本地视频数据.");
        } else if (peerStarted || !socketRead) {
            window.alert("请刷新页面后重试.");
        } else {
            sendOffer();
            peerStarted = true;
        }
    }

    // 停止连接
    function hangUp() {
        console.log("挂断.");
        stop();
    }

    function stop() {
        peerConnection.close();
        peerConnection = null;
        peerStarted = false;
    }
</script>
</body>
</html>