MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2025-02-23 00:15:04 +08:00
Code Issues Releases Wiki Activity

GAnalytics, strip case on room hash, auto retry webcam with snackbar

Browse Source
This commit is contained in:
ian ramzy 2020-03-27 00:13:45 -04:00
parent da3ba0ddd2
commit 28cc2d01bd
5 changed files with 67 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/chat.html
View File

@ -13,6 +13,14 @@
not available with traditional technology."> not available with traditional technology.">
<meta property="og:image" content="https://neonchat.io/public/landing/preview.png"> <meta property="og:image" content="https://neonchat.io/public/landing/preview.png">
<meta property="og:url" content="https://neonchat.io/landing"> <meta property="og:url" content="https://neonchat.io/landing">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-162048272-1');
</script>
</head> </head>
<body> <body>
@ -34,6 +42,7 @@
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="../js/snackbar.js"></script>
<script src="../js/chat.js"></script> <script src="../js/chat.js"></script>
</body> </body>
</html> </html>

2
public/css/chat.css
View File

@ -36,7 +36,7 @@ video {
#remote-video { #remote-video {
width: 70%; width: 70%;
height: auto; height: auto;
background-image: url(loader.gif); background-image: url(../images/loader.gif);
background-size: 400px auto; background-size: 400px auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;

64
public/js/chat.js
View File

@ -3,7 +3,7 @@ if (window.location.pathname === "/room") {
} }
url = window.location.href; url = window.location.href;
const roomHash = url.substring(url.lastIndexOf('/') + 1); const roomHash = url.substring(url.lastIndexOf('/') + 1).toLowerCase();
var isWebRTCSupported = var isWebRTCSupported =
@ -27,7 +27,7 @@ if (!isWebRTCSupported) {
function logIt(message, error) { function logIt(message, error) {
// console.log(message); console.log(message);
// Add to logs on page // Add to logs on page
// let logs = document.getElementById('logs'); // let logs = document.getElementById('logs');
// let tmp = document.createElement('P'); // let tmp = document.createElement('P');
@ -53,6 +53,7 @@ var VideoChat = {
// accepted callback to the onMediaStream function, otherwise callback to the // accepted callback to the onMediaStream function, otherwise callback to the
// noMediaStream function. // noMediaStream function.
requestMediaStream: function (event) { requestMediaStream: function (event) {
console.log("requestMediaStream"); console.log("requestMediaStream");
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({video: true, audio: true}) .getUserMedia({video: true, audio: true})
@ -61,8 +62,9 @@ var VideoChat = {
}) })
.catch(error => { .catch(error => {
console.log(error); console.log(error);
logIt('No media stream for us.'); logIt('Failed to get local webcam video, check webcam privacy settings');
alert("Please check your webcam browser privacy settings.") setTimeout(VideoChat.requestMediaStream, 1000);
// alert("Please check your webcam browser privacy settings.")
}); });
}, },
@ -84,10 +86,26 @@ var VideoChat = {
console.log("onMediaStream"); console.log("onMediaStream");
VideoChat.localStream = stream; VideoChat.localStream = stream;
// Add the stream as video's srcObject. // 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;
$('<input id="some-element">').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; VideoChat.localVideo.srcObject = stream;
// Now we're ready to join the chat room. // Now we're ready to join the chat room.
VideoChat.socket.emit('join', roomHash); VideoChat.socket.emit('join', roomHash);
VideoChat.socket.on('temp', () => alert("temp called"));
VideoChat.socket.on('full', VideoChat.chatRoomFull); VideoChat.socket.on('full', VideoChat.chatRoomFull);
VideoChat.socket.on('offer', VideoChat.onOffer); VideoChat.socket.on('offer', VideoChat.onOffer);
VideoChat.socket.on('ready', VideoChat.readyToCall); VideoChat.socket.on('ready', VideoChat.readyToCall);
@ -102,6 +120,7 @@ var VideoChat = {
// When we are ready to call, enable the Call button. // When we are ready to call, enable the Call button.
readyToCall: function (event) { readyToCall: function (event) {
// Show share URL
console.log("readyToCall"); console.log("readyToCall");
if (VideoChat.willInitiateCall) { if (VideoChat.willInitiateCall) {
VideoChat.startCall() VideoChat.startCall()
@ -245,10 +264,6 @@ var VideoChat = {
} }
}; };
// auto get media
// VideoChat.requestScreenStream();
VideoChat.requestMediaStream();
function openFullscreen() { function openFullscreen() {
if (VideoChat.remoteVideo.requestFullscreen) { if (VideoChat.remoteVideo.requestFullscreen) {
@ -275,10 +290,7 @@ function muteMicrophone() {
} }
function pauseVideo() { function pauseVideo() {
var muted = !VideoChat.localStream.getAudioTracks()[0].enabled; VideoChat.localStream.getVideoTracks()[0].enabled = !VideoChat.localStream.getVideoTracks()[0].enabled;
var videoPaused = !VideoChat.localStream.getVideoTracks()[0].enabled;
VideoChat.localStream.getAudioTracks()[0].enabled = muted;
VideoChat.localStream.getVideoTracks()[0].enabled = videoPaused;
var pausedButton = document.getElementById("videoPauseButton"); var pausedButton = document.getElementById("videoPauseButton");
if (!muted) { if (!muted) {
pausedButton.innerText = "Unpause" pausedButton.innerText = "Unpause"
@ -308,21 +320,25 @@ $(document).mousemove(function () {
_delay = setInterval(delayCheck, 500); _delay = setInterval(delayCheck, 500);
// Show share URL // Show accept webcam snackbar
Snackbar.show({ Snackbar.show({
text: 'Share this URL with a friend to get started', text: 'Please allow microphone and webcam access',
actionText: 'Copy URL', actionText: 'Show Me How',
width: '355px', width: '455px',
pos: 'top-left', pos: 'top-right',
actionTextColor: '#8688ff', actionTextColor: '#8688ff',
duration: 50000, duration: 50000,
backgroundColor: '#292B32', backgroundColor: '#292B32',
onActionClick: function (element) { onActionClick: function (element) {
var copyContent = window.location.href; window.open('https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser', '_blank');
$('<input id="some-element">').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
} }
}); });
// auto get media
// VideoChat.requestScreenStream();
VideoChat.requestMediaStream();

8
public/landing.html
View File

@ -13,6 +13,14 @@
not available with traditional technology."> not available with traditional technology.">
<meta property="og:image" content="https://neonchat.io/images/preview.png"> <meta property="og:image" content="https://neonchat.io/images/preview.png">
<meta property="og:url" content="https://neonchat.io/"> <meta property="og:url" content="https://neonchat.io/">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-162048272-1');
</script>
</head> </head>
<body class="has-animations"> <body class="has-animations">
<div class="body-wrap"> <div class="body-wrap">

45
public/newroom.html
View File

@ -13,43 +13,14 @@
not available with traditional technology."> not available with traditional technology.">
<meta property="og:image" content="https://neonchat.io/images/review.png"> <meta property="og:image" content="https://neonchat.io/images/review.png">
<meta property="og:url" content="https://neonchat.io/"> <meta property="og:url" content="https://neonchat.io/">
<style> <!-- Global site tag (gtag.js) - Google Analytics -->
.pulse { <script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
box-shadow: 0 0 0 rgba(120, 120, 120, 0.4); <script>
animation: pulse 4s infinite; window.dataLayer = window.dataLayer || [];
} function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
.pulse:hover { gtag('config', 'UA-162048272-1');
animation: none; </script>
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 15px rgba(120, 120, 120, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4);
box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(120, 120, 120, 0);
box-shadow: 0 0 0 15px rgba(120, 120, 120, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
}
}
</style>
</head> </head>
<body class="has-animations"> <body class="has-animations">
<div class="body-wrap"> <div class="body-wrap">