Skip to content

Commit 460248c

Browse files
GleasonKGleasonK
committed
Simplified minivid, modified js and controller
1 parent d0ca62d commit 460248c

File tree

4 files changed

+95
-83
lines changed

4 files changed

+95
-83
lines changed

‎js/rtc-controller.js‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,13 @@ var CONTROLLER = window.CONTROLLER = function(phone, stream){
2121
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
2222
var readycb = function(session){};
2323
var receivecb = function(session){};
24+
var videotogglecb = function(session, isEnabled){};
25+
var audiotogglecb = function(session, isEnabled){};
2426

2527
CONTROLLER.ready = function(cb) { readycb = cb };
2628
CONTROLLER.receive = function(cb) { receivecb = cb };
29+
CONTROLLER.videoToggled = function(cb) { videotogglecb = cb };
30+
CONTROLLER.audioToggled = function(cb) { audiotogglecb = cb };
2731

2832
phone.ready(function(){ readycb() });
2933
phone.receive(function(session){
@@ -64,7 +68,6 @@ transform: scale(-1, 1); filter: FlipH;";
6468
CONTROLLER.broadcast(thumbnailHolder);
6569
};
6670

67-
6871
CONTROLLER.dial = function(number){ // Authenticate here??
6972
var session = phone.dial(number, get_xirsys_servers()); // Dial Number
7073
if (!session) return; // No Duplicate Dialing Allowed
@@ -82,11 +85,26 @@ transform: scale(-1, 1); filter: FlipH;";
8285
}
8386
};
8487

85-
CONTROLLER.toggleMute = function(){
88+
CONTROLLER.toggleAudio = function(){
89+
var audio = false;
8690
var audioTracks = window.phone.mystream.getAudioTracks();
8791
for (var i = 0, l = audioTracks.length; i < l; i++) {
8892
audioTracks[i].enabled = !audioTracks[i].enabled;
93+
audio = audioTracks[i].enabled;
94+
}
95+
publishCtrlAll("userAudio", {user : phone.number(), audio:audio}); // Stream false if paused
96+
return audio;
97+
};
98+
99+
CONTROLLER.toggleVideo = function(){
100+
var video = false;
101+
var videoTracks = window.phone.mystream.getVideoTracks();
102+
for (var i = 0, l = videoTracks.length; i < l; i++) {
103+
videoTracks[i].enabled = !videoTracks[i].enabled;
104+
video = videoTracks[i].enabled;
89105
}
106+
publishCtrlAll("userVideo", {user : phone.number(), video:video}); // Stream false if paused
107+
return video;
90108
};
91109

92110
CONTROLLER.isOnline = function(number, cb){
@@ -109,10 +127,7 @@ transform: scale(-1, 1); filter: FlipH;";
109127
} else { // New User added to stream/group
110128
if (idx == -1) { // Tell everyone in array of new user first, then add to array.
111129
if (!isStream) {
112-
for (var i=0; i < userArray.length; i++) {
113-
var cChan = controlChannel(userArray[i].number);
114-
publishCtrl(cChan, "userJoin", session.number);
115-
}
130+
publishCtrlAll("userJoin", session.number);
116131
}
117132
userArray.push(session);
118133
}
@@ -126,6 +141,13 @@ transform: scale(-1, 1); filter: FlipH;";
126141
if (!session) return; // No Dupelicate Dialing Allowed
127142
}
128143

144+
function publishCtrlAll(type, data){
145+
for (var i=0; i < userArray.length; i++) {
146+
var cChan = controlChannel(userArray[i].number);
147+
publishCtrl(cChan, type, data);
148+
}
149+
}
150+
129151
function publishCtrl(ch, type, data){
130152
console.log("Pub to " + ch);
131153
var msg = {type: type, data: data};
@@ -153,6 +175,18 @@ transform: scale(-1, 1); filter: FlipH;";
153175
var idx = findWithAttr(userArray, "number", m.data);
154176
if (idx != -1) userArray.splice(idx, 1)[0];
155177
break;
178+
case "userVideo":
179+
var idx = findWithAttr(userArray, "number", m.data.user);
180+
var vidEnabled = m.data.video;
181+
if (idx != -1)
182+
videotogglecb(userArray[idx], vidEnabled);
183+
break;
184+
case "userAudio":
185+
var idx = findWithAttr(userArray, "number", m.data.user);
186+
var audEnabled = m.data.audio;
187+
if (idx != -1)
188+
audiotogglecb(userArray[idx], audEnabled);
189+
break;
156190
}
157191
console.log(m);
158192
console.log(userArray);

‎js/webrtc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,7 @@ var PHONE = window.PHONE = function(config) {
377377
// Listen For New Incoming Calls
378378
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
379379
function subscribe() {
380-
console.log("Subscribed!");
380+
console.log("Subscribed to " + config.number);
381381
pubnub.subscribe({
382382
restore : true,
383383
channel : config.number,

‎minivid.html‎

Lines changed: 28 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -6,96 +6,55 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<style>
88
#vid-box video{
9-
background: black;
10-
height: 300px;
11-
width: 300px;
9+
width: 400px;
1210
}
1311
</style>
1412

1513
</head>
1614
<body>
1715

18-
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
19-
<!-- My Phone Number & Dial Areas -->
20-
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
21-
<div id="vid-box"></div>
22-
23-
<form name="loginForm" id="login" action="#" onsubmit="return login(this);">
24-
<input type="text" name="username" id="username" placeholder="Pick a username!" />
25-
<input type="submit" name="login_submit" value="Log In">
26-
</form>
27-
28-
29-
<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
30-
<input type="text" name="number" placeholder="Enter user to dial!" />
31-
<input type="submit" value="Call"/>
32-
</form>
33-
34-
16+
<div id="vid-box"></div>
17+
18+
<form name="loginForm" id="login" action="#" onsubmit="return login(this);">
19+
<input type="text" name="username" id="username" placeholder="Pick a username!" />
20+
<input type="submit" name="login_submit" value="Log In">
21+
</form>
22+
23+
24+
<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
25+
<input type="text" name="number" placeholder="Enter user to dial!" />
26+
<input type="submit" value="Call"/>
27+
</form>
3528

29+
</body>
3630

37-
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -->
38-
<!-- WebRTC Peer Connections -->
39-
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -->
4031
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
41-
<script src="https://cdn.pubnub.com/pubnub-dev.js"></script>
32+
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
4233
<script src="js/webrtc.js"></script>
43-
4434
<script type="text/javascript">
4535

4636
var video_out = document.getElementById("vid-box");
37+
var hasRTC = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
4738

4839
function login(form) {
49-
try {
50-
var phone = window.phone = PHONE({
51-
number : username.value || "Anonymous", // listen on username line else Anonymous
52-
publish_key : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c', // Your Pub Key
53-
subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe', // Your Sub Key
54-
});
55-
phone.ready(function(){form.username.style.background="#55ff5b"; form.login_submit.hidden="true"; });
56-
phone.receive(function(session){
57-
session.connected(function(session) { video_out.appendChild(session.video); });
58-
session.ended(function(session) { video_out.innerHTML=''; });
59-
});
60-
} catch (err) {
61-
alert("Only works in Chrome, Firefox, and Opera browsers, " + err);
62-
}
40+
var phone = window.phone = PHONE({
41+
number : form.username.value || "Anonymous", // listen on username line else Anonymous
42+
publish_key : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c', // Your Pub Key
43+
subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe', // Your Sub Key
44+
});
45+
phone.ready(function(){form.username.style.background="#55ff5b"; form.login_submit.hidden="true"; });
46+
phone.receive(function(session){
47+
session.connected(function(session) { video_out.appendChild(session.video); });
48+
session.ended(function(session) { video_out.innerHTML=''; });
49+
});
6350
return false;
6451
}
6552

6653
function makeCall(form){
6754
if (!window.phone) alert("Login First!");
68-
else dial(form.number.value);
55+
else phone.dial(form.number.value);
6956
return false;
7057
}
7158

72-
// Start Phone Call
73-
function dial(number) {
74-
var session = phone.dial(number, get_xirsys_servers()); // Dial Number
75-
if (!session) return; // No Dupelicate Dialing Allowed
76-
}
77-
78-
function get_xirsys_servers() {
79-
var servers;
80-
$.ajax({
81-
type: 'POST',
82-
url: 'https://api.xirsys.com/getIceServers',
83-
data: {
84-
room: 'default',
85-
application: 'default',
86-
domain: 'www.pubnub-example.com',
87-
ident: 'pubnub',
88-
secret: 'dec77661-9b0e-4b19-90d7-3bc3877e64ce',
89-
},
90-
success: function(res) {
91-
res = JSON.parse(res);
92-
if (!res.e) servers = res.d.iceServers;
93-
},
94-
async: false
95-
});
96-
return servers;
97-
}
98-
9959
</script>
100-
</body>
101-
</html>
60+
</html>

index.html renamed to minivid2.html

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,15 @@
4242
</form>
4343

4444
<div id="inCall">
45-
<button onclick="end()">End</button> <button onclick="mute()">Mute</button>
45+
<button id="end" onclick="end()">End</button> <button id="mute" onclick="mute()">Mute</button> <button id="pause" onclick="pause()">Pause</button>
4646
</div>
4747
<div id="logs"></div>
4848

4949
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -->
5050
<!-- WebRTC Peer Connections -->
5151
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -->
5252
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
53-
<script src="https://cdn.pubnub.com/pubnub-dev.js"></script>
53+
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
5454
<script src="js/webrtc.js"></script>
5555
<script src="js/rtc-controller.js"></script>
5656

@@ -61,7 +61,7 @@
6161

6262
function login(form) {
6363
var phone = window.phone = PHONE({
64-
number : username.value || "Anonymous", // listen on username line else Anonymous
64+
number : form.username.value || "Anonymous", // listen on username line else Anonymous
6565
publish_key : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c', // Your Pub Key
6666
subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe', // Your Sub Key
6767
});
@@ -70,11 +70,18 @@
7070
form.username.style.background="#55ff5b";
7171
form.login_submit.hidden="true";
7272
ctrl.registerThumbnailHolder(vid_thumb);
73-
addLog("Logged in as " + username.value);
73+
addLog("Logged in as " + form.username.value);
7474
});
7575
ctrl.receive(function(session){
76-
session.connected(function(session){ video_out.appendChild(session.video); addLog(session.number + " has joined."); }); //ctrl.postAuth(session, auth, newCall) });
77-
session.ended(function(session) { $('*[data-number="'+session.number+'"]').remove(); addLog(session.number + " has left."); });
76+
session.connected(function(session){ video_out.appendChild(session.video); addLog(session.number + " has joined."); });
77+
session.ended(function(session) { getVideo(session.number).remove(); addLog(session.number + " has left."); });
78+
});
79+
ctrl.videoToggled(function(session, isEnabled){
80+
getVideo(session.number).toggle(isEnabled);
81+
addLog(session.number+": video enabled - " + isEnabled);
82+
});
83+
ctrl.audioToggled(function(session, isEnabled){
84+
addLog(session.number+": audio enabled - " + isEnabled);
7885
});
7986
return false;
8087
}
@@ -91,13 +98,25 @@
9198
}
9299

93100
function mute(){
94-
ctrl.toggleMute();
101+
var audio = ctrl.toggleAudio();
102+
if (!audio){ $("#mute").html("Unmute"); }
103+
else { $("#mute").html("Mute"); }
95104
}
96105

97106
function end(){
98107
ctrl.hangup();
99108
}
100109

110+
function pause(){
111+
var video = ctrl.toggleVideo();
112+
if (!video){ $('#pause').html('Unpause'); }
113+
else { $('#pause').html('Pause'); }
114+
}
115+
116+
function getVideo(number){
117+
return $('*[data-number="'+number+'"]');
118+
}
119+
101120
function addLog(log){
102121
$('#logs').append("<p>"+log+"</p>");
103122
}

0 commit comments

Comments
 (0)