Skip to content

Commit

Permalink
Version 47:
Browse files Browse the repository at this point in the history 
* Improved support for media autoplay restrictions that may be imposed by web browsers.
* If event-triggered sounds are configured but autoplay restrictions would prevent them from playing, UI3 will now prompt the user to click anywhere to finish the loading process.  The click should lift the autoplay restriction for the session.
* A new option in the "Video Player" section can enable the full-page warning overlay when camera audio is unable to play due to autoplay restrictions.
  • Loading branch information
@bp2008
bp2008 committed Jul 20, 2018
1 parent 63a7ddc commit 81acf6c
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 18 deletions.
4 changes: 2 additions & 2 deletions ui3.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
};
</script>
<script type="text/javascript">
var ui_version = "46";
var ui_version = "47";
var bi_version = "%%VERSION%%";
var combined_version = ui_version + "-" + bi_version;
//if (!!navigator.userAgent.match(/ Android /))
Expand All @@ -46,7 +46,7 @@
</head>
<body>
<div id="svgContainer" style="display: none;"></div>
<div id="loadingmsgwrapper" style="position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,0.75);z-index:999999;font-family:Consolas, monospace, Sans-Serif">
<div id="loadingmsgwrapper" style="position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,0.75);z-index:99999;font-family:Consolas, monospace, Sans-Serif">
<div style="position: absolute;left:50%;top:50%;overflow:visible;white-space:nowrap;">
<div style="position:relative;transform: translate(-50%, -50%);border:2px solid #444444;color:#666666;background-color:#212325;padding:5px;text-align:center;border-radius:10px;">
<div style="margin-bottom:5px;">
Expand Down
14 changes: 14 additions & 0 deletions ui3/libs-src/Css Z-index Planner.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.clipIconWrapper 1
#exportOffsetStart 1
#exportOffsetEnd 2
.clipDesc 10
#statusArea 50
#layouttop 100
#datePickerDialog 100
#bigThumb 9999
#loadingmsgwrapper 99999 (defined in html style attribute)
.inputRequiredToPlay 500000
#toast-container 999999 (defined in toastr css)
.dropdown_list 9999999
.playbackSettings 9999999
.profileListItem.ghost 999999999
2 changes: 1 addition & 1 deletion ui3/ui3.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2348,7 +2348,7 @@ body + div
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
z-index: 500000;
}

