I have a snippet of javascript that is used to pull a series of jpg's from a webcam that is inside our network. Right now it's being reverse-proxied through Apache2 and embedded in our website.
The thing is that to keep the display from "freezing" with timeouts I've had to adjust 开发者_JAVA技巧the consultant's snippet to 2 seconds. Someone suggested that it would be possible to cache some of the data better and speed it up with the proper javascript coding.
What I have now is:
<center>
<img id="video" src="../../img/unconnected.jpg" alt="video" height="480" width="640" />
</center>
<script type="text/javascript">// <![CDATA[
var sourceImage = "http://www.ourwebsite.com/video/link/image.cgi?v=jpg:640x480&seq=1";
function show() {
document.getElementById("video").src = sourceImage + Math.random();
setTimeout(show, 2000);
}
show();
// ]]></script>
Is there a way to do this?
It's not gorgeous but it takes care of the by-the-time-an-image-arrives-it's-expired problem.
Bonus points for writing an adaptive algorithm that adjusts the timing so that each image is fetched in advance but arrives a short while before it expires ;)
sourceImage = "http://www.yourwebsite.com/video/image.cgi?v=jpg:640x480&seq=1";
function show() {
document.getElementById("video").src = sourceImage + Math.random();
}
document.getElementById("video").onload = show;
document.getElementById("video").onerror = show;
show();
精彩评论