Open IP Camera Forum

General => General Discussion => Topic started by: g0hwc on January 26, 2013, 09:29:30 am

Title: embed ptz on website
Post by: g0hwc on January 26, 2013, 09:29:30 am
Hi all,
I would like to inbed the video and allow control of the PTZ on my website.
I have get the video to display but want to have the PTZ controls on the page too.

Can this be done ?

My cam is the Apexis J901-WS

The page I have made so far is:
http://www.g0hwc.com/security_camera.html

And advice or pointers please

Paul
England UK
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 11:55:03 am
Hi all,
I would like to inbed the video and allow control of the PTZ on my website.
I have get the video to display but want to have the PTZ controls on the page too.

Can this be done ?

My cam is the Apexis J901-WS

The page I have made so far is:
http://www.g0hwc.com/security_camera.html

And advice or pointers please

Paul
England UK

Please try this with your own camera. It requires no download or install first, to do so.

If it works with your IP Camera(s)? Then you can use it to embed one or more, IP Camera(s) into web pages. It shows a live demo of doing that as well ("Using a demo camera").

Please also be aware of one major issue that few people are aware of or talk about.

Many if not most IP Cameras have a finite limit on how many formally logged in concurrent connections they will support, at any given moment in time. Some IP Cameras have a maximum limit as small as 4 concurrent formally logged in connections, at one time.

It should be noted, that this generally includes any combination of the following, that will count as a formally logged in connection. Copies of the standard IP Camera interface running that comes with the camera, video streams ("Directly from the IP Camera to viewers and/or a streaming service or for recording") and many if not most 3rd party applications for the IP Camera.

So, as you can see. In many cases, it's easy to exceed this limit with only personal use, let alone, public access.

You can verify this limit and what it is for your IP Camera by creating copies any of the above things that qualify as a formally logged in connection, until your IP Camera refuses to grant you another connection until or unless one of the current connections is dropped.

Exceeding this limit can cause you the IP Camera owner to lose access to your IP Camera unless or until one of these connections becomes available. It also will deny website visitors to control and/or view your IP Camera. When this limit is reached.

While there are methods to avoid this maximum concurrent connection limit. Few developers/programmers currently, seem to be using them. This can defeat the purpose of making an IP Camera publicly available.

Here is an example of a free Interface, that avoids this maximum concurrent connections issue and works with any Internet browser capable device, running on any Operating System that is using any browser:

http://foscam.us/forum/free-generic-browser-interface-for-foscam-ip-mjpeg-cameras-t2522.html#p10970 (http://foscam.us/forum/free-generic-browser-interface-for-foscam-ip-mjpeg-cameras-t2522.html#p10970)

Additionally. Most ISP Services have some formal maximum bytes per month limits. So you may wish to make sure you can control that as much as possible to avoid a possible ISP account suspension.

The above Interface allows you to throttle the FPS ("Frames Per Second") rate. Of course this may only be required, if the ISP service serving the IP Cameras output does have formal monthly maximum bytes per month limits.

Here is a modified example of the above Interface that in real-time calculates how many bytes during a 30 day period would be used if one person was viewing an IP Camera 24/7, during a 30 day period, at a specific FPS rate using a specific video resolution. Just to give you an idea of how many bytes could be used.

Please note, if there was more that 1 person viewing the IP Camera 24/7, at all given moments during that 30 day period at that FPS rate and video resolution, then the total would be Total_Bytes * number of concurrent viewers, during that 30 day period of time.

http://foscam.us/forum/free-generic-browser-interface-for-foscam-mjpeg-ptz-cameras-t2522-10.html#p11577 (http://foscam.us/forum/free-generic-browser-interface-for-foscam-mjpeg-ptz-cameras-t2522-10.html#p11577)

Don
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 12:06:12 pm
Ah. I just noticed that you already have an older version of my free interface embedded in this web page, at the bottom, with controls:

http://www.g0hwc.com/security_camera.html (http://www.g0hwc.com/security_camera.html)

So does this work for you?

Don
Title: Re: embed ptz on website
Post by: g0hwc on January 26, 2013, 12:21:07 pm
Hi Don,

Yes found your code and it works very well  :D
is there a way of adding zoom control ?

Paul
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 12:28:05 pm
Hi Don,

Yes found your code and it works very well  :D
is there a way of adding zoom control ?

Paul

Hello Paul,

Thanks.

Yes. I am about to release a new version in the next week, that supports optical zoom control, focus and aperture changes for IP Cameras that support any of those features. Like the other controls, you will be able to enable/disable them using the Interfaces configuration options.

