Click here to Skip to main content
13,347,462 members (52,149 online)
Rate this:
 
Please Sign up or sign in to vote.
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 7-May-14 3:33am
Updated 7-May-14 8:09am
v2
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

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"[^]
  Permalink  
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.
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

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
  Permalink  
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?
pdoxtader 8-May-14 11:07am
   
It's not smooth because sometimes your browser is trying to read the image while your c# application is writing it. You need to get some kind of synchronization going.

For starters, you can minimize this by writing each new frame from c# every 100 ms, and READING it in the browser every 50ms. It still won't be smooth, but it'll be better. The best way to do this is to ASK for a new frame every 100 ms via xmlhttprequest. Only respond to the xmlhttprequest when the new image is completely written, and only update your img when xmlhttprequest returns.
manyareddy 8-May-14 11:23am
   
Thanks for the tip.. I will try this
pdoxtader 9-May-14 7:15am
   
Have a look at the async usage on this page:

http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy |
Web01 | 2.8.180111.1 | Last Updated 7 May 2014
Copyright © CodeProject, 1999-2018
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100