MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-14 22:29: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> </head>
<body> <body>
<div id="header"> <div id="header">
<img src="/images/logo.svg" alt="Neon" width="48" height="48"> <img src="/images/logo.svg" alt="Neon" width="48" height="48">
<p>Neon Chat</p> <p>Neon Chat</p>
</div> </div>
<p id="remote-video-text">Waiting for peer to connect...</p>
<video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
<div>
<div id="moveable"> <p id="remote-video-text">Waiting for peer to connect...</p>
<p id="local-video-text">No webcam input</p> <video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
<video id="local-video" autoplay muted></video> <div id="moveable">
<p id="local-video-text">No webcam input</p>
<video id="local-video" autoplay muted></video>
</div>
</div> </div>
<div class="multi-button"> <div class="multi-button">
<div class="buttonContainer"> <div class="buttonContainer">
<button class="hoverButton" onclick="{muteMicrophone()}"> <button class="hoverButton" onclick="{muteMicrophone()}">

61
public/css/chat.css
View File

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

24
public/js/chat.js
View File

@ -204,7 +204,6 @@ var VideoChat = {
logIt("createAnswer"); logIt("createAnswer");
return function () { return function () {
logIt('>>> Creating answer...'); logIt('>>> Creating answer...');
// VideoChat.connected = true;
rtcOffer = new RTCSessionDescription(JSON.parse(offer)); rtcOffer = new RTCSessionDescription(JSON.parse(offer));
VideoChat.peerConnection.setRemoteDescription(rtcOffer); VideoChat.peerConnection.setRemoteDescription(rtcOffer);
VideoChat.peerConnection.createAnswer( VideoChat.peerConnection.createAnswer(
@ -237,8 +236,6 @@ var VideoChat = {
var rtcAnswer = new RTCSessionDescription(JSON.parse(answer)); var rtcAnswer = new RTCSessionDescription(JSON.parse(answer));
VideoChat.peerConnection.setRemoteDescription(rtcAnswer); VideoChat.peerConnection.setRemoteDescription(rtcAnswer);
VideoChat.connected = true;
// should prolly move conneted = true to onaddstream
VideoChat.localICECandidates.forEach(candidate => { VideoChat.localICECandidates.forEach(candidate => {
// The caller now knows that the callee is ready to accept new ICE candidates, so sending the buffer over // 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})`); logIt(`>>> Sending local ICE candidate (${candidate.address})`);
@ -257,7 +254,27 @@ var VideoChat = {
VideoChat.remoteVideo.srcObject = event.stream; VideoChat.remoteVideo.srcObject = event.stream;
Snackbar.close(); Snackbar.close();
VideoChat.remoteVideo.style.background = 'none'; VideoChat.remoteVideo.style.background = 'none';
VideoChat.connected = true;
$('#remote-video-text').text(""); $('#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 // auto get media
VideoChat.requestMediaStream(); VideoChat.requestMediaStream();
VideoChat.rePositionLocalVideo()