As you know, there is already an infinite zoom option that is not using optical zoom. You can set the infinite zoom percentage as a configuration option ("For Others") so that each time you single left click on the video you zoom that percentage and to reset back to normal resolution, you double left click on the video. To disable infinite zoom, you simply use 0 ("Zero") as your ("non-optical") infinite zoom percentage.

Don
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 12:41:13 pm
Here is some of the additional code that will be added to the Interfaces new release. You can try it now if you like and simply insert it where you wish and then delete the controls you don't want to show/use while waiting for the new release:

Code: [Select]
<div id ="Opticlens1" align="center">
<button type="button" onTouchStart="decoder_control_2(8)"  onTouchEnd="decoder_control_2(9)"  onMouseDown="decoder_control_2(8)"  onMouseUp="decoder_control_2(9)">Small Aperture</button>&nbsp;
<button type="button" onTouchStart="decoder_control_2(10)" onTouchEnd="decoder_control_2(11)" onMouseDown="decoder_control_2(10)" onMouseUp="decoder_control_2(11)">Large Aperture</button>&nbsp;
<button type="button" onTouchStart="decoder_control_2(12)" onTouchEnd="decoder_control_2(13)" onMouseDown="decoder_control_2(12)" onMouseUp="decoder_control_2(13)">Foscus Close</button>&nbsp;
<button type="button" onTouchStart="decoder_control_2(14)" onTouchEnd="decoder_control_2(15)" onMouseDown="decoder_control_2(14)" onMouseUp="decoder_control_2(15)">Focus Far</button>&nbsp;
<button type="button" onTouchStart="decoder_control_2(16)" onTouchEnd="decoder_control_2(17)" onMouseDown="decoder_control_2(16)" onMouseUp="decoder_control_2(17)">Zoom In</button>&nbsp;
<button type="button" onTouchStart="decoder_control_2(18)" onTouchEnd="decoder_control_2(19)" onMouseDown="decoder_control_2(18)" onMouseUp="decoder_control_2(19)">Zoom Out</button>&nbsp;
</div>

The actual release will have both a Opticlens1 and a Opticlens2 so that you can have these optical controls above and below the video ("As you can and have been able to do with the PTZ controls"), if you choose to enable that. So, if you want that now, please simply copy this "div" and give it a name of Opticlens2.

The logic behind doing this was that one can use both the infinite zoom and optical zoom at the same moments in time. So as the video image expands top or bottom controls may not be in the browsers window view without needing to scroll the browser window. By having the PTZ and optical controls in two places, it can be helpful when the video image becomes very large. Especially when using devices like phones or tablets, that may have a very small screen area as the video image expands.

Of course as you know, this is a configuration option of the Interface. So you can have the controls in one place or the other or in both places.

Don
Title: Re: embed ptz on website
Post by: g0hwc on January 26, 2013, 01:24:15 pm
Many thanks Don,

added the zoom in and zoom out "they were back to front" so just changed the wording.
One other thing is the user timeout of 5 mins and send to another page don't seem to
be working on my page, unless I have made a error in my code ?

Paul
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 01:38:15 pm
Many thanks Don,

added the zoom in and zoom out "they were back to front" so just changed the wording.
One other thing is the user timeout of 5 mins and send to another page don't seem to
be working on my page, unless I have made a error in my code ?

Paul

You are very welcome.

Yes. There have been many fixes since version V1.5 was released, which is the version you are using.

The current release is V2.7

I suggest using the latest version, which is under the "Download your Free" copy here:

http://foscam.us/forum/free-generic-browser-interface-for-foscam-ip-mjpeg-cameras-t2522.html#p10970 (http://foscam.us/forum/free-generic-browser-interface-for-foscam-ip-mjpeg-cameras-t2522.html#p10970)

I know it will be some work to redo this, but the version you are using is so old, it's hard to predict what other issues you will encounter without doing so.

I also suggest this because I can see that you have removed code for controls ("Example: SetPresets") yet some code left is still referencing what you removed vs. using the disable options in the configuration interface to disable controls, which is causing errors. So, upgrading to the current version will also help those issues as well.

Before deleting code for controls, please let me know. Because, there should be no reason to do so. Also, by doing that and creating errors in the interface can cause some browsers to have issues that are not as forgiving as other browsers are and can also lower your SEO scores as well.

Some search engines today, may not rank your website as high as it would have been ranked, if while crawling your website, that search engine notices errors while doing so.

Don
Title: Re: embed ptz on website
Post by: g0hwc on January 26, 2013, 01:55:06 pm
Many thanks Don,

