My daughter, Marji adopted a dog she named Maggie. Being concerned about her she needs to monitor Maggie when she is out working. To help Marji from worrying I installed an IP Camera (webcam) so that she can monitor Maggie at anytime. She also wanted her friends to view the video stream via her blog.
To anyone who desires to have their video stream on their blog, here are the steps:
1. Go to your blog site (you must be the administrator)
2. On the upper right corner, click on DESIGN
3. On the left hand, select LAYOUT.
4. You will see your layout. Click on ADD A GADGET.
5. A pop-up will appear, select HTML/JAVASCRIPT
6. Add the title of your gadget, e.g. "My Bathroom" (just kidding!)
7. On the body, enter the following Javascript -
_________________________________________________
<script type="text/javascript">
var videoFrameCount = 2;
var refreshRate = 250;
function load_video()
{
setTimeout("reload_image()",refreshRate);
}
function reload_image()
{
var xx = new Image();
xx.src = "http://YOUR_URL:YOUR_PORT/snapshot.cgi?user=YOUR_NAME&pwd=YOUR_PASSWORD&next_url="+videoFrameCount;
document.getElementById("imgDisplay").src = xx.src;
videoFrameCount++;
}
function video_error()
{
setTimeout("reload_image()",refreshRate);
}
function video_error_clear()
{
setTimeout("reload_image()",refreshRate);
}
</script>
<p> <img onerror="video_error()" id="imgDisplay" onload="load_video()" name="imgDisplay" src="http://YOUR_URL:YOUR_PORT/snapshot.cgi?user=YOUR_NAME&pwd=YOUR_PASSWORD&next_url=1" width="300" height="220" /> </p>
________________________________________________
8. Replace these items with your data:
YOUR_URL:YOUR_PORT with your own URL.
YOUR_NAME - the camera's admin username
YOUR_PASSWORD - your password.
9. Save your gadget.
10. On the layout mode, drag your new gadget where you want
to place the camera view.
11. Save your arrangement.
12. Preview, if not satisfied go back to step 10. That is it!
This project presumes that you know how to set up your webcam, url, port forwarding, etc.
Good luck!
