How to see image full screen

Netcam Studio Questions
1

Hello all

I am using the code below to view one of my cameras on a pc.
var camera_3 = {
addEvent: function(elem, event, func ){
if (typeof (window.event) != ‘undefined’)
{elem.attachEvent(‘on’ + event, func);}
else
{elem.addEventListener(event, func, false);}
},
initCamera: function(jpeg, serverUrl, token, id, interval){
this.addEvent(jpeg, ‘load’, function(){setTimeout(function() {camera_3.showJpegFrame(jpeg, serverUrl, token, id);}, interval);});
this.showJpegFrame(jpeg, serverUrl, token, id);
},
showJpegFrame: function(jpeg, serverUrl, token, id){
jpeg.src = serverUrl+“/Jpeg/”+id+“?authToken=”+token+“&”+new Date().getTime();
}
}

camera_3.initCamera(jpeg_3, “http://mydnsaddress:8100”, “f114cdae-c205-460c-ae8f-6dcf7cc700e5”, 3, 40);

My question is what code would I need to be able to double click the stream to go full screen whilst maintain the aspect ratio.

Hope that makes sense.

Stenor

2

This is not something that is provided out-of-the-box by netcam studio however it can be achieved quite easily by javascript (we are doing it for the web client and for the mobile application).

Most likely your website is using jQuery so you can give a try to this option:

You can also have a look at how we did it for the Web Client using Backbone, the sources are here:

Finally for the mobile application (written in AngularJS), we have used a popover modal form to display the stream in fullscreen.

So there are really multiple options but it all depends on how your website is written and which of the frameworks / librairies you are already using.

The simplest concept is that when the user clicks on the image you just apply different CSS to image so that it appears in full screen over the rest of the layout (position: absolute), when the user clicks again then it restores the original css.

3

OK thanks I will give it a go

4

I used this method on my ipad:

<head>
<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>

If you add a shortcut to your homescreen it opens full-screen.

5

thanks for the reply. I got there in the end with a bit of code a friend compiled for me, it works fine in chrome and firefox but its a struggle with ie 11.
regards
stenor