this link will not work here ?

Paul
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 01:56:53 pm
Many thanks Don,

this link will not work here ?

Paul

You are very welcome, what link Paul?

If you mean placing a link to the current version here? Since that changes from release to release. I want to keep that link in one place vs. updating the link in many places. Otherwise, I might then forget to update a link here or there when a new version is released.

Don
Title: Re: embed ptz on website
Post by: g0hwc on January 26, 2013, 02:06:04 pm
This one Don

http://foscam.us/forum/free-generic-browser-interface-for-foscam-ip-mjpeg-cameras-t2522.html#p10970


Paul
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 02:09:26 pm
This one Don

http://foscam.us/forum/free-generic-browser-interface-for-foscam-ip-mjpeg-cameras-t2522.html#p10970


Paul

Hmmm. Foscam just recently made the topic a "Sticky" maybe that is impacting things. That link still works for me, even after clearing browser cache.

Please try this link:

http://foscam.us/forum/free-generic-browser-interface-for-foscam-ip-mjpeg-cameras-t2522.html (http://foscam.us/forum/free-generic-browser-interface-for-foscam-ip-mjpeg-cameras-t2522.html)

Don
Title: Re: embed ptz on website
Post by: g0hwc on January 26, 2013, 02:16:56 pm
Hi Don,

it seems that http://foscam.us cannot be accessed from the UK !
I just got someone else try to connect to it with no luck see attachment


Paul

Could you email it to me ?
http://www.g0hwc.com/email-me.html
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 02:22:49 pm
Hi Don,

it seems that http://foscam.us cannot be accessed from the UK !
I just got someone else try to connect to it with no luck see attachment


Paul

Could you email it to me ?
http://www.g0hwc.com/email-me.html

Here is the link. I will remove it later. Simply right click on the link below and choose "Save Target As":

Link Removed. Please go to the link above to get the current version of this free Interface.

Don
Title: Re: embed ptz on website
Post by: g0hwc on January 26, 2013, 02:44:45 pm
Many thanks Don,

you can remove the file from your server now  :D

I have it all working now and the timeout now works with the re direct.

But in the bit :

var ShowChangePosition1 = "Y"; // *** Change This? *** Above Image Controls         *
var ShowChangePosition2 = "Y"; // *** Change This? *** Below Image Controls         *
var ShowHPatrol =         "N"; // *** Change This? ***                              *
var ShowVPatrol =         "Y"; // *** Change This? ***                              *
var ShowResMode =         "Y"; // *** Change This? ***                              *
var ShowBrightContrast =  "Y"; // *** Change This? ***                              *
var ShowGoToPresets =     "Y"; // *** Change This? ***                              *
var ShowSetPresets =      "N"; // *** Change This? ***                              *
var ShowFlip =            "N"; // *** Change This? ***                              *
var ShowIR =              "N"; // *** Change This? ***                              *
var ShowLeftRight =       "Y"; // *** Change This? ***                              *
var ShowUpDown =          "Y"; // *** Change This? ***   

The ones I have changed to "N" are still showing on the page?

so will it be ok if I just remove the parts of the code I don't want displayed ?

Paul
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 02:52:07 pm
Many thanks Don,

you can remove the file from your server now  :D

I have it all working now and the timeout now works with the re direct.

But in the bit :

var ShowChangePosition1 = "Y"; // *** Change This? *** Above Image Controls         *
var ShowChangePosition2 = "Y"; // *** Change This? *** Below Image Controls         *
var ShowHPatrol =         "N"; // *** Change This? ***                              *
var ShowVPatrol =         "Y"; // *** Change This? ***                              *
var ShowResMode =         "Y"; // *** Change This? ***                              *
var ShowBrightContrast =  "Y"; // *** Change This? ***                              *
var ShowGoToPresets =     "Y"; // *** Change This? ***                              *
var ShowSetPresets =      "N"; // *** Change This? ***                              *
var ShowFlip =            "N"; // *** Change This? ***                              *
var ShowIR =              "N"; // *** Change This? ***                              *
var ShowLeftRight =       "Y"; // *** Change This? ***                              *
var ShowUpDown =          "Y"; // *** Change This? ***   

The ones I have changed to "N" are still showing on the page?

so will it be ok if I just remove the parts of the code I don't want displayed ?

Paul

You are very welcome.

Please change your "N"; to ""; for controls you do not wish enabled.

Good catch, I need to change the instruction text above these specific configuration options to be more clear.

Don
Title: Re: embed ptz on website
Post by: g0hwc on January 26, 2013, 03:02:18 pm
Thanks Don,

