流局部mjpg视频到html画布 [英] Stream local mjpg video to html canvas

问题描述

我试图将一个m JPG视频的直播视频写入html画布。

I am trying to write a live stream of a mjpg video to an html canvas.

以下内容： http://camelive.info/ 有一个包含mjpeg视频的公开网络摄像头列表，但他们似乎正在写<

The following: http://camelive.info/ has a list of public webcams with mjpeg videos but they seem to be writing < frameset > tags with frame elements and I can't pick up how its working in a fiddle.

理想的解决方案有任何现场mjpg（理想的链接？）流媒体一个html画布在小提琴。

The ideal solution has any live mjpg (ideally a link?) streaming on an html canvas in fiddle.

任何有用的资源是赞赏，我想这样做不包括外部库（jquery允许）

Any helpful resources are appreciated, I would like to do this without including external libraries (jquery allowed)

编辑：相关：如何使用HTML中的MJPEG流创建快照

编辑：我也有一个本地mjpg从这个例子中绘制。解决方案可以使用本地流

I too have a local mjpg to draw from like the example. Solution can use local stream

推荐答案

根据 drawImage 的scripting.html＃image-sources-for-2d-rendering-contexts：canvasimagesource-3rel =nofollow方法

According to specs about the Canvas 2DRenderingContext drawImage method,

具体来说，当 CanvasImageSource 对象代表 HTMLImageElement ，用户代理必须使用动画的默认
图像（当动画不支持或被禁用时，格式定义的图像将被使用
），或者，如果有是没有
这样的图像，动画的第一帧，当渲染图像
为CanvasRenderingContext2D API。

Specifically, when a CanvasImageSource object represents an animated image in an HTMLImageElement, the user agent must use the default image of the animation (the one that the format defines is to be used when animation is not supported or is disabled), or, if there is no such image, the first frame of the animation, when rendering the image for CanvasRenderingContext2D APIs.

这适用于 .gif ，SMIL动画 .svg 和 .mjpeg 媒体。因此，一旦您提取了数据，只需要在画布上绘制一个框架。

This applies to .gif, SMIL animated .svg and .mjpeg media. So once you fetched the data, only one frame should be drawn onto the canvas.

请注意，chrome 有一个错误，只有尊重 .gif 图片，但他们可能会修复它有一天。

Note that chrome has a bug and only respect it for .gif images, but they may fix it someday.

您注意到自己的一个解决方案是使用clear-cache hack（'your.url /？'+ new Date（））获取另一个新帧。 getTime（）; ），但是你会失去mjpeg格式（部分帧内容）的任何优点，并且无法确定刷新是否会发生。

One solution as you noticed yourself, is to fetch an other fresh frame, with the clear-cache hack ('your.url/?' + new Date().getTime();) but you will loose any advantages of the mjpeg format (partial frame content) and can't be sure when the refreshing will happen.

因此，如果适用，更好的解决方案是使用视频格式。视频的每个帧都可以绘制到画布上。

So a better solution if applicable, would be to use a video format. Each frame of a video can be drawn to the canvas.

这篇关于流局部mjpg视频到html画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！