localwebsite: cams: debug video events, support iOS

This commit is contained in:
Evgeny Zinoviev 2022-05-23 17:51:03 +03:00
parent 503d635092
commit 9a59215f9e
4 changed files with 48 additions and 7 deletions

View File

@ -50,7 +50,7 @@ return [
'static' => [
'app.css' => 8,
'app.js' => 1,
'app.js' => 2,
'polyfills.js' => 1,
'modem.js' => 1,
'inverter.js' => 2,

View File

@ -52,7 +52,7 @@ class MiscHandler extends RequestHandler
public function GET_cams() {
global $config;
list($hls_debug) = $this->input('b:hls_debug');
list($hls_debug, $video_events) = $this->input('b:hls_debug, b:video_events');
$hls_opts = [
'startPosition' => -1
@ -65,7 +65,8 @@ class MiscHandler extends RequestHandler
$this->tpl->set([
'hls_host' => $config['cam_hls_host'],
'hls_opts' => $hls_opts,
'cams' => $config['cam_list']
'cams' => $config['cam_list'],
'video_events' => $video_events
]);
$this->tpl->set_title('Камеры');
$this->tpl->render_page('cams.twig');

View File

@ -41,4 +41,22 @@ function extend(a, b) {
function ge(id) {
return document.getElementById(id);
}
}
(function() {
var ua = navigator.userAgent.toLowerCase();
window.browserInfo = {
version: (ua.match(/.+(?:me|ox|on|rv|it|ra|ie)[\/: ]([\d.]+)/) || [0,'0'])[1],
//opera: /opera/i.test(ua),
msie: (/msie/i.test(ua) && !/opera/i.test(ua)) || /trident/i.test(ua),
mozilla: /firefox/i.test(ua),
android: /android/i.test(ua),
mac: /mac/i.test(ua),
samsungBrowser: /samsungbrowser/i.test(ua),
chrome: /chrome/i.test(ua),
safari: /safari/i.test(ua),
mobile: /iphone|ipod|ipad|opera mini|opera mobi|iemobile|android/i.test(ua),
operaMini: /opera mini/i.test(ua),
ios: /iphone|ipod|ipad|watchos/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1),
};
})();

View File

@ -30,10 +30,32 @@ function setupHls(video, name, useHls) {
video.play();
});
} else {
console.warn('hls.js is not supported, trying the native way...')
video.autoplay = true;
video.muted = true;
if (window.browserInfo.ios)
video.setAttribute('controls', 'controls');
video.src = src;
video.addEventListener('canplay', function () {
video.play();
});
var events = ['canplay'];
{% if video_events %}
events.push('canplay', 'canplaythrough', 'durationchange', 'ended', 'loadeddata', 'loadedmetadata', 'pause', 'play', 'playing', 'progress', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'waiting');
{% endif %}
for (var i = 0; i < events.length; i++) {
var evt = events[i];
(function(evt, video, name) {
video.addEventListener(evt, function(e) {
{% if video_events %}
console.log(name + ': ' + evt, e);
{% endif %}
if (!window.browserInfo.ios && ['canplay', 'loadedmetadata'].includes(evt))
video.play();
})
})(evt, video, name);
}
}
}