-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathmedia.html
170 lines (139 loc) · 4.29 KB
/
media.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>
<head>
<title>Media WebRTC Demo</title>
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
<style>#video,#otherPeer { width: 300px;}</style>
</head>
<body>
<video id="video" autoplay></video>
<video id="otherPeer" autoplay></video>
<script>
// get a reference to our FireBase database. You should create your own
// and replace the URL.
var dbRef = new Firebase("https://webrtcdemo.firebaseIO.com/");
var roomRef = dbRef.child("rooms");
// shims!
var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
// generate a unique-ish string
function id () {
return (Math.random() * 10000 + 10000 | 0).toString();
}
// a nice wrapper to send data to FireBase
function send (room, key, data) {
roomRef.child(room).child(key).set(data);
}
// wrapper function to receive data from FireBase
function recv (room, type, cb) {
roomRef.child(room).child(type).on("value", function (snapshot, key) {
var data = snapshot.val();
if (data) { cb(data); }
});
}
// generic error handler
function errorHandler (err) {
console.error(err);
}
// determine what type of peer we are,
// offerer or answerer.
var ROOM = location.hash.substr(1);
var type = "answerer";
var otherType = "offerer";
// no room number specified, so create one
// which makes us the offerer
if (!ROOM) {
ROOM = id();
type = "offerer";
otherType = "answerer";
document.write("<a href='#"+ROOM+"'>Send link to other peer</a>");
}
// generate a unique-ish room number
var ME = id();
// options for the PeerConnection
var server = {
iceServers: [
{url: "stun:23.21.150.121"},
{url: "stun:stun.l.google.com:19302"},
{url: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"}
]
};
var options = {
optional: [
{DtlsSrtpKeyAgreement: true}
]
}
// create the PeerConnection
var pc = new PeerConnection(server, options);
pc.onicecandidate = function (e) {
// take the first candidate that isn't null
if (!e.candidate) { return; }
pc.onicecandidate = null;
// request the other peers ICE candidate
recv(ROOM, "candidate:" + otherType, function (candidate) {
pc.addIceCandidate(new IceCandidate(JSON.parse(candidate)));
});
// send our ICE candidate
send(ROOM, "candidate:"+type, JSON.stringify(e.candidate));
};
// grab the video elements from the document
var video = document.getElementById("video");
var video2 = document.getElementById("otherPeer");
// get the user's media, in this case just video
navigator.getUserMedia({video: true}, function (stream) {
// set one of the video src to the stream
video.src = URL.createObjectURL(stream);
// add the stream to the PeerConnection
pc.addStream(stream);
// now we can connect to the other peer
connect();
}, errorHandler);
// when we get the other peer's stream, add it to the second
// video element.
pc.onaddstream = function (e) {
video2.src = URL.createObjectURL(e.stream);
};
// constraints on the offer SDP. Easier to set these
// to true unless you don't want to receive either audio
// or video.
var constraints = {
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
};
// start the connection!
function connect () {
if (type === "offerer") {
// create the offer SDP
pc.createOffer(function (offer) {
pc.setLocalDescription(offer);
// send the offer SDP to FireBase
send(ROOM, "offer", JSON.stringify(offer));
// wait for an answer SDP from FireBase
recv(ROOM, "answer", function (answer) {
pc.setRemoteDescription(
new SessionDescription(JSON.parse(answer))
);
});
}, errorHandler, constraints);
} else {
// answerer needs to wait for an offer before
// generating the answer SDP
recv(ROOM, "offer", function (offer) {
pc.setRemoteDescription(
new SessionDescription(JSON.parse(offer))
);
// now we can generate our answer SDP
pc.createAnswer(function (answer) {
pc.setLocalDescription(answer);
// send it to FireBase
send(ROOM, "answer", JSON.stringify(answer));
}, errorHandler, constraints);
});
}
}
</script>
</body>
</html>