diff --git a/public/chat.html b/public/chat.html index 9192e56..d15c4ce 100644 --- a/public/chat.html +++ b/public/chat.html @@ -46,7 +46,8 @@

- +
+

No webcam input

diff --git a/public/css/chat.css b/public/css/chat.css index a3a3bb1..6c6799b 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -109,11 +109,26 @@ a { background: #16171a; } +#wrapper { + display: grid; + grid-gap: 10px; + justify-content: center; + padding: 0; + margin: 0; + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 65%; + max-height: 100%; + max-width: 100%; +} + /*caption text*/ #remote-video-text { box-sizing: border-box; margin: 0; - width: 65vw; position: absolute; top: calc(80%); left: 20vw; @@ -131,15 +146,8 @@ a { #remote-video { padding: 0; margin: 0; - position: absolute; - top: 50%; - left: 50%; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - width: 65%; + width: 100%; height: auto; - max-height: 100%; - max-width: 100%; border-radius: 10px; background-image: url(../images/loader.gif); background-size: 400px auto; diff --git a/public/js/chat.js b/public/js/chat.js index 381dd22..3b11bba 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -20,6 +20,7 @@ const isWebRTCSupported = const chatInput = document.querySelector(".compose input"); const remoteVideoVanilla = document.getElementById("remote-video"); const remoteVideo = $("#remote-video"); +const remoteVideosWrapper = $("#wrapper"); const captionText = $("#remote-video-text"); const localVideoText = $("#local-video-text"); const captionButtontext = $("#caption-button-text"); @@ -31,7 +32,7 @@ var VideoChat = { willInitiateCall: false, localICECandidates: [], socket: io(), - remoteVideo: document.getElementById("remote-video"), + remoteVideoWrapper: document.getElementById("wrapper"), localVideo: document.getElementById("local-video"), recognition: undefined, @@ -303,12 +304,20 @@ var VideoChat = { // Called when a stream is added to the peer connection onAddStream: function (event) { logIt("onAddStream <<< Received new stream from remote. Adding it..."); + // Create new remote video source in wrapper + // Create a