0

I've created a C# program which captures the screen as a Jpeg image and saves it to a file. Then using HTML5's Canvas, I'm using this code to pull in the image and display it, updating every 8 milliseconds so it looks like a video.

<html>
    <head>
        <script type="application/javascript">
            function draw() {
                var c=document.getElementById("myCanvas");
                var cxt=c.getContext("2d");
                var img=new Image();
                img.src="C://wamp/www/test.jpg?" + new Date().getTime();

                img.onload = function() {
                    cxt.drawImage(img, 0, 0);
                };
            }

            function start() {
                setInterval("draw()",15);
            }
        </script>
    </head>
    <body onLoad="start()">
        <canvas id="myCanvas" width="1024" height="720"></canvas>
    </body>
</html>

Doing this locally gives a good picture (a bit choppy, but still good) but doing it over the internet is useless. Is there a way to stream the image straight from the C# program instead of using a file? Would that update it quick enough for a good picture? Or shall I compress the image in the C# program? Just looking for any pointers of how to make this work. Thanks for the help! :)

1 Answer 1

1

If you can manage to code the delivery-method, it shouldn't be any worse than attaching a html5-video element to a endpoint in your app :)

But it might involve transcoding jpeg-images to h264 on the fly ;)

Sign up to request clarification or add additional context in comments.

5 Comments

Thanks Christian! Looking at it though I don't think M-JPEG would work because I want to also capture input from the user. Is it possible to compress jpg images and then decompress for displaying on the canvas?
Maybe "compressing" is the wrong word to use, as they are already compressed, right? Is there any way to make them smaller in kb?
Are you trying to make a HTML5-canvas remote desktop?
Yeah, exactly like that but for a game. So the game is running on the PC while a laptop can view and control it. This is what I've done so far: tehwebz.com/stream/streamTest.php I can lower the quality of the images so that it runs smoother, but doing that makes it pointless. Could I use a compressing algorithm to make it work better? Or am I going about it all wrong? Thanks for the help. :)
By lowering the quality, I mean compressing the images more. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.