Click here to Skip to main content
15,867,999 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a IpCamera. C# program gets bitmaps from the IpCam. How can I stream these images continuously to HMTL5 (display as video) page.

How can I convert live images to mpeg stream? is there any library available?

Or how can I request for the stream from HTML5/javascript?
Please give me a suggestion.
Posted
Updated 7-May-14 7:09am
v2

You do this by writing an entire media server. This is not code you put into your website code.

"How to write a media server"[^]
 
Share this answer
 
Comments
Kornfeld Eliyahu Peter 7-May-14 10:00am    
And HTML5 video tag will not part of it, probably...
manyareddy 7-May-14 13:10pm    
I would like to render the images in Img tag
Dave Kreskowiak 7-May-14 13:59pm    
...and?

What tag you use in the browser has nothing to do with what it going to serve up the content on the server side.
manyareddy 7-May-14 13:11pm    
Are there any tutorials or examples available about how to write a media server? Would be grea thanks..
Dave Kreskowiak 7-May-14 13:59pm    
Just the links I already gave you!

This is NOT a simple thing to write. You would be much better off using an "off-the-shelf" product. Just Google for "Streaming Media Server" and start evaluating them.
You need to convert them to .jpg and save each one to a file of the exact same name in a folder that's accessible from your website. This way, when your c# application is running, navigating to http://www.yourwebsite.com/yourVideo.jpg will be the current "frame" each time you refresh it.

Then you need to write some javascript that updates the image every 100ms or so. Doing it that way, you'll get about 10fps.

That's how I've done it in the past, just using a back end application and nothing but an image file and javascript in the browser. If you want better performance, you'll need to write a plugin (maybe a java applet) for your browser.

-Pete
 
Share this answer
 
v2
Comments
manyareddy 8-May-14 4:28am    
Thanks for the comment.. I have already tried this..
But I need 25fps.. +
And dont want to write image to disk, it is slowing down the perofrmance.

I am using HTML5 how can I write a plugin which gets data from from C#? any streaming examples or ideas?
pdoxtader 8-May-14 9:21am    
Does your client need to be a browser? And how large is each frame? If they are 600k or less, then writing to the disk isn't your bottleneck. Writing 600k jpegs to disk 30 times a second only amounts to 18MB/sec of disk bandwidth.

And if your trying to send "frames" larger then that, you need to rethink this whole thing... a video stream that uses up 18MB / sec of network bandwidth is not really viable for most end users anyway.
manyareddy 8-May-14 9:32am    
Thanks for the comment.. Yes, my client need to be a browser.. by the way How did you do the refresh to get the new image (with the same name)... When I am doing it is not refreshing... Below is my refresh procedure:
function reloadCam() {
var imgTag = document.getElementById("image_");
var fetchInterval = 40;

if( imgTag != null) {
imgTag.src = imgTag.name;//? + new Date().getTime();// + "?t=" + Math.Random();
setTimeout("reloadCam();", fetchInterval);
}
}

This how I am calliing
<img id="image_"
name="http://localhost/IpCamVideo/1.jpg"
src= "http://localhost/IpCamVideo/1.jpg"
alt="Getting live video"
border="0"
width="618"
height="348"
>
<script type="text/javascript">
reloadCam();
//setTimeout("reloadPage();", 19623);
</script>
pdoxtader 8-May-14 9:57am    
Your on the right track. Do you realize that you have the new Date(),getTime(); commented out? If you aren't getting updated, and that's the way your code actually is, then it's because of browser caching. That line should look something like:

imgTag.src = imgTag.name + "?date=" + new Date().getTime();

I wouldn't use Math.Random(). You don't need it.
manyareddy 8-May-14 10:55am    
Thanks for the correction. But still it is not smooth :)<br>
any other suggestions?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900