Question

我有一台服务器（ AWS实例），每隔10毫秒吐出一个图像文件test.png。

我在服务器上也有一个名为index.html的网页。在index.html中，我有一个src="test.png"。

的图片代码

现在，我想要做的是每隔10ms刷新一次图像（test.png）。我知道我可以通过多种方式做到这一点：

使用JS重新加载页面（location.reload();）
使用JS更新src属性（setInterval(refresh(),10); //with timestamp以强制执行浏览器重新加载 - 而不是缓存）
使用JS和Ajax点击服务器以获取图片网址使用HTML元标记<meta http-equiv="refresh" content="5" />
等...

这些方法的问题在于：

A）如果刷新时间小于250毫秒，则图像不会更新

B）图像闪烁

问题： 我怎样才能使图像每10毫秒刷新一次（或者更少！更快更好......），没有闪烁？寻找一些想法。

修改

我已经尝试过使用setTimeout，正如@tripleb所建议的那样，但是没有区别，我可以告诉你。

function refresh(){
   //update src attribute with a cache buster query
   setTimeout("refresh();",10)
}

refresh();

Answer 1

第二种方法可能是您使用setInterval的最佳问题，这不是一个好方法，因为它总是在前一次调用准备就绪时执行忽略。这可能就是为什么对于小型超时而言只是“锁定”＃34;试试

function refresh(){
   //update src attribute with a cache buster query
   setTimeout("refresh();",10)
}
refresh();

重复功能在第一次完成之前不会开始新的刷新。

P.S。任何现实世界的应用程序都可能需要10毫秒才能加快速度

更新：10密耳是快速浏览器渲染的方法，但是你只需通过这样做就可以让浏览器尽可能快地更新： http://jsfiddle.net/zdws1mxv/

Answer 2

如何将随机Math.random()指向url的末尾并使用setInterval每隔10ms再次调用并替换一个新的随机图像，10ms的速度非常快。就像他们上面说的那样我不确定这个的目的。

实施例

<强> HTML

<img src="http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg" id="myImage" />

<强> JS

var myImageElement = document.getElementById('myImage');
myImageElement.src = 'http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg?rand=' + Math.random();

setInterval(function() {
    var myImageElement = document.getElementById('myImage');
    myImageElement.src = 'http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg?rand=' + Math.random();
    console.log(myImageElement);
}, 10);

小提琴 - https://jsfiddle.net/ToreanJoel/11fk17ck/1/

事实上，4毫秒是由HTML5规范指定的，并且在2010年及之后发布的浏览器中是一致的。在（Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2）之前，嵌套超时的最小超时值为10毫秒。

希望这有助于某人

Answer 3

使用jquery的setInterval（）方法添加时间间隔。它需要以毫秒为单位的间隔作为参数。

Answer 4

流媒体怎么样？您可以使用node.js通过Web套接字将图像数据推送到客户端。

Answer 5

正如评论中所讨论的，10ms（1/100秒）对于您尝试使用的机制来说有点快。考虑全动态视频通常为每秒30帧（每秒100帧将是高速视频播放，而不是仅通过推送图像请求就可以支持浏览器）。

因为听起来你想要实现的是流视频，我可以推荐以下内容：

流式视频源：https://obsproject.com/开放式广播项目 - 您可以使用此平台提供的各种方法来制作视频流。你可以使用它生成一个rtmp流。

Nginx Web服务器：https://www.nginx.com/resources/wiki/ - 非常好地处理rtmp流。

Flowplayer：http://flash.flowplayer.org/plugins/streaming/rtmp.html - 我们将它放在nginx框中，并将其嵌入到从那里提供的网页中。

每隔x毫秒在浏览器中刷新一次图像

5 个答案: