';
briButton.controlText("Hosted by Brownrice Internet"); // set hover-text
briButton.addClass("vjs-bri-button");
// pass camera name for easier reference
var stream_name = camera['name'];
// this fires every second or so while the video is playing.
// functions send google analytics events
var playing = 99;
player.on('timeupdate', function(e) {
playing++;
if (playing == 1) {
// video has been loaded but play button not yet pressed
// fire google tag event
if (camera.playingRecording) {
gtag('event', `${stream_name}_recording_loaded`, {
"camera_name": stream_name
});
} else if (camera.playingTimelapse) {
gtag('event', `${stream_name}_timelapse_loaded`, {
"camera_name": stream_name
});
} else {
gtag('event', `${stream_name}_video_loaded`, {
"camera_name": stream_name
});
}
} else if (playing > 1 && playing <= 2) {
// video was played for at least one second
var watchedseconds = player.currentTime();
// fire google tag event
if (camera.playingRecording) {
gtag('event', `${stream_name}_recording_played`, {
"camera_name": stream_name
});
} else if (camera.playingTimelapse) {
gtag('event', `${stream_name}_timelapse_played`, {
"camera_name": stream_name
});
} else {
gtag('event', `${stream_name}_video_played`, {
"camera_name": stream_name
});
}
}
});
// reset GA loop count when new video is loaded
player.on('loadedmetadata', function() {
playing = 0;
});
var isAutoplayEnabled = player.autoplay();
// Initialize a flag to track the first interaction
var firstTouch = true;
// Function to toggle play/pause
function togglePlayback() {
if (player.paused()) {
player.play();
} else {
player.pause();
}
}
// Listening for touch events (for mobile devices)
player.on('touchmove', function(event) {
window.draggingList = true;
});
player.on('touchstart', function(event) {
// Prevent any additional default action
if (window.draggingList) {
event.preventDefault();
window.draggingList = false;
} else {
// Prevent-default if the touch event target isn't part of the player's control bar, a logo/banner link, or the timelapse list is shown
if (!(player.controlBar.el().contains(event.target) || $(event.target).hasClass("logolink") || $(event.target).hasClass("preset-select") || $("#timelapse-overlay").is(":visible") || $("#recording-overlay").is(":visible"))) {
event.preventDefault();
// tap not in control bar and timelapse list is hidden, play or pause video
if (!isAutoplayEnabled && firstTouch) {
// Skip the first touch interaction for playback
firstTouch = false;
} else {
// Handle play/pause on subsequent touches
togglePlayback();
}
}
}
});
player.on('pause', function() {
// Modify the style to show the big play button when the video is paused
if (!player.ended()) {
player.bigPlayButton.el().style.display = 'block';
}
checkPlayStatus();
});
player.on('play', function() {
// Hide the big play button when the video is playing
player.bigPlayButton.el().style.display = 'none';
toggleTimelapses("hide");
toggleRecordings("hide");
checkPlayStatus();
});
player.on('ended', function() {
// Make sure the button shows up when the video ends
player.bigPlayButton.el().style.display = 'block';
checkPlayStatus();
});
if (camera['nvrEnabled'] == 1) {
console.log('nvr enabled')
// Override the default duration display update
var durationDisplay = player.controlBar.durationDisplay;
var durationDisplayContent = durationDisplay.contentEl();
// Select the elements with the classes `vjs-progress-control` and `vjs-seek-to-live-control`
var progressControl = document.querySelector('.vjs-progress-control');
var seekToLiveControl = document.querySelector('.vjs-seek-to-live-control');
var liveControl = document.querySelector('.vjs-live-control');
var mouseControl = document.querySelector('.vjs-mouse-display');
var mouseControlWhenClicking = document.querySelector('.vjs-progress-holder');
// Check if the elements exist and change their display style
if (progressControl) {
progressControl.style.display = 'flex';
}
if (seekToLiveControl) {
seekToLiveControl.style.display = 'block';
}
if (liveControl) {
liveControl.style.display = 'none';
}
// Function to update the duration display
function updateDurationDisplay() {
var seekable = player.seekable();
if (seekable && seekable.length > 0) {
var nvrWindowLength = seekable.end(0) - seekable.start(0);
var displayTime = Math.round(nvrWindowLength); // rounded to nearest second
var minutes = Math.floor(displayTime / 60);
var seconds = displayTime % 60;
durationDisplayContent.textContent = minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
}
}
// Update duration display on relevant events
player.on('timeupdate', updateDurationDisplay);
player.on('loadedmetadata', updateDurationDisplay);
var maxNvrLength = 3600; // Maximum DVR length in seconds, e.g., 60 minutes
player.on('timeupdate', function() {
var seekable = this.seekable();
if (seekable.length > 0) {
var nvrLength = seekable.end(0) - seekable.start(0);
if (nvrLength > maxNvrLength) {
var allowedStart = seekable.end(0) - maxNvrLength;
}
}
});
}
console.log('Timeout set to: ' + pausetime + ' seconds.');
if (pausetime > 0) {
// Adjust pausetime based on seekable length
if (camera['nvrEnabled'] == 1) {
player.on('loadedmetadata', function(e) {
if (camera.isLive && player.liveTracker.seekableEnd() > 0) {
pausetime = (Number(defaultPausetime) + player.liveTracker.seekableEnd());
console.log('Adjusted Pausetime with DVR window: ' + pausetime);
}
});
}
// player timeout function
player.on('timeupdate', function(e) {
if (player.currentTime() >= pausetime && window.camera.isLive) {
console.log('Timeout exceeded, pausing video');
player.pause();
pausetime = pausetime * 2;
console.log('Current Pausetime (doubled): '+ pausetime);
}
});
}
const overlay = player.overlay({
overlays: [
]
});
if (camera.listingTimelapses) {
// create timelapse loading spinner
var timelapseLoadingSpinner = player.controlBar.addChild('button', {}, 11);
timelapseLoadingSpinnerDom = timelapseLoadingSpinner.el();
timelapseLoadingSpinnerDom.id = "vjs-timelapse-loading-button";
timelapseLoadingSpinnerDom.innerHTML = '';
timelapseLoadingSpinner.controlText("Loading Timelapses");
timelapseLoadingSpinner.addClass("vjs-loading-button");
// create timelapse button
var timelapseButton = player.controlBar.addChild('button', {}, 11);
var timelapseButtonDom = timelapseButton.el();
timelapseButtonDom.innerHTML = '
';
timelapseButton.controlText("View Timelapses"); // set hover-text
timelapseButton.addClass("vjs-timelapse-button");
$(".vjs-timelapse-button").on("touchstart click", function () { toggleTimelapses();});
$(".vjs-timelapse-button").hide();
// fetch timelapse list
const timelapseId = "0";
const queryString = timelapseId ? `&timelapseId=${timelapseId}` : "";
$.get(`https://live4.brownrice.com/list-timelapses.php?sn=${camera.name}${queryString}`)
.done(function(data) {
if (data && data != "NO_TIMELAPSES") {
let jsonData = JSON.parse(data);
overlay.add({
align: "top",
content: jsonData.overlay,
start: 'showTimelapses',
end: 'hideTimelapses'
});
$("head").append(jsonData.script).hide().show(0);
$("#vjs-timelapse-loading-button").fadeOut(() => {
$(".vjs-timelapse-button").fadeIn();
});
} else {
$("#vjs-timelapse-loading-button").fadeOut();
}
}).fail(function() {
$("#vjs-timelapse-loading-button").fadeOut();
});
}
if (camera.listingRecordings) {
// create recording loading spinner
var recordingLoadingSpinner = player.controlBar.addChild('button', {}, 11);
recordingLoadingSpinnerDom = recordingLoadingSpinner.el();
recordingLoadingSpinnerDom.id = "vjs-recording-loading-button";
recordingLoadingSpinnerDom.innerHTML = '';
recordingLoadingSpinner.controlText("Loading Recordings");
recordingLoadingSpinner.addClass("vjs-loading-button");
// create recording button
var recordingButton = player.controlBar.addChild('button', {}, 11);
var recordingButtonDom = recordingButton.el();
recordingButtonDom.innerHTML = '
';
recordingButton.controlText("View Recordings"); // set hover-text
recordingButton.addClass("vjs-recording-button");
$(".vjs-recording-button").on("touchstart click", function () { toggleRecordings();});
$(".vjs-recording-button").hide();
// fetch recording list
const recordingId = "0";
const queryString = recordingId ? `&recordingId=${recordingId}` : "";
$.get(`https://live4.brownrice.com/list-recordings.php?sn=${camera.name}${queryString}`)
.done(function(data) {
if (data && data != "NO_RECORDINGS") {
let jsonData = JSON.parse(data);
overlay.add({
align: "top",
content: jsonData.overlay,
start: 'showRecordings',
end: 'hideRecordings'
});
$("head").append(jsonData.script).hide().show(0);
$("#vjs-recording-loading-button").fadeOut(() => {
$(".vjs-recording-button").fadeIn();
});
} else {
$("#vjs-recording-loading-button").fadeOut();
}
}).fail(function() {
$("#vjs-recording-loading-button").fadeOut();
});
}
if (!camera.offline) {
// create live button (only shows if the video-source has been switched to non-live)
var liveButton = player.controlBar.addChild('button', {}, 11);
var liveButtonDom = liveButton.el();
liveButtonDom.innerHTML = '
';
liveButton.controlText("View Live Video"); // set hover-text
liveButton.addClass("vjs-live-button");
// add onclick for button
$(".vjs-live-button").on("touchstart click", function(event) {
playVideo($(".vjs-vidsource-live")[0], camera["url_rtsp"], camera["poster"], "", "live");
});
if (!camera.loadingTimelapse && !camera.loadingRecording) {
$(".vjs-live-button").hide(); // hide button to switch back to live
}
}
// control and viewer count
if (camera.roomforcontrols) {
// create presetSelect menu
var presetSelectButton = player.controlBar.addChild('component', {
controlText: 'Select View',
}, 11);
var presetSelectButtonDom = presetSelectButton.el();
ptzInstructions = camera['ptzControls'] ? " or click video ↑" : "";
presetSelectButtonDom.innerHTML = "
';
ptzControlButton.addClass("vjs-camcontrol-button");
// ptzControlButton.addClass("no-padding");
ptzControlButton.addClass("no-margin");
ptzControlButton.addClass("flex-center-parent");
ptzControlButton.addClass("control-" + myDiv);
$(".control-" + myDiv).hide();
}
if (camera.showViewers) {
// show viewers on control bar
var viewersButton = player.controlBar.addChild('component', {
controlText: 'Current Viewers',
}, 11);
var viewersButtonDom = viewersButton.el();
viewersButtonDom.innerHTML = "Calculating 
";
viewersButtonDom.id = "viewing-" + myDiv;
viewersButton.addClass("vjs-viewers-button");
viewersButton.addClass("viewers-" + myDiv);
$(".viewers-" + myDiv).hide();
}
// do not display ads to android users
var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());
if (isAndroid == false) {
// add google tag events for clicked logos
$( "#link_1_" + camera['uid']).click(function() {
var url_value = $(this).attr("href");
console.log( "Logo1 clicked and user sent to "+ url_value );
gtag('event', `${stream_name}_logo1_click`, {
"destination_url": url_value
});
});
$( "#link_2_" + camera['uid']).click(function() {
var url_value = $(this).attr("href");
console.log( "Logo2 clicked and user sent to "+ url_value );
gtag('event', `${stream_name}_logo2_click`, {
"destination_url": url_value
});
});
}
// open timelapses box when timelapse ends
player.on('ended', function(e) {
if (window.camera.playingTimelapse) {
toggleTimelapses("show");
} else if (window.camera.playingRecording) {
toggleRecordings("show");
}
});
})(window, window.videojs);
$(".video-js").css("height", "100%").css("width", "100%");
$("#" + myDiv).css("height", "100%").css("max-height", "100%").css("max-width", "100%");
$("#" + camera['vuid']).css("max-height", "100%").css("max-width", "100%").css("display", "block");
if (typeof center !== 'undefined') {
$("#" + myDiv).children("div").first().css("margin", "0 auto");
$("#" + myDiv).css("margin", "0 auto").css("display", "inline");
}
$("#" + myDiv).show();
$("body").css("margin", "0px");
if ((camera.listingTimelapses || camera.listingRecordings) && disabled == false && (restrict == false || allowed == true)) {
// display control bar even if camera is offline so timelapses/recordings can still be played
$(".vjs-control-bar").attr("style", "display: flex !important;");
}
$(".thumbnail-icon").click(function (event) {
event.stopPropagation();
});
checkPlayStatus();
});
// toggle the timelapses overlay
function toggleTimelapses(hideShow = "") {
if (hideShow !== "show" && (window.camera['showingTimelapses'] || hideShow == "hide")) {
window.camera['showingTimelapses'] = false;
player.trigger('hideTimelapses');
} else {
// now set timelapse overlay to showable (so it doesn't flash as visible on pageload)
$(".vjs-vidsource-banner").css("display", "inline");
if (!window.camera.offline) {
if (camera["isLive"]) {
$(".vjs-vidsource-live").hide();
} else {
$(".vjs-vidsource-live").show();
}
}
// hide recordings overlay and show timelapses
toggleRecordings("hide");
window.camera['showingTimelapses'] = true;
player.trigger('showTimelapses');
}
}
// toggle the timelapses overlay
function toggleRecordings(hideShow = "") {
if (hideShow !== "show" && (window.camera['showingRecordings'] || hideShow == "hide")) {
window.camera['showingRecordings'] = false;
player.trigger('hideRecordings');
} else {
// now set recording overlay to showable (so it doesn't flash as visible on pageload)
$(".vjs-vidsource-banner").css("display", "inline");
if (!window.camera.offline) {
if (camera["isLive"]) {
$(".vjs-vidsource-live").hide();
} else {
$(".vjs-vidsource-live").show();
}
}
// hide timelapses overlay and show recordings
toggleTimelapses("hide");
window.camera['showingRecordings'] = true;
player.trigger('showRecordings');
}
}
function playVideo(element, stream_url, poster_url, filename = "", type) {
toggleTimelapses("hide");
toggleRecordings("hide");
console.log(element);
if (type == "live") {
window.camera.isLive = true;
window.camera.playingRecording = false;
window.camera.playingTimelapse = false;
if (!window.camera.offline) {
$(".vjs-live-button").hide(); // hide button to switch back to live
}
} else {
window.camera.isLive = false;
window.camera.playingRecording = (type == "recording");
window.camera.playingTimelapse = (type == "timelapse");
if (!window.camera.offline) {
$(".vjs-live-button").show(); // show button to switch back to live
}
}
$(".vjs-vidsource-container").removeClass("vjs-vidsource-current");
if (element) {
element.classList.add("vjs-vidsource-current");
}
console.log("Playing " + (window.camera.isLive ? "livestrea" : (window.camera.playingTimelapse ? "timelapse" : (window.camera.playingRecording ? "recording" : "unknown"))) + ".");
playVideoSrc(stream_url, poster_url);
return false;
}
function playVideoSrc(stream_url, poster_url) {
player.src({type: "application/x-mpegURL", src: stream_url});
player.poster(poster_url);
if (!window.camera.isLive) {
player.currentTime(0);
}
player.play();
}
function copyEmbedLink(element) {
navigator.clipboard.writeText(element.href).then(() => {
let originalColor = $(element).parent().css("background-color");
$(element).parent().animate({backgroundColor: "rgba(46, 139, 87, 0.4)"}, "fast", () => {
setTimeout(() => {
$(element).parent().animate({backgroundColor: originalColor}, "slow");
}, 1000);
});
});
return false;
}
function tryOndemandStream() {
// check if the playlist exists
camera.onDemandTries++;
$.get(camera.url_rtsp, () => {
// playlist exists, hide spinner and reload camera
$(".vjs-error-display").removeClass("content-loader");
$(".vjs-loading-spinner").css("display", "");
$(`#${camera.vuid}`).removeClass("vjs-waiting");
player.load();
})
.fail(() => {
if (camera.onDemandTries <= 12) {
// update to cheeky error message and do this again in five seconds
$(".vjs-error-display").html($(".vjs-error-display").html().replace(camera.cheekyMessages[camera.onDemandTries - 1], camera.cheekyMessages[camera.onDemandTries]));
setTimeout(() => {
tryOndemandStream();
}, 5000);
} else {
// update to actual error message and hide spinner
$(".vjs-error-display").html($(".vjs-error-display").html().replace(camera.cheekyMessages[camera.onDemandTries - 1], "The webcam that you are attempting to view appears to be offline. Please contact the owner of this camera and let them know about the issue."));
$(".vjs-error-display").removeClass("content-loader");
$(".vjs-loading-spinner").css("display", "");
$(`#${camera.vuid}`).removeClass("vjs-waiting");
}
});
}