From 28cc2d01bd3b490d052b5c4bcef486994c4b8811 Mon Sep 17 00:00:00 2001 From: ian ramzy Date: Fri, 27 Mar 2020 00:13:45 -0400 Subject: [PATCH] GAnalytics, strip case on room hash, auto retry webcam with snackbar --- public/chat.html | 9 +++++++ public/css/chat.css | 2 +- public/js/chat.js | 66 ++++++++++++++++++++++++++++----------------- public/landing.html | 8 ++++++ public/newroom.html | 45 ++++++------------------------- 5 files changed, 67 insertions(+), 63 deletions(-) diff --git a/public/chat.html b/public/chat.html index 9e2cf70..8add122 100644 --- a/public/chat.html +++ b/public/chat.html @@ -13,6 +13,14 @@ not available with traditional technology."> + + + @@ -34,6 +42,7 @@ + \ No newline at end of file diff --git a/public/css/chat.css b/public/css/chat.css index 6944874..43fd281 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -36,7 +36,7 @@ video { #remote-video { width: 70%; height: auto; - background-image: url(loader.gif); + background-image: url(../images/loader.gif); background-size: 400px auto; background-repeat: no-repeat; background-position: center center; diff --git a/public/js/chat.js b/public/js/chat.js index 89f1986..5ae349d 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -3,7 +3,7 @@ if (window.location.pathname === "/room") { } url = window.location.href; -const roomHash = url.substring(url.lastIndexOf('/') + 1); +const roomHash = url.substring(url.lastIndexOf('/') + 1).toLowerCase(); var isWebRTCSupported = @@ -27,7 +27,7 @@ if (!isWebRTCSupported) { function logIt(message, error) { - // console.log(message); + console.log(message); // Add to logs on page // let logs = document.getElementById('logs'); // let tmp = document.createElement('P'); @@ -53,6 +53,7 @@ var VideoChat = { // accepted callback to the onMediaStream function, otherwise callback to the // noMediaStream function. requestMediaStream: function (event) { + console.log("requestMediaStream"); navigator.mediaDevices .getUserMedia({video: true, audio: true}) @@ -61,8 +62,9 @@ var VideoChat = { }) .catch(error => { console.log(error); - logIt('No media stream for us.'); - alert("Please check your webcam browser privacy settings.") + logIt('Failed to get local webcam video, check webcam privacy settings'); + setTimeout(VideoChat.requestMediaStream, 1000); + // alert("Please check your webcam browser privacy settings.") }); }, @@ -84,10 +86,26 @@ var VideoChat = { console.log("onMediaStream"); VideoChat.localStream = stream; // Add the stream as video's srcObject. + Snackbar.show({ + text: 'Share this URL with a friend to get started', + actionText: 'Copy URL', + width: '355px', + pos: 'top-left', + actionTextColor: '#8688ff', + duration: 500000, + backgroundColor: '#292B32', + onActionClick: function (element) { + var copyContent = window.location.href; + $('').val(copyContent).appendTo('body').select(); + document.execCommand('copy'); + var toRemove = document.querySelector('#some-element'); + toRemove.parentNode.removeChild(toRemove); + $(element).css('opacity', 0); //Set opacity of element to 0 to close Snackbar + } + }); VideoChat.localVideo.srcObject = stream; // Now we're ready to join the chat room. VideoChat.socket.emit('join', roomHash); - VideoChat.socket.on('temp', () => alert("temp called")); VideoChat.socket.on('full', VideoChat.chatRoomFull); VideoChat.socket.on('offer', VideoChat.onOffer); VideoChat.socket.on('ready', VideoChat.readyToCall); @@ -102,6 +120,7 @@ var VideoChat = { // When we are ready to call, enable the Call button. readyToCall: function (event) { + // Show share URL console.log("readyToCall"); if (VideoChat.willInitiateCall) { VideoChat.startCall() @@ -245,10 +264,6 @@ var VideoChat = { } }; -// auto get media -// VideoChat.requestScreenStream(); -VideoChat.requestMediaStream(); - function openFullscreen() { if (VideoChat.remoteVideo.requestFullscreen) { @@ -275,10 +290,7 @@ function muteMicrophone() { } function pauseVideo() { - var muted = !VideoChat.localStream.getAudioTracks()[0].enabled; - var videoPaused = !VideoChat.localStream.getVideoTracks()[0].enabled; - VideoChat.localStream.getAudioTracks()[0].enabled = muted; - VideoChat.localStream.getVideoTracks()[0].enabled = videoPaused; + VideoChat.localStream.getVideoTracks()[0].enabled = !VideoChat.localStream.getVideoTracks()[0].enabled; var pausedButton = document.getElementById("videoPauseButton"); if (!muted) { pausedButton.innerText = "Unpause" @@ -308,21 +320,25 @@ $(document).mousemove(function () { _delay = setInterval(delayCheck, 500); -// Show share URL +// Show accept webcam snackbar Snackbar.show({ - text: 'Share this URL with a friend to get started', - actionText: 'Copy URL', - width: '355px', - pos: 'top-left', + text: 'Please allow microphone and webcam access', + actionText: 'Show Me How', + width: '455px', + pos: 'top-right', actionTextColor: '#8688ff', duration: 50000, backgroundColor: '#292B32', onActionClick: function (element) { - var copyContent = window.location.href; - $('').val(copyContent).appendTo('body').select(); - document.execCommand('copy'); - var toRemove = document.querySelector('#some-element'); - toRemove.parentNode.removeChild(toRemove); - $(element).css('opacity', 0); //Set opacity of element to 0 to close Snackbar + window.open('https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser', '_blank'); } -}); \ No newline at end of file +}); + + + + +// auto get media +// VideoChat.requestScreenStream(); +VideoChat.requestMediaStream(); + + diff --git a/public/landing.html b/public/landing.html index 8532eec..27412c7 100755 --- a/public/landing.html +++ b/public/landing.html @@ -13,6 +13,14 @@ not available with traditional technology."> + + +
diff --git a/public/newroom.html b/public/newroom.html index 22ac043..dff007c 100755 --- a/public/newroom.html +++ b/public/newroom.html @@ -13,43 +13,14 @@ not available with traditional technology."> - + + +