Hi Experts,

I have gone forth and created a Custom HTML Object that is using iFrame to display a Live Feed of a IP Camera, but when I open the dashboard the only thing that seems to be refreshing (staying up to date) is the Camera.

The refresh button in the bottom right hand corner won't do anything anymore, and the 10s refresh doesn't occur.

Is there a solution for this? I see many people use iframe to display their Cameras but no one seems to have mentioned this issue.

Article Comments

Could you post your embed code sans the address of your camera? Any javascript errors in the console when the map itself is open?


Dec, 2016 - Permalink

Hi @Stephan,

I found a useful way around the issue, instead of using a Custom HTML Object with the <iFrame> tag.

This was my original code:

<iframe border="1" width="1280px&quot;" height="720px" src="http://10.0.0.2/videofeed.mjpg">
</iframe>

I went and used a JavaScript I found on the forum with a Refresh time of 2000ms.

Original Source of code:
https://helpdesk.paessler.com/en/support/solutions/articles/1013-how-can-i-add-my-own-html-or-javascript-block-to-prtg-maps

<!--Custom Objects: IP Camera-->

<div class="map_object map_graph" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
	<#mapobject type="objectgrip" mode="<@editmode>">
	<#mapobject type="htmlbefore" subid="<@subid>">
	<span>
		<SCRIPT LANGUAGE="JavaScript">

	// Script to download and refresh a webcam image from a Network Camera

		
	$(document).ready(function() //let's do everything after the page had fully loaded
	{		

		// Set the BaseURL to the URL of your camera, set width and height
		var BaseURL = "http://10.0.0.2/";
		var DisplayWidth = "<@width>";  // @width and @height will be replaced with map object size
		var DisplayHeight = "<@height>";
		
		// This is the path to the image generating file inside the camera itself
		var File = "/filepath=<@width>x<@height>&";

		var url = BaseURL+File;
	
		// Let's set the image URL and size
		$(".webcam").attr("src",url).attr("height",DisplayHeight).attr("width",DisplayWidth);
		
	});

		// Here we define our refreshing code. This must be done "dirty" because we may not 
		// use "function" etc. in a map object (the HTML of the map object is potentially loaded
		// multiple times because it is used multiple times or because of the in-page refresh of PRTG
		
		// let's test if the variable for the code is already defined. If yes, don't do it again!

		if ((typeof(window["webcamrefreshcode"]) == "undefined"))
		{
			webcamrefreshcode="$('.webcam').each(function(i,a){$(a).attr('src',$(a).attr('src').replace(/\&.*$/, '') + '&' + Math.random())});setTimeout(webcamrefreshcode, 2000);";
			theTimer = setTimeout(webcamrefreshcode, 2000);
		}

		</SCRIPT> 
		<img class="webcam" src="" height="1" width="1" alt="Live Webcam Image">
	</span>
	<#mapobject type="htmlafter" subid="<@subid>">
</div>

I am now able to use the Dashboard's auto refresh options to keep it up to date, and the Camera feed is almost as if it was a live feed. Slightly jittery, skips a couple frames, but even someone running shows up. You could always play with the math within the if statement at the end of the Javascript it you wanted.


Dec, 2016 - Permalink