Streaming JPG images

[3RDIGLBL 0]

Figured this would be a good place to post this one.

 

I got an event I want to stream JPG images for the world to see. Camera does not have a built in FTP feature ACTi TCM7811 and I am running exacq which also does not have an ftp feature.

 

I worked out the ftp issue by finding a third party app that can take a snap shot of the locally streaming camera and upload an ftp image every x amount of seconds.

 

Now the issue at hand......

 

The streaming of images on the users PC is dependant on a small script that simply displays the jpg image every x seconds. Every person going to view the camera image will have a different time of displaying the image. Problem is every few images the window is blank because the image trying to be displayed is being over written by a new image at the time it is trying to display it.

 

We can not find a better way of streaming the image to a hosting server. I do not want 100's of users trying to stream it from my office PC as it will choke to death. Best approach is to have the image pushed up to the hosting company and people can stream the jpg from there.

 

Not sure if the issue is understood but I'm sure there are many knowledgable folks here that have done this time and again. I basically do not want a max user limit hit because people are accessing the camera directly and I don't want my network bogged to it's knees because everyone is accessing my business computer.

 

Ideas? Solution? I would love to hear how I could get around this or maybe someone has a script they would not mind sharing to reliably stream a jpg images.

 

Thanks So Much.

[thewireguys 3]

I would think you would be able to use Exacq's webserver to do this.

[3RDIGLBL 0]

I would think you would be able to use Exacq's webserver to do this.

 

 

Believe it or not. I had exacq working on this for the past few days. eventually they said the server was not meant to do this in the first place but are still trying to help.

 

I was able to get a PHP script made that can pull the stream displayed in the simple view. Issue is for every user requesting the stream it will create a new link back to my server for the stream. I have time warner here and not a commercial service than handle a load of hundreds of stream connections.

 

Need a way of doing this at the hosting server level I think so it is pulling the image somehow but it would still have to refresh the image and I think we would still run into the same problem.

[thewireguys 3]

So Exacq says there is no way to have the hosting system pull the images from Exacq webserver?

[rory 0]

You need the script to check the image to see if it exists before refreshing the old one. Video Insight might be able to help also as their server has this all built in - so does axis - both work without getting the dreaded blank image on the refresh.

[3RDIGLBL 0]

So Exacq says there is no way to have the hosting system pull the images from Exacq webserver?

 

No. They said it can be done that way. I have no idea how to get that done when the server is located someplace else and I don't have much control over it. Not sure how to get a hosted server to do this.

[3RDIGLBL 0]

You need the script to check the image to see if it exists before refreshing the old one. Video Insight might be able to help also as their server has this all built in - so does axis - both work without getting the dreaded blank image on the refresh.

 

Ya and this is the issue. There are times when half the image loads on the screen because it started being over written half way through being displayed.

 

It's not easy to get to the camera and it needs to be running tomorrow so changing nvr at this point may be difficult. Need to figure something else with what I have available.

[ak357 0]

Ideas? Solution? I would love to hear how I could get around this or maybe someone has a script they would not mind sharing to reliably stream a jpg images.

 

Hmm check this out

 

http://www.justin.tv/

[3RDIGLBL 0]

Ideas? Solution? I would love to hear how I could get around this or maybe someone has a script they would not mind sharing to reliably stream a jpg images.

 

Hmm check this out

 

http://www.justin.tv/

 

Ya thought of that one and also of ustream.tv but they're full of advertising junk and not what we wanted to show. Thx for the idea.

 

I'm still searching for a solution, if not for this project then for a long term solution.

[musher 0]

Use two images. Alternate writing one then the other. Use the alternate one for display.

Use a flag to indicate which one is live at any point for display

[Soundy 1]

Single images really aren't that big, I wouldn't think you'd get that hard a server hit just feeding them directly. Up the compression level a titch and don't worry about it. Pretty much all the images I embed in websites, I host on my own little home webserver on my residential cable connection, including those for a site with over 35,000 members... never been a problem.

 

If the "blank" problem is because uploading the images by FTP is too slow, try using a script on the webserver that will "pull" the images from your source, then copy them locally to the embedded location - that should be nearly instantaneous.

[3RDIGLBL 0]

Use two images. Alternate writing one then the other. Use the alternate one for display.

