View Full Version : How to embed web browser window inside NR?

January 2nd, 2012, 11:53 AM

I would like to embed a web browser window inside the NetRemote application for displaying weather, etc. Right now all I know how to do is to create a button that when pressed, launches Internet Explorer over top of the NR interface. Is there any way to embed the browser inside the NR app itself, without showing any of the IE menus, forward/back buttons, etc. but just the web content (and a scroll bar if necessary)?

Also if this ends up being possible, would it also be possible to embed any other application window inside NR? I also use an IP camera and would love to be able to embed the video image in a frame directly in NR rather than launching the display app, again, over top of NR.

Any help would be greatly appreciated!

January 2nd, 2012, 12:52 PM
Take a look at the skin I have uploaded. It has a few screens that use the embedded web browser. There are many other skins and examples in the download section. Looking at these examples is the easiest way to learn Netremote. Most times you can copy and paste over to your project. Good luck.


January 2nd, 2012, 08:00 PM
Thank you very much!

January 3rd, 2012, 10:47 AM
The embedded browser is working great, thanks again. I didn't realize the component was tied to a button!

I have another question. I have an Axis 207 IP camera and I would like to embed the live video image inside NR. The only two ways I know of viewing the video are to use the camera app, or to view through a browser but the browser displays extra frames and text on the page and I only want just the video and nothing else to be displayed. I believe there is a specific URL I can use to capture the streaming image data but that doesn't display on the screen, it only starts saving all the data continuously to the hard drive.

Any thoughts as to how I might embed the live video feed in NR?

January 4th, 2012, 01:45 PM
For most Axis cameras, if you login to the camera and go to "Live View Config", there is a section that includes HTML examples. You can use this to create a local web page, and then load that page into the NetRemote browser. Here's an example of the options:

// Set the BaseURL to the URL of your camera
var BaseURL = "";

// DisplayWidth & DisplayHeight specifies the displayed width & height of the image.
// You may change these numbers, the effect will be a stretched or a shrunk image
var DisplayWidth = "320";
var DisplayHeight = "240";

// This is the path to the image generating file inside the camera itself
var File = "axis-cgi/mjpg/video.cgi?resolution=320x240";
// No changes required below this point
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer") &&
(navigator.platform != "MacPPC") && (navigator.platform != "Mac68k"))
// If Internet Explorer under Windows then use ActiveX
output = '<OBJECT ID="Player" width='
output += DisplayWidth;
output += ' height=';
output += DisplayHeight;
output += ' CLASSID="CLSID:DE625294-70E6-45ED-B895-CFFA13AEB044" ';
output += 'CODEBASE="';
output += BaseURL;
output += 'activex/AMC.cab#version=4,1,5,5">';
output += '<PARAM NAME="MediaURL" VALUE="';
output += BaseURL;
output += File + '">';
output += '<param name="MediaType" value="mjpeg-unicast">';
output += '<param name="ShowStatusBar" value="0">';
output += '<param name="ShowToolbar" value="0">';
output += '<param name="AutoStart" value="1">';
output += '<param name="StretchToFit" value="1">';
output += '<BR><B>Axis Media Control</B><BR>';
output += 'The AXIS Media Control, which enables you ';
output += 'to view live image streams in Microsoft Internet';
output += ' Explorer, could not be registered on your computer.';
output += '<BR></OBJECT>';
} else {
// If not IE for Windows use the browser itself to display
theDate = new Date();
output = '<IMG SRC="';
output += BaseURL;
output += File;
output += '&dummy=' + theDate.getTime().toString(10);
output += '" HEIGHT="';
output += DisplayHeight;
output += '" WIDTH="';
output += DisplayWidth;
output += '" ALT="Camera Image">';
document.Player.ToolbarConfiguration = "play,+snapshot,+fullscreen"

// Remove the // below to use the code for Motion Detection.
// document.Player.UIMode = "MDConfig";
// document.Player.MotionConfigURL = "/axis-cgi/operator/param.cgi?ImageSource=0"
// document.Player.MotionDataURL = "/axis-cgi/motion/motiondata.cgi";

January 5th, 2012, 06:21 PM
Thanks again!