流式传输MJPEG图像和内存 - 对图像进行Angular2 HTTP处理 - 有没有办法？ [英] Streaming MJPEG images and memory build up - Angular2 HTTP handling for images - is there a way?

问题描述

我遇到了一个与浏览器如何处理< img src> 连接的持久性有关的问题，我无法找到解决方案。我发布了一个问题这里关于一种方法，但问题实际上更广泛，所以我想我会发布一个更通用的问题，后退一步。这个问题并不是Angular2独有的（我遇到了同样的问题，并做了一些丑陋的黑客攻击，我将在后面描述，并想知道Angular2 +中是否有更好的方法）

<问题陈述：

• 我必须使用连续流式传输图像的后端服务器（第三方）来自IP摄像头。服务器基本上不断发送连续 Content-Type：image / jpeg 使用< img src ='server url'在HTML页面上呈现的图像> 呈现相机的直播。我知道现代系统可以直接重新流式传输/复用H264 / HLS视频，您可以使用< video> 元素。此服务器没有。




• 在Angular中执行< img src> 的问题似乎由于浏览器启动并完全控制底层TCP连接，应用程序完全无法控制它。 即使你退出视图，TCP对象仍然存在，随着时间的推移，当我监视我的服务器时，我看到新旧连接逐渐累积，最终导致服务器崩溃。鉴于客户端没有终止连接，TCP连接继续




• 你认为做< ngIf> 在这个连接上并强制将其从DOM中删除就可以了，但是它不会。我已经多次测试过了。




• 在Angular中输入 HTTP observables 。我认为不是直接在< img src> 中渲染图像，而是可以编写一个后端服务，它可以执行 http.get & 订阅接收流式数据，然后在屏幕上呈现，优点是因为我有它的句柄，我可以取消订阅从它（这是我的问题的起源我早先问过）。然而，这在我脸上爆炸，因为这是HTTP和服务器持续流式传输 image / jpeg ，我的订阅处理程序永远不会被调用，因为数据永远不会停止。




• 在Angular1中我不得不做一个糟糕的黑客攻击，其中包括调用 window.stop（）该强制终止了页面中的所有连接。虽然这有效，但它也有一些副作用干扰并发路由导航（任何URL操作都被终止），我不得不经历了很多混乱的时间来使它正确。




• 我使用Ionic作为我的应用开发的UI框架（如果重要的话）。

Angular中是否有任何可以解决的构造可以解决这种不需要服务器端修改的困境？

解决方案

我有类似的问题，但只是不知道如何找到解决方案。我建议更改服务器实现并从服务器提供base64，但它似乎非常昂贵...
mu问题

I have a problem related to how browsers handle persistence of <img src> connections for which I can't figure out a solution. I had posted a question here about an approach but the problem is actually wider, so I thought I'd post a more generic question that takes a step back. This problem is not unique to Angular2 (I faced the same problem in Angular1, and did some ugly hacks which I'll describe later, and want to know if there is a better way in Angular2+)

Problem Statement:

• I have to work with a back end server (3rd party) that streams images on a continuous basis from an IP camera. The server basically keeps sending continuous Content-Type:image/jpeg images that when rendered on an HTML page using <img src='server url'> renders a 'live stream' of the camera. I know modern systems directly re-stream/mux H264/HLS videos that you can use <video> elements for. This server doesn't.

• The problem of doing an <img src> in Angular seems to be that the browser initiates and completely takes control of the underlying TCP connection and the app has absolutely no way to control it. Even if you exit the view, the TCP object persists and over time, as I monitor my server, I see a gradual build up of both old and new connections that eventually thrash the server. Given that the client doesn't terminate the connection, the TCP connection continues

• You'd think doing an <ngIf> on this connection and forcibly removing it from the DOM would do the trick, but it doesn't. I've tested this several times.

• Enter HTTP observables in Angular. I thought instead of directly rendering the images in <img src> I could write a backend service that does http.get & subscribe to receive the streamed data and then render it on screen, with the advantage that since I have its handle, I can unsubscribe from it (which was the genesis of my question I asked earlier). However, that blew up in my face, because since this was HTTP and the server kept streaming image/jpeg continuously, my subscribe handler is never really called, as the data never stops.

• In Angular1 I had to do a terrible hack, which involved calling window.stop() that force terminated all connections in the page. While this worked, it also had several side effects about interfering with concurrent route navigations as well (any URL operation was terminated) and I had to go through a lot of messy timings to get it right.

• I use Ionic as the UI framework for my app development (if it matters).

Is there any construct in Angular I can explore that can solve this predicament that doesn't require server side modifications?

解决方案

I have a similar problem, but just do not know how to find a solution. I suggest to change the server implementation and to give the base64 from the server, but it seems very expensive... mu question

这篇关于流式传输MJPEG图像和内存 - 对图像进行Angular2 HTTP处理 - 有没有办法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！