Use a flag to indicate which one is live at any point for display

 

Tried this as well. Issue is each user access the stream at difference times so that means that the javascript executes at different times on each users PC. The file being viewed by one may not be the same file being viewed by the other.

 

Issue sounds easy but it seems to become much more complicated than thought.

 

BTW: Your nic is Musher so I'm curious if you travel around participating in mushing events? We have a large one here every year and it's coming up in a month from now with participants from all over the world. There is a 30 mile, 60 mile and 250 mile course. We want to use the camera for this event also.

[3RDIGLBL 0]

Single images really aren't that big, I wouldn't think you'd get that hard a server hit just feeding them directly. Up the compression level a titch and don't worry about it. Pretty much all the images I embed in websites, I host on my own little home webserver on my residential cable connection, including those for a site with over 35,000 members... never been a problem.

 

If the "blank" problem is because uploading the images by FTP is too slow, try using a script on the webserver that will "pull" the images from your source, then copy them locally to the embedded location - that should be nearly instantaneous.

 

 

Hey Soundy, ultimately everyone would like to see a stream but we don't think we can handle the throughput. We had a company here trying to stream an event a couple years back and the amount of hits on there server choked the site so bad it was unusable. We are trying to prevent that from happening.

 

We were able to pull a stream out of our exacq server and have that stream viewable. But each user would require there own stream from our server and we can't have that.

 

If you feel if we done it a better way then we should not have an issue I would really like to speak with you. Sending you a PM.

[Soundy 1]

I don't know about a live stream, I'm just talking about single images... as you say, updating "every x seconds". Bandwidth requirements should really be minimal - this 1.3MP still from an IQ camera, for example, is only a bit over 200k, so hosting it off my own server isn't a big hit - remember, it's not a constant stream; once someone views it, that's it for data requirements unless they're sitting there hammering on the refresh button.

 

It sounds like you're trying to do something similar to what the BC MOH does with their highway webcams - in that case, the images displayed update once every 120s. Check out the webcam section at www.drivebc.ca. Granted, those pics are a lot smaller, but I don't know that any of the cameras are megapixel anyway, and they probably see a lot more traffic (pun intended) than your purpose would.

[rory 0]

he wants jpeg refresh like with Axis and Video Insight. Not as easy as one thinks as its more like refresh every 500 milliseconds. Every 10 or so image you can get a blank image as the image is being updated on the server. Slow down the refresh then will be less, but will still get blank images. Basically you will need to do the processing on the server side as you need direct access to the files. You use javascript on the client side to refresh the server side script.

[3RDIGLBL 0]

he wants jpeg refresh like with Axis and Video Insight. Not as easy as one thinks as its more like refresh every 500 milliseconds. Every 10 or so image you can get a blank image as the image is being updated on the server. Slow down the refresh then will be less, but will still get blank images. Basically you will need to do the processing on the server side as you need direct access to the files. You use javascript on the client side to refresh the server side script.

 

Because of the time of this. I can't change anything and will just have to write this one off as an experiment of sorts but in a few weeks we have another big event coming about and I would really like to get this working smoother.

 

How does the Axis one work? Sounds like it is through there server software or is it done at the camera level. A client javascript would have to call back to the server to refresh the image? How is this handled with 100's of users logged in at the same time. All these queries back to the server will just hammer it on my Time Warner connection.

 

My images are 640x480 streamed and the image run around 40k.

[rory 0]

Yeah thats going to hammer it a bit.

Other option is to move away from streaming and go for more of a refresh, like using basic META refresh instead, and not ever 500ms or 1 sec even, more like every few seconds.

 

Lets see .. another route.

You said you didnt want ads right, like on Justin.tv?

But you could always embed that into another webpage like on your own site.

Actually easy to do with livestream.com

eg. shows a static image for demo purposes but the real thing would look identical

http://dabigw.com/realting

You could get rid of the chat and the video library also as they are each individual embeds.

[rory 0]

Another thing you could look at ..

http://code.google.com/p/red5/

 

then can use a player like the jwplayer embedded into your webpage to connect to it

see my signature for example embed of the player (not live stream)

 

or use a paid streaming server:

http://www.highwinds.com/cdn/live-streaming.php

