auto position local video, move btns to left, fix connected=true is good
This commit is contained in:
ian ramzy
parent
dd61e5386f
commit
1b7a81a2dd
|
|
@ -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()}">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
Loading…
Reference in New Issue