Hey all!
Having the news that Phi's MJPEG streaming is halfway-working, I developed this HTML5 "Screenshot streamer" for everyone to have fun with!
Working principle
When loaded, this will make a request to the Mongoose screenshot handler, OVER AND OVER. Images will be displayed ON TOP of the other, giving a movie illusion.
Installation
-copy the following code into a new html file. ex: Anim.htm
-place this in the Phi folder
-Start up FG AND MONGOOSE(httpd),and access the page. ex: localhost:3437/Anim.htm(This works )
Caveats
Resize the window to get Fullscreen!
Tested in Chrome only!
Code
<!doctype html5>
<style>
#cvShot:{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
}
</style>
<canvas id="cvShot" />
<script>
var cvshot = document.getElementById('cvShot').getContext('2d');
var cvEle = document.getElementById('cvShot');
var shotImg = new Image();
function DrawShot(){
cvshot.drawImage(shotImg, 0, 0);
shotImg.src = '/screenshot?' + Math.random();
};
shotImg.addEventListener('load' ,DrawShot ,false);
shotImg.src = '/screenshot';
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
cvEle.width = window.innerWidth;
cvEle.height = window.innerHeight;
}
</script>