Displaying image from network camera..

[revRider]

Good Day..

Have been able to do this from a program, but not from a web page.

We are running a livecode server and have several network cameras. I'd like to open a page and load an image from each camera on to the page.

Tried a few variations, so far nothing.. but I know it works since I can do it from a web page.

--put url "binfile://192.168.0.227:80/goform/capture/capture.jpg" into image

--set the downloadedImage of me to specialFolderPath("Documents") & "/image.jpg"
--put url "http://192.168.0.227:80/goform/capture/capture.jpg" into url ("binfile:" & the downloadedImage of me)
--set the fileName of image 1 to the downloadedImage of me

--set the filename of image 1 to "http://10.200.220.227:80/goform/capture/capture.jpg"

Among the code options I've tried.. Spent most of the day attempting this.
Know it is easy, I am just dumb!
~David

[sturgis]

try:
put url "http://192.168.0.227:80/goform/capture/capture.jpg" into image "imagename"

By Need to use http to let livcode know its a web url. The other way it was looking for a file at the path of "192.168.0.227:80/goform/capture/capture.jpg"

If you want to do the download method, I noticed you used the "of me" form for some stuff. Is it possible that somewhere in there your context is changing so that "of me" points where you don't expect? If this is the case you might hard code it to point to a specific object. Also, you might look in your documents folder and see if the image.jpg file is appearing as its supposed to whether or not you can get it to appear in an image object.

I'm sure there are other things that could be going on, but you're definitely on the right track with this stuff. Minor adjustments and you'll get it all working.

[revRider]

Reports the following:

row 8, col 64: Chunk: no such object (imagename)
row 8, col 64: Chunk: can't find object to store into
row 8, col 1: put: can't set destination

For my web pages that I use runrev, normally I just "put" whatever it is that LiveCode server is displaying into the web stream. Seems to work fine.. Unsure what to do with an IMAGE.

~David

[sturgis]

Imagename is just my placeholder for whatever you have named your image object.
If you only have 1 image object on the card you can put it into image 1
Best option is to name your image object then:

Code: Select all

put URL "http://192.168.0.227:80/goform/capture/capture.jpg" into image "whateverYouNamedYOURImage"

Reports the following:

row 8, col 64: Chunk: no such object (imagename)
row 8, col 64: Chunk: can't find object to store into
row 8, col 1: put: can't set destination

For my web pages that I use runrev, normally I just "put" whatever it is that LiveCode server is displaying into the web stream. Seems to work fine.. Unsure what to do with an IMAGE.

~David

[sturgis]

Here is a very simple stack that loads an image from a URl typed into a field. If you paste the URL to your camera into the field and click the button it should load a frame so you can see how it works. All the code is in the button. (I don't check for invalid urls or anything like that, its just the very bare minimum)

https://dl.dropbox.com/u/11957935/loadImage.livecode

[revRider]

Ok, even more confused..

I'm trying to do this with on-rev/livecode server (we have our own server setup, but also host, some sites on on-rev)!

In the past most of my tasks were reading Arduinos, xbees, IPPower controllers, etc. All serial. And create active changing web pages depending on content, input and outside conditions.. These are read from the web page and displayed.

Thought it would be neat to rotate through images from our security cameras..

I've tried with a LiveCode program, but it slows down the server and other related issues.. Figure reading right out of the camera would be fastest. And it would only need to update when someone views the page.

~David

[sturgis]

Ah hah!
Livecode server is a different animal. Sorry for not grasping that part right away. For some reason I didn't see the word "server" in your initial post. DOH.

Ok, for a quick test I set up the most absolutely simple pages I could figure out.

I have 1 page that contains:

Code: Select all

<img src="/imageloader.lc?image=http://www.crystalinks.com/dragon.gif"> -- you would want to change the http: to point at your camera

imageloader.lc is an lcscript that takes an argument (named image) and grabs the image then sends the data of the image back to the calling page.

the code for imageloader.lc is here:

Code: Select all

<?lc
if $_GET["image"] is not empty then put URL $_GET["image"] -- checks to see if a URL was sent, if so then sends the image data from the url to the main page.
?>

Again, this is very simple, no error catching, not sure what security concerns (if any) there might be with this method, but it works fine.

If you don't want to use the secondary program you can just shove an image tag into your main page and point the source directly at your cameras.

<img src="http://address.of.your.camera/blah/image.jpg">

Of course you could do this with code, but it works out the same.

put "<img src=" & quote & "http://address.of.your.camera/blah/image.jpg" & quote & ">"

[revRider]

Very Cool..

Make sense..

Now another problem appears..

See attachment. Think the load takes place to fast (or to slow), misses/skips a lot of pixels. At least that is what I think the problem is.

Thanks for the help, this is great!
~David

Oh I am a supporter of the Open Source LiveCode... Would love to purchased the lifetime membership, but funds are low!

[sturgis]

Hmmm. I don't have a camera to test, and not sure whats up with it.

If you do the direct link to the camera rather than using a put with lc, does it work?
Does the camera manufacturer have any "embed" type code (IE if you look at it with a browser, do you just hit the URL for the image directly and it works, or do you open a page that then loads the image?) If the second, might check the source of the page and see what it looks like. I am kinda wondering if the camera sends additional info with the image that is causing problems.

As for too fast, it shouldn't matter. Like always if you are loading a web page, if there is a really large image you can see it loading. It takes as long as it takes, so I think there is something else going on.

Let me think about it, and maybe someone else with more experience with this stuff will chime in.

Oh, and you might revert back to the "save to a file, load to the screen" method.

Something like

put URL "http://path.to.my.camera/image.jpg" into URL "binfile:image1.jpg"

since I believe lc will load things sequentially rather than asynchronously you can:

put "<img src=" & quote & "image1.jpg" & quote & ">

Worth a try at least.

[revRider]

Here is the resulting code that works with the TrendNet TV-IP201W network camera. It will work with other cameras with modification.:

Code: Select all

<table width="100%"><tr><td align="center">
<?rev  
	put "192.168.0.227" into myIPAddress  
   	--put the time &&"-"&& the short date &&"-"&&myIPAddress && cr   
   	--put "<br>"
   	put "http://" into myURL
   	put myIPAddress after myURL
   	put ":80/goform/capture/capture.jpg" after myURL
	put URL myURL into URL "binfile:image1.jpg"
	put "<img src=" & quote & "image1.jpg" & quote & " width="&quote&320&quote&" height="&quote&240&quote&" >"
?>
	</td></tr></table>

For those interested!
~Daivd

[sturgis]

Thanks very much for posting this, I have a similar project coming up that will benefit from this.
Did you ever figure out the problem? Did you just have to specify the height and width of the image to get it to show up correctly?

[revRider]

Yes your idea of using the Bin file was a big help, that was the final 'issue' I was having with this part of the project.

The hard part was figuring out the image file's name and URL location in each camera. But using a browser that allows you to view the cameras page's source code it becomes a simple task. You might not get the name of the image file, but on a mac you can just drag the image to the desktop and the file name is shown.

We just wanted the images all about the same size of the EvoCam images on page we currently have setup. That is the only reason I added the height and width.. It isn't required.

This causes the page/image to update every 5 seconds. (html code):

Code: Select all

<html>
<title>Camera Viewer</title>
<meta http-equiv="refresh" content="5; URL=http://www.yourwebsite.com/camera.irev">