-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path404.html
executable file
·145 lines (118 loc) · 4.98 KB
/
404.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
<!DOCTYPE HTML>
<html>
<head>
<title>O'Reilly Introduction to WebRTC</title>
<link rel="stylesheet" type="text/css" href="https://rusyasoft.github.io/assets/css/styles.css">
<script src="https://rusyasoft.github.io/assets/js/src/socket.io.js"></script>
</head>
<body>
<h1>You have Lost, this is page 404. Go back to <a href="https://rusyasoft.github.io"> rusyasoft.github.io </a> </h1>
<h2> Experiment with WebRTC - 4 </h2>
<video id="myVideoTag" autoplay></video>
<video id="theirVideoTag" autoplay></video>
<div>
<label>Your Name</label><input id="myName" type="text"/>
<label>Message</label><input id="myMessage" type="text"/>
<input id="sendMessage" type="submit"/>
<div id="chatArea">Message Output:</br></div>
<div id="signalingArea">Signaling Messages:</br></div>
</div>
<script>
var myVideoArea = document.querySelector("#myVideoTag");
var theirVideoArea = document.querySelector("#theirVideoTag");
var myName = document.querySelector("#myName");
var myMessage = document.querySelector("#myMessage");
var sendMessage = document.querySelector("#sendMessage");
var chatArea = document.querySelector("#chatArea");
var signalingArea = document.querySelector("#signalingArea");
var ROOM = "chat";
var SIGNAL_ROOM = "signal_room";
var configuration = {
'iceServers': [{
'url': 'stun:stun.l.google.com:19302'
}]
};
var rtcPeerConn;
io = io.connect();
io.emit('ready', {"chat_room": ROOM, "signal_room": SIGNAL_ROOM});
//Send a first signaling message to anyone listening
//This normally would be on a button click
io.emit('signal',{"type":"user_here", "message":"Are you ready for a call?", "room":SIGNAL_ROOM});
io.on('signaling_message', function(data) {
displaySignalMessage("Signal received: " + data.type);
//Setup the RTC Peer Connection object
if (!rtcPeerConn)
startSignaling();
if (data.type != "user_here") {
var message = JSON.parse(data.message);
if (message.sdp) {
rtcPeerConn.setRemoteDescription(new RTCSessionDescription(message.sdp), function () {
// if we received an offer, we need to answer
if (rtcPeerConn.remoteDescription.type == 'offer') {
rtcPeerConn.createAnswer(sendLocalDesc, logError);
}
}, logError);
}
else {
rtcPeerConn.addIceCandidate(new RTCIceCandidate(message.candidate));
}
}
});
function startSignaling() {
displaySignalMessage("starting signaling...");
rtcPeerConn = new webkitRTCPeerConnection(configuration);
// send any ice candidates to the other peer
rtcPeerConn.onicecandidate = function (evt) {
if (evt.candidate)
io.emit('signal',{"type":"ice candidate", "message": JSON.stringify({ 'candidate': evt.candidate }), "room":SIGNAL_ROOM});
displaySignalMessage("completed that ice candidate...");
};
// let the 'negotiationneeded' event trigger offer generation
rtcPeerConn.onnegotiationneeded = function () {
displaySignalMessage("on negotiation called");
rtcPeerConn.createOffer(sendLocalDesc, logError);
}
// once remote stream arrives, show it in the remote video element
rtcPeerConn.onaddstream = function (evt) {
displaySignalMessage("going to add their stream...");
theirVideoArea.src = URL.createObjectURL(evt.stream);
};
// get a local stream, show it in our video tag and add it to be sent
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia({
'audio': false,
'video': true
}, function (stream) {
displaySignalMessage("going to display my stream...");
myVideoArea.src = URL.createObjectURL(stream);
rtcPeerConn.addStream(stream);
}, logError);
}
function sendLocalDesc(desc) {
rtcPeerConn.setLocalDescription(desc, function () {
displaySignalMessage("sending local description");
io.emit('signal',{"type":"SDP", "message": JSON.stringify({ 'sdp': rtcPeerConn.localDescription }), "room":SIGNAL_ROOM});
}, logError);
}
function logError(error) {
displaySignalMessage(error.name + ': ' + error.message);
}
io.on('announce', function(data) {
displayMessage(data.message);
});
io.on('message', function(data) {
displayMessage(data.author + ": " + data.message);
});
function displayMessage(message) {
chatArea.innerHTML = chatArea.innerHTML + "<br/>" + message;
}
function displaySignalMessage(message) {
signalingArea.innerHTML = signalingArea.innerHTML + "<br/>" + message;
}
sendMessage.addEventListener('click', function(ev){
io.emit('send', {"author":myName.value, "message":myMessage.value, "room":ROOM});
ev.preventDefault();
}, false);
</script>
</body>
</html>