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:

http://ADDRESS-TO-YOUR-EMPTY-GIF-FILE/empty.gif
Should link to a 1px X 1px empty gif

http://ADDRESS-TO-YOUR-WEBCAM
The link to your webcam (IP or DynDNS)

http://ADDRESS-TO-YOUR-AJAX-LOADER-IMAGE/ajax-loader.gif
Address to a nice ajax-loader gif-animation

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


<script>
$(document).ready(function(){

$('#videoframe').click(function() {
$("#submit").click();
$('#videoframe').unbind('click');
$('#videoframe').removeClass('pointer');
$('#videoframe').attr("src","http://ADDRESS-TO-YOUR-EMPTY-GIF-FILE/empty.gif");
});

$("#loginform").submit( function () {
$("#webcamlogin").one('load', function() {
setInterval(function(){
var currentDate = new Date().getTime();
$('#videoframe').attr("src","http://ADDRESS-TO-YOUR-WEBCAM/snapshot.cgi?_="+currentDate);
},1000);
});
});

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

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

<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" />
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
setInterval(function(){
var currentDate = new Date().getTime();
$('#videoframe').attr("src","http://YOUR-URL-TO-THE-SERVER/snapshot.cgi?_="+currentDate);
},500)
// ]]></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.

Enjoy!

 

Comment if you need any help =)

Annonser

Kommentera

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

WordPress.com Logo

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

Twitter-bild

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

Facebook-foto

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

Google+ photo

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

Ansluter till %s