MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-14 14:19:20 +08:00
Code Issues Releases Wiki Activity

safari support! + new fullscreen + needs more testing

Browse Source
This commit is contained in:
Ian Ramzy 2020-04-03 19:40:27 -04:00
parent 95461f14e9
commit cf9244b472
3 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/chat.html
View File

@ -35,7 +35,7 @@
gtag("config", "UA-162048272-1"); gtag("config", "UA-162048272-1");
</script> </script>
</head> </head>
<body onresize="windowResized()"> <body id="body" onresize="windowResized()">
<div id="header"> <div id="header">
<a href="/"> <a href="/">
<img src="/images/logo.svg" alt="Neon" width="48" height="48" /> <img src="/images/logo.svg" alt="Neon" width="48" height="48" />
@ -123,6 +123,7 @@
<div class="HoverState">End Call</div> <div class="HoverState">End Call</div>
</div> </div>
</div> </div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<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/snackbar.js"></script>

9
public/css/chat.css
View File

@ -153,9 +153,14 @@ a {
background-size: 400px auto; background-size: 400px auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328; /*box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;*/
/*-webkit-box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;*/
/*object-fit: fill;*/
}
object-fit: cover; #remote-video.fullscreen {
/*object-fit: fill;*/
width: 100%;
} }
/*Neomorphic buttons*/ /*Neomorphic buttons*/

35
public/js/chat.js
View File

@ -223,7 +223,7 @@ var VideoChat = {
// When receiving a candidate over the socket, turn it back into a real // When receiving a candidate over the socket, turn it back into a real
// RTCIceCandidate and add it to the peerConnection. // RTCIceCandidate and add it to the peerConnection.
onCandidate: function (candidate) { onCandidate: function (candidate) {
$("#caption-text").text("Found other user... connecting"); $("#remote-video-text").text("Found other user... connecting");
logIt("onCandidate"); logIt("onCandidate");
rtcCandidate = new RTCIceCandidate(JSON.parse(candidate)); rtcCandidate = new RTCIceCandidate(JSON.parse(candidate));
logIt( logIt(
@ -375,8 +375,10 @@ function windowResized() {
function openFullscreen() { function openFullscreen() {
try { try {
var elem = document.getElementById("remote-video"); // var elem = document.getElementById("remote-video");
var elem = document.getElementById("body");
if (!isFullscreen) { if (!isFullscreen) {
VideoChat.remoteVideo.classList.add("fullscreen");
isFullscreen = true; isFullscreen = true;
if (elem.requestFullscreen) { if (elem.requestFullscreen) {
elem.requestFullscreen(); elem.requestFullscreen();
@ -385,13 +387,16 @@ function openFullscreen() {
elem.mozRequestFullScreen(); elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { } else if (elem.webkitRequestFullscreen) {
/* Chrome, Safari and Opera */ /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen(); elem.webkitRequestFullscreen();
setTimeout(windowResized, 1000);
} else if (elem.msRequestFullscreen) { } else if (elem.msRequestFullscreen) {
/* IE/Edge */ /* IE/Edge */
elem.msRequestFullscreen(); elem.msRequestFullscreen();
} }
} else { } else {
isFullscreen = false; isFullscreen = false;
VideoChat.remoteVideo.classList.remove("fullscreen");
if (document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
} else if (document.mozCancelFullScreen) { } else if (document.mozCancelFullScreen) {
@ -404,11 +409,11 @@ function openFullscreen() {
/* IE/Edge */ /* IE/Edge */
document.msExitFullscreen(); document.msExitFullscreen();
} }
setTimeout(windowResized, 1000);
} }
} catch (e) { } catch (e) {
logIt(e); logIt(e);
} }
setTimeout(windowResized, 1000);
} }
// //
@ -737,28 +742,34 @@ function toggleChat() {
// //
function togglePictureInPicture() { function togglePictureInPicture() {
if ("pictureInPictureEnabled" in document) { // pipVideo.webkitSetPresentationMode("picture-in-picture");
if (
"pictureInPictureEnabled" in document ||
pipVideo.webkitSetPresentationMode
) {
if (document.pictureInPictureElement) { if (document.pictureInPictureElement) {
document.exitPictureInPicture().catch((error) => { document.exitPictureInPicture().catch((error) => {
logIt("Error exiting pip."); logIt("Error exiting pip.");
logIt(error); logIt(error);
}); });
} else if (pipVideo.webkitPresentationMode === "inline") {
pipVideo.webkitSetPresentationMode("picture-in-picture");
} else if (pipVideo.webkitPresentationMode === "picture-in-picture") {
pipVideo.webkitSetPresentationMode("inline");
} else { } else {
pipVideo.requestPictureInPicture().catch((error) => { pipVideo.requestPictureInPicture().catch((error) => {
alert( alert(
"You must be connected to another person to enter picture in picture." "You must be connected to another person to enter picture in picture."
); );
logIt("Error entering pip.");
logIt(error);
}); });
} }
} else { } else {
alert( alert(
"Picture in picture is not supported in your browser. Consider using Chrome." "Picture in picture is not supported in your browser. Consider using Chrome or Safari."
); );
} }
} }
//todo handle updating of pip button better
pipVideo.addEventListener("enterpictureinpicture", () => { pipVideo.addEventListener("enterpictureinpicture", () => {
$("#pip-text").text("Exit Picture in Picture"); $("#pip-text").text("Exit Picture in Picture");
}); });
@ -772,13 +783,9 @@ pipVideo.addEventListener("leavepictureinpicture", () => {
function startUp() { function startUp() {
// Redirect unsupported browsers // Redirect unsupported browsers
if ( if (!isWebRTCSupported || browserName === "MSIE") {
!isWebRTCSupported ||
browserName === "Safari" ||
browserName === "MSIE"
) {
alert( alert(
"Your browser doesn't support Zipcall. Please use Chrome or Firefox." "Your browser doesn't support Zipcall. Please use Chrome, Firefox, or Safari on laptop/desktop."
); );
window.location.href = "/"; window.location.href = "/";
} }