Stream Airvision (aircam) on webpage

Well, the correct term is not streaming it´s featching a new image every 0,5 second. The problem is that you need to be logged into the cam, so first, login to your webcam and activate the public user. Then lets do some bad hacking:

Add this to your page and change the following things:

Should link to a 1px X 1px empty gif

The link to your webcam (IP or DynDNS)

Address to a nice ajax-loader gif-animation

To a image with the same size as your video output. I have a youtube kind of image with a play button on.


$('#videoframe').click(function() {

$("#loginform").submit( function () {
$("#webcamlogin").one('load', function() {
var currentDate = new Date().getTime();

.videoframecontainer { position: relative; height: 263px; width: 470px; background: url(http://ADDRESS-TO-YOUR-AJAX-LOADER-IMAGE/ajax-loader.gif) no-repeat center center;}
#submit{border:0;background: #fff;color: #fff;}
.pointer {cursor: hand; cursor: pointer;}

<div class="videoframecontainer">
<img id="videoframe" class="pointer" width="470" height="263" border="0" src="YOUR-DUMMY-IMAGE.jpg" alt="">

<form enctype="multipart/form-data" id="loginform" method="post" action="http://ADDRESS-TO-YOUR-WEBCAM/login.cgi" target="webcamlogin">
<input type="hidden" name="uri" id="uri" value="" />
<input type="hidden" name="username" id="username" value="public" />
<input type="hidden" name="password" id="password" maxlength="8" value="" />
<input name="Submit" type="submit" id="submit" value="Show" />

<script type="text/javascript" src=""></script>
<script type="text/javascript">// <![CDATA[
var currentDate = new Date().getTime();
// ]]></script>
<img id="videoframe" alt="Video preview" src="http://YOUR-URL-TO-THE-SERVER/snapshot.cgi?_=136421898asd7583" width="640" height="360" border="1" />

The thing here is to use javascript to reload the image, and then use current timestamp to make sure the browsern doesn´t cache the image. Just click your ”YOUR-DUMMY-IMAGE.jpg” image to start the stream.



Comment if you need any help =)



Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in: Logo

Du kommenterar med ditt Logga ut /  Ändra )


Du kommenterar med ditt Google+-konto. Logga ut /  Ändra )


Du kommenterar med ditt Twitter-konto. Logga ut /  Ändra )


Du kommenterar med ditt Facebook-konto. Logga ut /  Ändra )


Ansluter till %s