[Soundy 1]

Okay, I'm a little confused... are you looking to actually stream near-realtime images or video, or looking for high FPS, or is more sporadic updating (even every 10-20s) sufficient?

 

I don't know about the other cameras you're using, but embedding a single JPG into a webpage would be dead simple with an IQ camera: within the page framework, you just include the link to the camera's URL, then have it refresh the page on a regular basis (like using a META command, as Rory suggests, or perhaps with some javascript). With the IQs, there are a number of parameters you can add to alter the image (size, etc.). As long as your web host can handle the traffic, all your camera uplink has to deal with is the timed requests from the web host.

 

I can't imagine it would be that much more difficult with the Axis camera.

[rory 0]

axis gives alot of options from jpeg to mjpeg to activeX to quicktime ... etc

 

here is sample link for their mjpeg stream: (change youraxisip to your axis IP )

http://youraxisip/axis-cgi/mjpg/video.cgi?camera=&resolution=320x240&compression=80

 

and a sample of their server push:

http://youraxisip/cgi-bin/push.html

[musher 0]

Sorry 3RDIGLBL, I didn't make what I meant clear.

 

Your client side javascript will call a php script. Same script for all clients

 

That script will return a jpeg to the client. You do the logic in the php script to decide what file to use/return.

pseudocode would look something like this:

getcurrentimage.php

<?php

include_once("flagmon.php");

$fileDir = '/path/to/files/';

 

if (isset($imageflag) && $imageflag==1){

$file = $_GET['file1.jpg'];

} else {

$file = $_GET['file2.jpg'];

}

 

if (file_exists($fileDir . $file))

{

// Note: You should probably do some more checks

// on the filetype, size, etc.

$contents = file_get_contents($fileDir . $file);

 

// Note: You should probably implement some kind

// of check on filetype

header('Content-type: image/jpeg');

 

echo $contents;

}

 

?>

 

Your script to capture the streaming will

1. include flagmon.php

2. if $imageflag=1 then you write the new image to file2.jpg,

otherwise write the new image to file1.jpg

3 now overwrite the php file flagmon.php with a new version that flips the value of the imageflag

 

You could alternately just write an empty file called imageflag.jpg and test for its existence. If it's there do one thing, if it's not do the other. Delete the file every other image loaded from the stream and recreate it on the other events.

 

Different users may well be out of sync by 1 image for 1 refresh depending on how timing works out, but you won't be able to tell unless you run them side by side, so I'm not sure it matters.

 

Ran dogs for about 10 years, recreationally. Did one race and spent the whole weekend thinking about how I could be up in the mountains camping instead, so I didn't do it any more. Got out of dogs a few years ago.

[rory 0]

Here is demo code for Server push .. no more blank images.

http://www.howtocreate.co.uk/php/serverpushdemo.php

[3RDIGLBL 0]

Thanks A ton guys. I have a lot to digest here and it's all awesome.

 

Right now the image being played back alternates between 10 images starting at image 1 when you request the page. We have reduced some of the issues with empty images but they still do happen.

 

With the information you have provided we have a lot to digest to see if we can make the next webcam project more successful. Hopefully we can get the server push or mushers idea of the 2 alternating images working more successfully.

[3RDIGLBL 0]

Our event went well this past weekend and folks loved the cam. Moving forward I gotta do something different as there are too many things that could go wrong.

 

Maybe use an axis camera which seems friendlier with this type of project.

 

I've read many of the solutions online with doing this with axis. It appears the is a max of 20 concurrent users if doing a server push method. If people sit on there PC during many of the events we have here locally we could easily go over that. In the 4 days we had the camera up we had over 5500 views.

 

I still think the best way for this would be to FTP direct from the camera to the webserver. Next issue will be the current issue. A periodic blanking of the JPG image every so often.

 

Is there a way to seemlessy refresh the image like when you pull direct from the camera? Pulling from the camera is clean and a refresh is clean with no flash in the image during a refresh. There is a flash in the image when doing the script based jpg refresh (ie...deletes the old image and refreshes with a new one).

 

Not sure if there is a way to cache the existing image at the client level before the refresh takes place in order to elliminate that brief flash.

[rory 0]

If you cache it then it probably wont ever show the updated image without a manual page refresh.