Add support for Safari on iOS

This commit is contained in:
Ian Ramzy 2020-04-12 13:56:33 -04:00
parent f1c22d2a6c
commit 9d8a4c3725
3 changed files with 31 additions and 13 deletions

4
public/chat.html vendored
View File

@ -47,10 +47,10 @@
</div>
<p id="remote-video-text"></p>
<video id="remote-video" autoplay></video>
<video id="remote-video" autoplay playsinline></video>
<div id="moveable">
<p id="local-video-text">No webcam input</p>
<video id="local-video" autoplay muted></video>
<video id="local-video" autoplay muted playsinline></video>
</div>
<div id="entire-chat">

18
public/css/chat.css vendored
View File

@ -548,4 +548,22 @@ button:hover {
}
}
/*Hide video controls on mobile*/
/*todo: still buggy on iOS, play/pause button pops up on load for iOS,
goes away after you press pause then play again*/
video ::-webkit-media-controls-panel {
display: none !important;
-webkit-appearance: none;
}
video ::--webkit-media-controls-play-button {
display: none !important;
-webkit-appearance: none;
}
video ::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none;
}
/* End mobile layout */

View File

@ -838,20 +838,20 @@ function togglePictureInPicture() {
function startUp() {
// Redirect mobile browsers
if (
/webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
) {
alert(
"Zipcall is not currently supported on mobile. Please try again on desktop."
);
window.location.href = "/notsupported";
}
// if (
// /webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
// navigator.userAgent
// )
// ) {
// alert(
// "Zipcall is not currently supported on mobile. Please try again on desktop."
// );
// window.location.href = "/notsupported";
// }
// Redirect unsupported browsers
if (!isWebRTCSupported || browserName === "MSIE") {
alert(
"Your browser doesn't support Zipcall. Please use Chrome, Firefox, or Safari on laptop/desktop."
"Your browser doesn't support Zipcall. Please use Chrome, Firefox, or Safari. If using iOS please use Safari"
);
window.location.href = "/notsupported";
}