网络摄像头图像刷新与阿贾克斯 [英] webcam image refresh with ajax
问题描述
我有一个正在不断地从一个本地网络摄像头资源更新的图像,然后在网站上显示。我能得到的图像显示和刷新页面的图像将更新(明显)。
I have an image that is being constantly updated from a local webcam source, it is then displayed on a website. I can get the image to show and by refreshing the page the image will update (obviously).
我想知道的是,我怎么可以更新这个图像中的每个(可以说)5秒,而无需手动刷新页面(即利用AJAX)。
What I am wondering is, how can I update this image every (lets say) 5 seconds, without having to refresh the page manually (ie. utilizing ajax).
基本的东西我不是太肯定:
Basic things I am not too sure about:
-
< IMG SRC =/>
< ---我怎么能加载图像的URL位于的JavaScript $ C $内ç
<img src=""/>
<--- how can I load an image url that is located within the javascript code
在JavaScript code,我怎么可以创建一个自动更新的图像源,而无需重新加载页面的函数
within the javascript code, how can I create a function that will automatically update the image source, without having to reload the page
据我了解,在阅读各地的主要问题之一是,浏览器会加载缓存图像,除非得到的HTT prequest每次看起来不一样,因此我是否需要内增加一个额外的项目URL字符串为了规避这个可怕的浏览器predisposition(即www.yoursire.com?image=foo&date=bar(该日期由日期函数或其他迭代值)抢下)?
As I understand it, upon reading around, one of the main problems is that browsers will load the cached image unless the resulting httprequest looks different each time, as such am I required to add an additional item within the url string (ie. www.yoursire.com?image=foo&date=bar (the date is grabbed by date function or some other iterated value)) in order to circumvent this horrible browser predisposition?
在此先感谢!
推荐答案
无需编写的所有的的code
Without writing all the code
-
看JavaScript函数
的setTimeout()
和的setInterval()
可以很容易地改变全日空元素的src属性
it's easy to change the src attribute of ana element
document.getElementbyId("imageId").setAttribute("src", imageUrl);
如果您的图像请求的URL是相同的,每次(但PIC已经改变服务器端),您可以添加一个无缓存Ajax请求头,也可能是随机的查询字符串添加到像每次强制重新加载(如的http:// MYDOMAIN / MYIMAGE 3754854 )
这篇关于网络摄像头图像刷新与阿贾克斯的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!