MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-14 14:19:20 +08:00
Code Issues Releases Wiki Activity

auto position local video, move btns to left, fix connected=true is good

Browse Source
This commit is contained in:
ian ramzy 2020-03-28 13:30:38 -04:00
parent dd61e5386f
commit 1b7a81a2dd
3 changed files with 72 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/chat.html
View File

@ -28,20 +28,23 @@
</head>
<body>
<div id="header">
<img src="/images/logo.svg" alt="Neon" width="48" height="48">
<p>Neon Chat</p>
</div>
<p id="remote-video-text">Waiting for peer to connect...</p>
<video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
<div id="moveable">
<p id="local-video-text">No webcam input</p>
<video id="local-video" autoplay muted></video>
<div>
<p id="remote-video-text">Waiting for peer to connect...</p>
<video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
<div id="moveable">
<p id="local-video-text">No webcam input</p>
<video id="local-video" autoplay muted></video>
</div>
</div>
<div class="multi-button">
<div class="buttonContainer">
<button class="hoverButton" onclick="{muteMicrophone()}">

61
public/css/chat.css
View File

@ -2,9 +2,33 @@
/*Fade in page on load*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*Fade in page on load*/
@ -12,16 +36,16 @@ body {
background: #16171B;
margin: 0;
padding: 0;
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
animation-duration:0.3s;
opacity: 0; /* make things invisible upon start */
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 0.3s;
-moz-animation-duration: 0.3s;
animation-duration: 0.3s;
}
@ -52,14 +76,13 @@ video {
#moveable {
z-index: 100;
right: 14px;
bottom: 10px;
position: absolute;
width: 15%;
cursor: move;
}
#moveable p {
z-index: 101;
position: absolute;
@ -71,9 +94,9 @@ video {
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-weight: bold;
background: rgba(0, 0, 0, 0.38);
background: rgba(0, 0, 0, 0.12);
padding: 10px;
transition: 0.5s;
border-radius: 5px;
}
#local-video {
@ -144,7 +167,7 @@ button:hover {
.multi-button {
position: absolute;
right: calc(5vw - 40px);
left: calc(5vw - 40px);
top: calc(50vh - 175px);
z-index: 999;
border-radius: 10px;
@ -160,7 +183,7 @@ button:hover {
color: white;
font-family: "Heebo", sans-serif;
position: absolute;
right: 70px;
left: 70px;
white-space: nowrap;
top: 25px;
font-weight: bold;

24
public/js/chat.js
View File

@ -204,7 +204,6 @@ var VideoChat = {
logIt("createAnswer");
return function () {
logIt('>>> Creating answer...');
// VideoChat.connected = true;
rtcOffer = new RTCSessionDescription(JSON.parse(offer));
VideoChat.peerConnection.setRemoteDescription(rtcOffer);
VideoChat.peerConnection.createAnswer(
@ -237,8 +236,6 @@ var VideoChat = {
var rtcAnswer = new RTCSessionDescription(JSON.parse(answer));
VideoChat.peerConnection.setRemoteDescription(rtcAnswer);
VideoChat.connected = true;
// should prolly move conneted = true to onaddstream
VideoChat.localICECandidates.forEach(candidate => {
// The caller now knows that the callee is ready to accept new ICE candidates, so sending the buffer over
logIt(`>>> Sending local ICE candidate (${candidate.address})`);
@ -257,7 +254,27 @@ var VideoChat = {
VideoChat.remoteVideo.srcObject = event.stream;
Snackbar.close();
VideoChat.remoteVideo.style.background = 'none';
VideoChat.connected = true;
$('#remote-video-text').text("");
var timesRun = 0;
var interval = setInterval(function(){
timesRun += 1;
if(timesRun === 20){
clearInterval(interval);
}
VideoChat.rePositionLocalVideo()
}, 300);
},
rePositionLocalVideo: function(){
var bounds = $("#remote-video").position();
bounds.top += 10;
bounds.left += 10;
$("#moveable").css(bounds)
}
};
@ -425,3 +442,4 @@ $("#moveable").draggable({containment: 'window'});
// auto get media
VideoChat.requestMediaStream();
VideoChat.rePositionLocalVideo()