.inputRequiredToPlay div
Expand Down
132 changes: 117 additions & 15 deletions ui3/ui3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ var pnacl_player_supported = false;
var mse_mp4_h264_supported = false;
var mse_mp4_aac_supported = false;
var vibrate_supported = false;
var web_audio_autoplay_disabled = false;
function DoUIFeatureDetection()
{
try
Expand Down Expand Up @@ -268,16 +269,18 @@ function detectMSESupport()
}
function detectAudioSupport()
{
var AudioContext = window.AudioContext || window.webkitAudioContext;
if (AudioContext)
try
{
try
// Web Audio (camera sound)
var AudioContext = window.AudioContext || window.webkitAudioContext;
if (AudioContext)
{
var context = new AudioContext();

if (typeof context.createGain === "function")
{
web_audio_supported = true;
web_audio_autoplay_disabled = context.state === "suspended";

if (typeof context.createBuffer === "function" && typeof context.createBufferSource === "function")
{
Expand All @@ -291,8 +294,8 @@ function detectAudioSupport()
}
}
}
catch (ex) { }
}
catch (ex) { }
}
function detectVibrateSupport()
{
Expand Down Expand Up @@ -748,6 +751,14 @@ var defaultSettings =
, hint: "(Default: 1)\n\nJpeg video frames loaded by UI3 will have their dimensions scaled by this amount.\n\nLow values save bandwidth, while high values improve quality slightly."
, category: "Video Player"
}
, {
key: "ui3_web_audio_autoplay_warning"
, value: "0"
, inputType: "checkbox"
, label: 'Warn if audio playback requires user input'
, hint: 'When set to "Yes", a full-page overlay will appear if camera audio playback requires user input. Otherwise, the audio icon will simply turn red.'
, category: "Video Player"
}
, {
key: "ui3_clipicon_trigger_motion"
, value: "0"
Expand Down Expand Up @@ -1813,6 +1824,8 @@ $(function ()

LoadDefaultSettings();

biSoundPlayer.TestUserInputRequirement();

currentPrimaryTab = ValidateTabName(settings.ui3_defaultTab);

setSystemNameButtonState();
Expand Down Expand Up @@ -11101,8 +11114,6 @@ function HTML5_MSE_Player($startingContainer, frameRendered, PlaybackReachedNatu
this.isMsePlayer = true;
this.MaxBufferedTime = 6500;

var inputRequiredOverlayIsActive = false;

var delayCompensation;

var onTimeUpdate = function (e)
Expand All @@ -11129,7 +11140,7 @@ function HTML5_MSE_Player($startingContainer, frameRendered, PlaybackReachedNatu
}
var onVideoError = function (e)
{
if (!inputRequiredOverlayIsActive)
if (!inputRequiredOverlay.IsActive())
playerErrorHandler(player.error.message + ": " + GetMediaErrorMessage(player.error.code));
}
var onPlayerPaused = function (e)
Expand Down Expand Up @@ -11277,17 +11288,11 @@ function HTML5_MSE_Player($startingContainer, frameRendered, PlaybackReachedNatu
if (ex.name === "NotAllowedError")
{
hasToldPlayerToPlay = false;
$(".inputRequiredToPlay").remove();
var $inputOverlay = $('<div class="inputRequiredToPlay"><div>Click anywhere to begin streaming.<br>The HTML5 player requires user input before playback can begin.</div></div>');
$inputOverlay.on('click', function ()
inputRequiredOverlay.Show("HTML5 player", function ()
{
$inputOverlay.remove();
inputRequiredOverlayIsActive = false;
player.play().then(player.pause);
videoPlayer.RefreshVideoStream();
});
$('body').append($inputOverlay);
inputRequiredOverlayIsActive = true;
playerErrorHandler("INPUT REQUIRED");
}
else if (acceptedFrameCount === 0)
Expand Down Expand Up @@ -12360,6 +12365,90 @@ var biSoundPlayer = new (function ()
player.AdjustVolume(settings.ui3_eventSoundVolume);
}
}
this.TestUserInputRequirement = function ()
{
if ((settings.ui3_sound_motion !== "None" || settings.ui3_sound_trigger !== "None")
&& settings.ui3_eventSoundVolume > 0)
{
try
{
// HTML5 audio (sound effect player)
if (typeof Audio === "function")
{
var audio = new Audio();
audio.play().catch(function (ex)
{
if (ex.name === "NotAllowedError")
{
inputRequiredOverlay.Show("event-triggered sound player");
}
});
}
}
catch (ex) { }
}
}
})();
///////////////////////////////////////////////////////////////
// Input Required Overlay /////////////////////////////////////
///////////////////////////////////////////////////////////////
var inputRequiredOverlay = new (function ()
{
var self = this;
var $inputOverlay = $('<div class="inputRequiredToPlay"><div>Click anywhere to begin streaming.<br>The <span class="inputRequiredBy">HTML5 player</span> requires user input before playback can begin.</div></div>');
var $inputRequiredBy = $inputOverlay.find('.inputRequiredBy');
var listeners = [];

var isActive = false;
var isCallingListeners = false;

var overlayClicked = function ()
{
self.Hide();
isCallingListeners = true;
for (var i = 0; i < listeners.length; i++)
{
try
{
listeners[i]();
}
catch (ex)
{
toaster.Warning(ex);
}
}
isCallingListeners = false;
listeners = [];
}

$inputOverlay.on('click', overlayClicked);

this.AddListener = function (callbackFn)
{
if (isCallingListeners)
return;
if (typeof callbackFn === "function")
listeners.push(callbackFn);
}
this.Show = function (name, callbackFn)
{
self.Hide();
self.AddListener(callbackFn);
$inputRequiredBy.text(name);
$('body').append($inputOverlay);
$inputOverlay.on('click', overlayClicked);
isActive = true;
}
this.Hide = function ()
{
$inputOverlay.off('click', overlayClicked);
$inputOverlay.remove();
isActive = false;
}
this.IsActive = function ()
{
return isActive;
}
})();
///////////////////////////////////////////////////////////////
// Customizable Streaming Profiles ////////////////////////////
Expand Down Expand Up @@ -16130,6 +16219,8 @@ function PcmAudioPlayer()
if (!startedUserInputRequirement && context.currentTime === 0 && !suspended && context.state === "suspended")
{
startedUserInputRequirement = true;
if (settings.ui3_web_audio_autoplay_warning === "1")
inputRequiredOverlay.Show("audio player", HandleUserInputRequirement);
for (var i = 0; i < userInputRequirementEvents.length; i++)
document.addEventListener(userInputRequirementEvents[i], HandleUserInputRequirement);
volumeIconHelper.setColorError();
Expand Down Expand Up @@ -17024,11 +17115,17 @@ function Toaster()
}
var showToastInternal = function (type, message, showTime, closeButton, onClick)
{
if (typeof message == "object" && typeof message.message == "string" && typeof message.stack == "string")
if (typeof message === "object" && typeof message.message === "string" && typeof message.stack === "string")
{
console.error(type + " toast", message);
message = htmlEncode(message.message + ": " + message.stack);
}
else if (typeof message === "object" && typeof message.name === "string" && typeof message.message === "string" && typeof message.code === "number")
{
message = message.name + " (code " + message.code + "): " + message.message, message;
console.error(type + " toast", message);
message = htmlEncode(message);
}
else
{
if (type === "error")
Expand Down Expand Up @@ -17554,6 +17651,11 @@ function LoadingHelper()
for (var i = 0; i < things.length; i++)
if (!things[i][2])
return;
if (inputRequiredOverlay.IsActive())
{
inputRequiredOverlay.AddListener(FinishLoadingIfConditionsMet);
return;
}
ajaxHistoryManager = new AjaxHistoryManager();
loadingFinished = true;
$("#loadingmsgwrapper").remove();
Expand Down

0 comments on commit 81acf6c

Please sign in to comment.