Skip to content

Commit

Permalink
Asking username from user
Browse files Browse the repository at this point in the history
  • Loading branch information
Valar authored and Valar committed Apr 28, 2017
1 parent eba6ab2 commit 194f842
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 8 deletions.
25 changes: 23 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,14 @@
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
Your Peer ID: <h4 id="peer-id" data-toggle="tooltip" data-placement="top" title="Click to copy peer ID"></h3>
Your ID: <h4 id="peer-id" data-toggle="tooltip" data-placement="top" title="Click to copy peer ID"></h3>
<a href="#getUserNameModal" data-toggle="modal">change</a>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-inline">
<div class="form-group mx-sm-3">
<label for="inputPeerUserId" class="sr-only">Password</label>
<input type="text" class="form-control" id="inputPeerUserId" placeholder="Peer ID">
<input type="text" class="form-control" id="inputPeerUserId" placeholder="Enter your friends ID">
</div>
<button type="button" class="btn btn-outline-primary" id='connect-btn'>Connect</button>
</div>
Expand Down Expand Up @@ -81,6 +82,26 @@ <h2 class="title">Video Call</h2>
</div>
</div>

<div class="modal fade" id="getUserNameModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Enter your Name</h5>
</div>
<div class="modal-body">
<div class="form-group">
<label for="user-name" class="form-control-label">Your Name:</label>
<input type="text" class="form-control" id="user-name">
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary username-done">Done</button>
</div>
</div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>

Expand Down
52 changes: 51 additions & 1 deletion js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,36 @@ function myjsapp(peerClient) {
var chatHistory = {};
var chatPanel = {};

var cookie = {
// Read cookie
get : function getCookie (name) {
var cookies = {};
var c = document.cookie.split('; ');
for (i = c.length - 1; i >= 0; i--) {
var C = c[i].split('=');
cookies[C[0]] = C[1];
}
return cookies[name] || null;
},

// create cookie
set : function createCookie (name, value, minutes) {
if (minutes) {
var date = new Date();
date.setTime(date.getTime() + (minutes * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else
var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
},

remove : function deleteCookie (name) {
var date = new Date();
date.setTime(date.getTime() - 60 * 1000);
document.cookie = name + "=; expires=" + date.toGMTString() + "; path=/";
}
};

function EventListeners() {
$('#peer-id').tooltip()

Expand Down Expand Up @@ -40,6 +70,11 @@ function myjsapp(peerClient) {
// End established call
peerClient.endCall();
})

$('.username-done').click(function (event) {
var username = $('#user-name').val().trim();
startPeerClient(username)
})
}

function appendToHistory(id, message, isSent) {
Expand All @@ -52,7 +87,21 @@ function myjsapp(peerClient) {
}
}

EventListeners();
function startPeerClient(username) {
// TODO - Set title
cookie.set('username', username);
peerClient.connectToServerWithId(username);
}

// Show Username Modal
var username = cookie.get('username');
if(username) {
startPeerClient(username)
} else {
$('#getUserNameModal').modal()
}

EventListeners();

return {
setPeerId : function (id) {
Expand Down Expand Up @@ -122,6 +171,7 @@ function myjsapp(peerClient) {
peerClient.makeCall(toPeerId, isVideoCall);
return false
})

videoCall.click(function (event) {
// initializeLocalVideo()
var isVideoCall = true;
Expand Down
16 changes: 11 additions & 5 deletions js/peer-client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,16 @@ peerapp = (function() {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

// Connect to server
function connectToServer() {
function connectToServerWithId(peerId) {
myPeerID = peerId || myPeerID;
peer = new Peer(myPeerID, { host: PEER_SERVER, port: PORT, path: '/', secure: true });
peerCallbacks(peer);
}
// var peer = new Peer({ host: 'my-peer.herokuapp.com', port: '443', path: '/', secure: true });
connectToServer();
// connectToServerWithId(myPeerID);
console.log(peer)

initializeLocalMedia({'audio' : true});
initializeLocalMedia({'audio': true, 'video': true});

// Generate random ID
function generateRandomID(length) {
Expand Down Expand Up @@ -118,7 +119,7 @@ peerapp = (function() {
console.log("Peer connection disconnected");
console.log(new Date());
setTimeout(function () {
connectToServer();
connectToServerWithId();
}, 3000);

// peer.reconnect()
Expand All @@ -128,6 +129,10 @@ peerapp = (function() {
console.log(new Date());
console.log("Peer connection error:")
console.log(err)
if("unavailable-id" == err.type) {
// ID Already taken, so assigning random ID
myPeerID = generateRandomID(4);
}
});
};

Expand Down Expand Up @@ -227,6 +232,7 @@ peerapp = (function() {
makeCall : makeCall,
endCall : endCall,
sendMessage : sendMessage,
connectToId : connectToId
connectToId : connectToId,
connectToServerWithId : connectToServerWithId
}
})();

0 comments on commit 194f842

Please sign in to comment.