its easy when you know how.

Many thanks for your time and past work on the code

Your a star ;D
Paul
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 03:03:41 pm
Thanks Don,

its easy when you know how.

Many thanks for your time and past work on the code

Your a star ;D
Paul

Thanks for the kind words. I like your website by the way as well. Good job.

Don
Title: Re: embed ptz on website
Post by: g0hwc on January 26, 2013, 04:23:28 pm
As you are into cams Don

During the week I stream live video and audio from my work truck
also live GPS tracking.

On the road monday just after 4am UK time
http://www.truckcam.tv

Paul
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 26, 2013, 04:31:16 pm
As you are into cams Don

During the week I stream live video and audio from my work truck
also live GPS tracking.

On the road monday just after 4am UK time
http://www.truckcam.tv

Paul

Nice!

While I currently don't have a HAM radio license. Here is my background.

http://airforce.togetherweserved.com/usaf/servlet/tws.webapp.WebApp?cmd=ShadowBoxReflectionProfileByName&displayName=TheUberOverLord (http://airforce.togetherweserved.com/usaf/servlet/tws.webapp.WebApp?cmd=ShadowBoxReflectionProfileByName&displayName=TheUberOverLord)

Don
Title: Re: embed ptz on website
Post by: g0hwc on January 27, 2013, 02:48:59 pm
Yeah saw your page, you sure have a busy life there!

I have finished a new page now:
http://www.truckcam.tv/security-cameras.html

It has my cam plus a mates PTZ on it and I have placed
a order for a 2nd cam for the front of my house and will
add that to the page in a week or too.

Thanks again for all your help Don :)
and please let me know when you have the next version of the code
as I am unable to get to it from the UK.

Paul
Title: Re: embed ptz on website
Post by: TheUberOverLord on January 28, 2013, 12:58:55 pm
Yeah saw your page, you sure have a busy life there!

I have finished a new page now:
http://www.truckcam.tv/security-cameras.html

It has my cam plus a mates PTZ on it and I have placed
a order for a 2nd cam for the front of my house and will
add that to the page in a week or too.

Thanks again for all your help Don :)
and please let me know when you have the next version of the code
as I am unable to get to it from the UK.

Paul

You are very welcome.

Yes, I will post back and let you know.

I checked your changes out, using your link above. Very Nice.

I also like the NEW "View Girls Locker Room IP Camera option", LOL!

Don
Title: Re: embed ptz on website
Post by: g0hwc on February 02, 2013, 09:54:11 am
Hi again Don,

I have just added a 2nd ptz on the front of my house and all working fine.  ;D
One question, Is it easy for me to add preset 7 and preset 8 into the code ?
My Apexis J901 has 8 in total.


Paul
http://www.truckcam.tv
Title: Re: embed ptz on website
Post by: g0hwc on February 02, 2013, 10:03:16 am
All sorted, found it and added 7 + 8 :-)
Title: Re: embed ptz on website
Post by: TheUberOverLord on February 02, 2013, 12:47:11 pm
Hi again Don,

I have just added a 2nd ptz on the front of my house and all working fine.  ;D
One question, Is it easy for me to add preset 7 and preset 8 into the code ?
My Apexis J901 has 8 in total.


Paul
http://www.truckcam.tv

Hi sorry for the delay. Actually. The camera supports up to 16 different presets. The WebUI ("User Interface") usually supports a subset of the 16.

If you don't have it already. Here is the latest .cgi SDK documentation that includes the proper values for the 16 presets as well as full documentation on the .cgi interface:

http://foscam.us/forum/cgi-api-sdk-for-mjpeg-h-264-camera-t2986.html (http://foscam.us/forum/cgi-api-sdk-for-mjpeg-h-264-camera-t2986.html)

Also here is some additional documentation I created about presets as well:

http://foscam.us/forum/free-mjpeg-goto-different-presets-loop-interface-t3403.html (http://foscam.us/forum/free-mjpeg-goto-different-presets-loop-interface-t3403.html)

http://foscam.us/forum/ptz-preset-control-panel-utility-t3552.html#p16536 (http://foscam.us/forum/ptz-preset-control-panel-utility-t3552.html#p16536)

Don
Title: Re: embed ptz on website
Post by: g0hwc on February 02, 2013, 04:40:25 pm
Hi Don,

I have made some changes to the up down left right and used images on the 2 cams I now
have at my house. Has anyone else done anything like this ? It would be nice to have a
nice set of buttons set out like in the UI from the camera's

My Apexis cams dont seem to work in up/left , up/right mode so have removed these buttons.

