www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Javascript to be able to monitor live QUAD IP camera feed.

Hybrid View

  1. #1
    Join Date
    Aug 2012
    Posts
    4

    resolved [RESOLVED] Javascript to be able to monitor live QUAD IP camera feed.

    Hi guys,

    I'm relatively new to the whole Java scripting scene, so I hope my question doesn't seem to be really stupid to all of you expert out there but I'm in a little bit of a jam.

    I wrote a Javascript code (http://www.tech-consilium.com/wp-inc...cript-p1344.js) that enables me to tap into my IP camera at the office and get live -streaming- feed from it by accessing the camera using a user with minimal rights that I have created within the AXIS camera itself.

    Then, in order to make it usable -to publish it-, I uploaded the script to my FTP and referred to it in a new webpage I added using the "src="/wp-includes/js/Live-script/Live-script-p1344.js" command. (My Wordpress site doesn't support direct java script code in the HTML so only by using the "refer to" will make it work.

    So up until now all seems to be working great!!! But my question is; How about if I want to publish not one but four different camera feeds and align the screens in a quad layout, or in case I want to use 2, next to each other?

    If I simply create a second script and alter some parameters like the IP address of the second, third and so on camera, and than refer to that script as well it will publish the feed perfectly okay but align the second, third etc. camera underneath the first one. To check out what I mean click on the following link:

    http://www.tech-consilium.com/?page_id=494

    However what if I wanted to align them next to each other instead of underneath each other like is the case now? What should I change?

    Please help, it would be much appreciated.

    Thanks!

    Phil

  2. #2
    Join Date
    Nov 2007
    Posts
    412
    For starters, remove the <br> between the images.
    Then add a "float:left" to the images.

    Change this:
    Code:
    <p><script src="/wp-includes/js/Live-script/Live-script-p1344.js" type="text/javascript">
    </script><img width="480" height="300" alt="Camera Image" src="http://view:qwerty@84.26.25.13:8081/axis-cgi/mjpg/video.cgi?resolution=480x300&amp;camera=1&amp;dummy=1343863947334"><script type="text/javascript">// &lt;![CDATA[
    updatepage();
    // ]]&amp;gt;</script><br>
    <script src="/wp-includes/js/Live-script/Live-script-M1054.js" type="text/javascript">
    </script><img width="480" height="300" alt="Camera Image" src="http://view:qwerty@84.26.25.13:8084/axis-cgi/mjpg/video.cgi?resolution=480x300&amp;camera=1&amp;dummy=1343863947336"><script type="text/javascript">// &lt;![CDATA[
    updatepage();
    // ]]&amp;gt;</script></p>
    To this:
    Code:
    <style>
    img {float:left}
    </style>
    <p><script src="/wp-includes/js/Live-script/Live-script-p1344.js" type="text/javascript">
    </script><img width="480" height="300" alt="Camera Image" src="http://view:qwerty@84.26.25.13:8081/axis-cgi/mjpg/video.cgi?resolution=480x300&amp;camera=1&amp;dummy=1343863947334"><script type="text/javascript">// &lt;![CDATA[
    updatepage();
    // ]]&amp;gt;</script>
    <script src="/wp-includes/js/Live-script/Live-script-M1054.js" type="text/javascript">
    </script><img width="480" height="300" alt="Camera Image" src="http://view:qwerty@84.26.25.13:8084/axis-cgi/mjpg/video.cgi?resolution=480x300&amp;camera=1&amp;dummy=1343863947336"><script type="text/javascript">// &lt;![CDATA[
    updatepage();
    // ]]&amp;gt;</script></p>
    Now that you see it working, add a "class" to the images that are your camera feeds and move the "float:left" from the style section I added into your CSS.

  3. #3
    Join Date
    Aug 2012
    Posts
    4
    Hey Nap0Leon,

    Thanks man!!!! I did what you said and now I have a quad display!! However one more question, sorry;

    With the code you gave me the top two, and the bottom two are the same (cloned). Suppose that I have for unique camera's all having different ip addresses, to the IP bit in the string would be different for each one.

    Then what should I change?

    Lets say the first cam has an IP address (like now) of 84.26.25.13:8081, the second 84.26.25.13:8084 the third 84.26.25.13:8085 and the last one 84.26.25.13:8086.

    How would I then have to change the script?

    Again your help is very much appreciated!!!

    Phil

  4. #4
    Join Date
    Aug 2012
    Posts
    4
    Or lets say that I want to use only the 2 camera feeds I have now and I only want to be able to align the two camera feed's next to each other instead of below each other?

  5. #5
    Join Date
    Aug 2012
    Posts
    4
    Hey nap0leon, I figured it out thanks to your scripting help!!! THANKS AGAIN!!!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles