How to add a webcam or livestream to your Freeway Pro website

Author: Bart de Vreede
Last update: 03-05-2013

 

Some people like to have a livestream on their website. For example to show a nice location or weather conditions in a holiday resort. In Freeway Pro you have this possibility, but you need some extra software to capture the images or video from your iSight and put this on your webserver.

I have searched for a lot of programs (Freeware and Commercial) but until now my personal opinion is that EvoCam from Evological is still the best there is. Unfortunately this software is not free, but the great things is that it is really affordable and you can download a fully functional trial version for 15 days.

This article is not how to do all the special settings in EvoCam, but just how to do the basic set up in EvoCam and make it work with Freeway Pro.

If you downloaded the trial version or bought the program, go ahead and launch it.

 

Go to the root of your website hosting and add a folder called EVO (you can use any name, but this one is used for this article).

Go to EvoCam, Preferences and FTP Server. Unfortunately I can not help you with the exact settings for your webhosting, but make sure the (absolute) path is directing to the EVO folder in the root of your website.

 

 

In my case I want Evocam to start recording and uploading images to the server when I launch the program. Check the settings in the next screenshot that will upload one picture called webcam.jpg every 5 seconds to the folder EVO on my web server as long as the program is active.

 

 

Now the last thing you should do is make sure Freeway Pro shows these images where you want them to show. To do this, go to Insert, Markup Element and paste the following code below into this dialog.

 

<IMG SRC="http://www.yourdomain.com/EVO/webcam.jpg" id="webcamimage">
<BR>
<SMALL>
Powered by <A HREF="http://www.evological.com/evocam.html">EvoCam</A>
</SMALL>

</p>

<script language="javascript">
<!--
var myImage = document.getElementById("webcamimage");
if(myImage){
var origImgSrc = myImage.src;
}

function refreshImage(refreshrate){
if(myImage){
var millisecs = new Date().getMilliseconds();
myImage.src=origImgSrc+"?"+millisecs;
setTimeout("refreshImage("+refreshrate+")", refreshrate*1000);
}
}
window.onload = refreshImage(10);
-->
</script>

 

(Special thanks to Tim Plumb from Freewayactions.com for helping out with the Javasvript code)

 

In the line set Timeout("refreshImage("+refreshrate+")", refreshrate*1000);}} window.onload = refreshImage(10); you can fill in any number. This number will force your browser to refresh every number of seconds you fill in here. Advise is to fill in the same number you filled in in EvoCam. It has no use to fill in a higher number since your webcam is refreshing at the same rate.

In <IMG SRC="http://www.yourdomain.com/EVO/webcam.jpg" id="webcamimage"> fill in your own domain where you see yourdomain.com.

If you did all this, click OK and you should be finished. Preview in Freeway Pro should already show images, but if not publish your website and check it online.

Below is an an example of my stream. Please note that this is just for testing purposes and to make this article, so this one is not online very often.

 

Powered by EvoCam

 

 

>> click here to go back to the homepage

Article tags: Freeway Pro, livestream, webcast, streaming, webcam, broadcast, EvoCam, Evological, OSX, Javascript, tutorlal, how to

 

 

---