渲染一连串的图像,如javascript中的视频

我正在使用 JavaScript中的图像流合成视频.
问题是“视频”是干脆的,这是通过使用缓冲区来解决的.然而,现在的问题是,图像实际上的下载速度远远快于渲染图像.

如果您有更改的图像来源,如IP摄像机,您可以尝试下面的示例.我注意到的是,“视频”仍然相对缓慢地更新,但是在观看数据包嗅探器时,我可以看到图像实际上被完全恢复的速度远远快于渲染的速度.

这是例子：

<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摄像机案例的东西.

http://techslides.com/convert-images-to-video-with-javascript

还要尝试加载图像条(CSS stuf)中的所有图像(假设不会有大量图像),并首先使用overflow：hidden隐藏所有图像.然后使用setInterval更改图像宽度的图像位置(基本上是非常快的滑块,不需要任何过渡动画).在这种情况下,所有图像都将被加载并呈现,您可以控制每个“帧”之间的时序.

渲染一连串的图像,如javascript中的视频

解决方法

相关文章