I am going to put a link back to your setup info on my pages, Where do you want me to point
the link to ?

Paul
http://www.truckcam.tv for live webcam / audio and tracking from my truck  ;D Monday to Friday
Title: Re: embed ptz on website
Post by: TheUberOverLord on February 02, 2013, 10:37:23 pm
Hi Don,

I have made some changes to the up down left right and used images on the 2 cams I now
have at my house. Has anyone else done anything like this ? It would be nice to have a
nice set of buttons set out like in the UI from the camera's

My Apexis cams dont seem to work in up/left , up/right mode so have removed these buttons.

I am going to put a link back to your setup info on my pages, Where do you want me to point
the link to ?

Paul
http://www.truckcam.tv for live webcam / audio and tracking from my truck  ;D Monday to Friday

Hello.

I try to maintain information here, on the Interfaces I have created. So it would be best to link here to see all of them in one place:

http://www.openipcam.com/forum/index.php/topic,431.0.html (http://www.openipcam.com/forum/index.php/topic,431.0.html)

Generally, what I do is look at the cameras HTML source code for hints on what is being done and how they are linking images to controls. The downside of this is that different images are used for different brands and models. They can even change names from one firmware version to the next. So, I would host the images on a web site you plan to use vs. referencing them from the camera. Even if you copy them from the camera, to a web site.

That said. Here is an example of referencing an image for controls from a FI8908W clone.

Code: [Select]
<img id="leftup" src="images/leftup_up.gif" onMouseDown="leftup_onmousedown()" onMouseUp="leftup_onmouseup()">

(http://www.openipcam.com/forum/index.php?action=dlattach;topic=499.0;attach=420;image)

In this case when this image is clicked, causing the onMouseDown event to fire, the function to move the camera Left and Up is called. The camera will continue to move in that direction until the mouse button is released, causing the onMouseUp event to fire.

If this image was for a preset. There would be no need to monitor when the mouse button is released. One would simply issue the go to preset command based on the mouse button being clicked. Like there would be in order to stop the camera from moving in this or that direction.

Not sure if this helps?

The one issue which still perplexes me, is that in many cases the cameras WebUI is not also using touch events for mobile devices. Depending on the device. Touching the screen and then removing your finger are not always processed as mouse events, depending on the device and browser for that device being used. So most standard camera interfaces do not work when being used from devices which use touch screens vs. mouse input. Why this is not changed/fixed and remains this way today, amazes me really.

As an example, the above would NOT work with all mobile devices that have touch screens, where someone wants to control the camera using a touch screen. So additional logic needs to be added that includes this to support touch events for camera controls being used by someone touching the screen where the control resides.

Code: [Select]
<img id="leftup" src="images/leftup_up.gif" onMouseDown="leftup_onmousedown()" onMouseUp="leftup_onmouseup()" onTouchStart="leftup_onmousedown()" onTouchEnd="leftup_onmouseup()">
So. If these additional touch events are not added in your web pages. In many cases people visiting your web site will not be able to use your camera controls from their touch screen devices, unless or until they actually position their mouse pointer over that camera control and use whatever emulates a mouse click on their device.

But the second example above, should work for any of the controls in my interfaces by using the syntax for an img vs. a button.

You simply need to add a onTouchStart event for every onMouseDown event and a onTouchEnd event for every onMouseUp event, with your images. If there is only a onMouseDown event, then there is no need to add a onTouchEnd event only a onTouchStart event.

Many if not most of the WebUI interfaces for the cameras use frames. So to see how they are doing this or that with an image in your standard camera interface. It's best to right click on the image you are curious about and then choose "View Source" so that you end up looking at the correct HTML source for what is using that image. Otherwise you could end up looking at some other Iframe HTML source code, that is a part of the web page, but not involved in dealing with the image in question.

Don
Title: Re: embed ptz on website
Post by: TheUberOverLord on March 21, 2014, 09:43:14 am
Any IP Camera owner can optionally easily get and use All my many different IP Camera examples bundled together with one hour of one-on-one support to implement them. Save Time and Money Click Here! (http://107.170.59.150/paypal/)

While this Forum Topic is old. It's still ranking high in search engines for embedding IP Cameras in websites and webpages. So because of that fact. Here are also secure methods to display your IP Camera in webpages and on websites securely without exposing any IP Camera information such as DDNS or IP Address, Port or User Credentials:

http://www.openipcam.com/forum/index.php/topic,748.msg3661.html#msg3661 (http://www.openipcam.com/forum/index.php/topic,748.msg3661.html#msg3661)

Don