1

我创建了一个网页并在该页面上放置了一个 img 标签。img.src 是来自网络 IP 摄像机的图像的 url。它有效，但我得到的流有延迟。我知道这种延迟是因为我加载图像并且加载图像需要一些时间。我的问题是如何减少这些延迟。我执行以下操作；

<script language="Javascript">
    x = document.getElementById("stream");
    intervalID = setInterval(LoadImage, 0);

    function LoadImage()
    {
      x = document.getElementById("stream");
      x.src = "http://IP:PORT/jpg/image.jpg";
    }
</script>    

<img id="stream"     
    width="640" height="480" 
    alt="Press reload if no video displays" 
    border="0" style="cursor:crosshair; border:medium; border:thick" />

<button type="button" id="btnStartLive" onclick="onStartLiveBtnClick()">Start Live</button>
4

4 回答 4

0

我刚刚在未回答的部分找到了您的问题，并决定试一试。以下脚本创建一个内部<img>标签（带有new Image()），分配必要的属性，然后设置一个onload“事件处理程序”属性，该属性检查图像何时加载。调用该函数时，将#stream替换为新的内部图像标记。

如果#stream不在 body 标记内（即在另一个元素内，如 a <div>），请编辑streamParentElement以指向图像的父元素。

我在字符串中添加了一个?nocache查询参数，因为在测试代码时，我发现图像标签发生了变化，但可见图像保持不变。我还添加了一个loadDelay，因为我的客户端上的图像加载速度太快，以至于它使我的浏览器崩溃了。我建议你不要将该值降低到 50 以下。这里代码的现场演示

<script language="Javascript">
    var streamParentElement = document.body, loadDelay = 200;
    setTimeout(MakeImage,1);    

    function MakeImage(){
        var img = new Image();
        img.src = "http://IP:PORT/jpg/image.jpg?nocahce="+new Date().getTime()+Math.random();
        img.width = 640;
        img.height = 480;
        img.style.border = 0;
        img.style.cursor = 'crosshair';
        img.id = 'stream';
        img.onload = function(){
            var stream = document.getElementById("stream");
            streamParentElement.insertBefore(img,stream);
            stream.outerHTML = '';
            setTimeout(MakeImage, loadDelay);
        };
    }
</script>    

<img id="stream" alt="Press reload if no video displays" />
于 2014-08-04T23:03:04.423 回答
-2

创建您的 html 页面。例如：

<html>
<head>
    <title>
        Some Page
    </title>
    </link rel="stylesheet" href="path to your css file"/>
    <script type="text/javascript" src="path to you javasctipt file"></script>
</head>
<body>
    <h1 onClick="javascript:someFunction()">
        Click here
    </h1>
</body>
</html>

然后，您可以创建许多其他“someFunction”函数。他们都只是引用AJAX函数。这只是为了减少打字......

最简单的ajax方式：

var path;
var div;
var xmlhttp = new XMLHttpRequest();

function someFunction()
    {
        path = "path to another html file";
        div = "the name of the div tag's content you want to change eg. content";
        AJAX(path, div);
    }

function AJAX(path, div)
    {
        xmlhttp.open("GET", path, false);
        xmlhttp.send();
        if (xmlhttp.readyState == 4)
        {
            document.getElementById(div).innerHTML = xmlhttp.responseText;
        }
    }

现在只需将图像包含在 html 文件中。ajax 允许您只更改您给它的 div 的内容，而无需重新加载整个页面。

于 2013-01-16T13:35:15.717 回答
-2

我会尝试将您的图像放入 Photoshop 并使分辨率为 72 或更低。此外，如果您将图像保存为 GIF，它们应该小得多。

于 2013-01-16T15:25:21.917 回答
-2

也许在运行速度比网页刷新快的外部脚本中处理图像加载，然后嵌入它？像“videoloader.js”这样它可以单独加载，而不必等待 html 页面加载。

<script src="videoloader.js"></script>

您还可以使用 javascript 将即时显示的图像转换为质量较差的 jpg

看看这是否有帮助： 如果有更高的 inst 可用，则加载较低质量的图像

于 2014-06-16T19:07:39.910 回答