在javascript中渲染像视频一样的图像链 [英] Rendering a chain of images like a video in javascript
问题描述
我正在尝试使用JavaScript中的图像流来合成视频。
问题是视频要么生涩，要么通过使用各种缓冲区来解决。但是现在的问题是图像的实际下载速度远远快于它们的渲染速度。
I'm trying to synthesize a video using a stream of images in JavaScript. The problem is the "video" is either jerky, which was solved by using a buffer of sorts. However now the problem is that images are actually downloaded far faster than they are rendered.
如果您的图像来源发生了变化，就像IP摄像机一样，您可以试试以下示例。我注意到的是，视频仍然非常缓慢地更新，但是在观看数据包嗅探器时，我可以看到图像实际上被完全检索的速度远远快于渲染时的速度。
If you have a source of images that changes, like an IP camera you can try the example below. What I have noticed is that, the "video" still updates quite slowly, however while watching a packet sniffer I can see that the image is actually being fully retrieved far faster than it is being rendered.
以下是示例：
<HTML>
<HEAD>
<SCRIPT SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</SCRIPT>
<SCRIPT>
function startVideo()
{
//when the buffer image is loaded, put it in the display
$('#image-buffer').load(function()
{
var loadedImage = $(this).attr('src');
$('#image-displayed').attr('src', loadedImage);
$(this).attr('src',
'http://path.to/image.jpg?nocache=' + Math.random());
});
$('#image-buffer').attr('src',
'http://path.to/image.jpg?nocache=' + Math.random());
}
function stopVideo()
{
$('#image-buffer').unbind('load');
$('#image-buffer').attr('src', '');
$('#image-displayed').attr('src', '');
}
</SCRIPT>
</HEAD>
<BODY>
<BUTTON ONCLICK="startVideo();">Start Video</BUTTON><BR/>
<BUTTON ONCLICK="stopVideo();">Stop Video</BUTTON><BR/>
<IMG ID="image-displayed"/>
<IMG ID="image-buffer" STYLE="visibility: hidden;"/>
</BODY>
</HTML>
推荐答案
自己搜索解决方案。这是一篇很好的小文章，关于为IP摄像机外壳做一些非常方便的事情。
Searching for a solution myself. Here is a nice little article about doing something amazingly convenient for IP camera case.
http：// techslides.com/convert-images-to-video-with-javascript
还尝试加载图像条中的所有图像（CSS stuf）（假设不会有大量的图像）并隐藏所有但首先溢出：隐藏。然后使用setInterval更改图像宽度的图像条位置（基本上是一个非常快速的滑块，没有任何过渡动画）。在这种情况下，所有图像都已经加载和渲染，您可以控制每个帧之间的时间。
Also try loading all images in an image strip (CSS stuf) (assuming that there would not be a large amount of images) and hide all but first with overflow: hidden. Then change image strip position for the width of the image with setInterval (basically a very quick slider without any transition animations). In that case all images would be already loaded AND rendered and you can control timing between each "frame".
这篇关于在javascript中渲染像视频一样的图像链的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
