html5播放http流,使用html5在浏览器中可视化mjpeg-over-http流(Visualize mjpeg-over-http streams in browser with html5...

使用html5在浏览器中可视化mjpeg-over-http流(Visualize mjpeg-over-http streams in browser with html5)

好吧，我有一台服务器通过http提供motion-jpeg流。 我希望能够做到的是连接到服务器，并在浏览器中可视化流，最好在canvas元素内部。 浏览器应该是Safari Mobile。

是否有可能使用XMLHttpRequest获取流，将单个JPEG图像取出并放入canvas元素中？ 请记住，该流是活的，因此可能是无限的。

Alright, I have a server that serves a motion-jpeg stream over http. What I would like to be able to do is connect to the server and visualize the stream in a browser, preferibly inside a canvas element. Browser should be Safari Mobile.

Is it possible to take the stream with XMLHttpRequest, take the single JPEG images out and put them within a canvas element? Keep in mind that the stream is live, thus possibly endless.

原文：https://stackoverflow.com/questions/9586769

更新时间：2019-11-28 18:50

最满意答案

iOs移动Safari通过http本地支持MJPEG。 在Canvas中是否有特定的原因需要它？ 在ipad / iphone上查看http://bridgecam2.halton.gov.uk/mjpg/video.mjpg?camera=1

iOs mobile Safari supports MJPEG natively over http. Is there specific reason you need it in Canvas? see http://bridgecam2.halton.gov.uk/mjpg/video.mjpg?camera=1 on a ipad/iphone

相关问答

HTML5是一种新兴标准 。 这意味着有一个标准组织正在开发它，而且现在正在构建的东西，而不必咨询或倾听标准组织。 HTML5由许多新技术组成，其中一些技术受到某些浏览器的支持，另一些则不支持。 其结果是主要浏览器支持标准的不同部分，并以不同方式支持不同的解决方案。 实际上，这是一种泥潭，但人们仍然在使用它，因为各种技术正在慢慢地跨浏览器融合，并且因为它允许你做新的和令人敬畏的事情。 例如，捷克这个页面，它将显示您当前使用的浏览器支持： http ： //html5test.com/ 。 这将让您

...

iOs移动Safari通过http本地支持MJPEG。 在Canvas中是否有特定的原因需要它？ 在ipad / iphone上查看http://bridgecam2.halton.gov.uk/mjpg/video.mjpg?camera=1 iOs mobile Safari supports MJPEG natively over http. Is there specific reason you need it in Canvas? see http://bridgecam2.halto

...

不，http协议不知道正文中的内容。 您可能能够运行提供该文件的cgi，并且它将接受时间戳作为参数以从该位置继续流。 No, the http protocol is not aware of the content in the body as such. You might be able to run a cgi that delivers the file and it would accept a timestamp as a parameter to continue the stre

...

ZetaKey正在尝试这一点。 他们声称支持WinMo浏览器中的应用程序缓存和本地存储。 ZetaKey is attempting exactly this. They claim to support application caching and local storage in their WinMo browser.

我认为这是因为你的js文件永远不会加载。 它会在您将其附加到文档后加载。 试试这样： try {

new Audio();

var js = document.createElement("script");

js.type = "text/javascript";

js.src = "https://www.gstatic.com/swiffy/v5.2/runtime.js";

document.head.appendChild(js); // A

...

...

Shell-Browser交互 您可以将MozRepl与netcat结合使用。 MozRepl是基于XUL的应用程序(如Firefox)的读取 - 评估 - 打印循环。 这允许您将Javascript表达式发送到Firefox并从stdin接收评估(由Firefox在给定浏览器选项卡的上下文中执行)。 所以你要做的就是弄清楚在播放html5视频时哪些物体会徘徊。 (提示：检查$('video')元素的paused属性是一个好的开始。) 在壳上的Dom Traversal 根据您的具体目标，可能需要

...

你应该能够简单地使用jquery或常规javascript从dom中删除旧标签，并创建一个新标签，将源设置为新的mp3文件(从你的轨道列表选择器)，然后开始播放。 即 var audioElement = document.createElement('audio');

audioElement.setAttribute('src', 'loading.ogg');

audioElement.play();

这里有一些不错的例子 You should be able to simply use

...

这循环永远不会结束:) while (distance < 100){

rock_pos = [random(0, WIDTH), random(0, HEIGHT)];

}

距离永远不会增加 This loop never ends :) while (distance < 100){

rock_pos = [random(0, WIDTH), random(0, HEIGHT)];

}

distance is never in

...

我一直在研究并找到了一些 JSormDB XBSDB TaffyDB JSINQ TrimQuery AMASS 也与此有关。 希望这有助于某人。 I've been researching and found a few JSormDB XBSDB TaffyDB JSINQ TrimQuery AMASS also relevant this and this. Hope this helps out someone.