Streaming MJPEG images and memory build up - Angular2 HTTP handling for images - is there a way?

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?

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

  • 树莓派直播推流---树莓派摄像头推流的几种方式
    无论使用何种推流方式,我们要使用树莓派CSI摄像头时必须首先要进行一些设置 具体参考前面的博客:https://blog.csdn.net/zz531987464/article/details/83422794 1.raspivid工具推流-延迟大约170ms 该工具已经默认集成到了树莓派之中 raspivid -t 0 -w 1280 -h 720 -fps 20 -o - | nc -k -l 8090 -t 表示延时;-o表示輸出;-fps 表示帧率;端口号为8090 -w表示图像宽度;,-h 表示图像高度,此处设置的分辨率为1280*720;我们可以修改 -w 1920 -h 1080将分辨率设置为1920*1080 该命令执行玩后不会出现任何打印信息即可 在局域网内的linux主机上安装mplayer工具(sudo apt-get install mplayer),然后执行命令 mplayer -fps 200 -demuxer h264es ffmpeg://tcp:// 即会弹出一个显示树莓派实时视频流的窗口,而且延迟尚可,大概在200ms左右,基本上可以满足实时性的要求了。 2.mjpeg-streamer 视频监控-延时大约220ms 使用mjpeg-streamer可以建一个视频流服务,用来做远程监控
  • Android:将相机流式传输为 mjpeg(Android: streaming the camera as mjpeg)
    问题 经过几天搜索 SO 和 google 我开始放弃,所以我想我不妨在这里发帖。 我正在创建一个 android 应用程序,它应该提供某种视频聊天。 由于这应该尽可能接近实时,我阅读了各种协议并决定为初学者尝试 MJPEG(目前不涉及音频)。 现在流式传输数据让我发疯。 连接建立,应用程序开始将相机预览帧写入流,但 VLC 和 mplayer 都不会开始播放视频。 监控连接显示数据正在到达。 连接此代码由异步任务执行,成功时通知侦听器: try { ServerSocket server = new ServerSocket(8080); socket = server.accept(); server.close(); Log.i(TAG, "New connection to :" + socket.getInetAddress()); stream = new DataOutputStream(socket.getOutputStream()); prepared = true; } catch (IOException e) { Log.e(TAG, e.getMessage(); } 在我的 PC 上,我执行“mplayer http://tabletIP:8080 ”,平板电脑注册一个连接(从而启动我的流http://tabletIP:8080和相机预览)。
  • 从python中的jpeg图像创建mjpeg流(Create a mjpeg stream from jpeg images in python)
    问题 我需要提供实时图形,并且我想通过 http 提供 mjpeg 流(这样可以很容易地通过使用普通标签将图形包含在网页中)。 是否可以从多个 jpeg 图像实时创建 mjpeg 流? 我的策略是: 输出正确的 http 标头: Cache-Control:no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0 Connection:close Content-Type:multipart/x-mixed-replace;boundary=boundarydonotcross Expires:Mon, 3 Jan 2000 12:34:56 GMT Pragma:no-cache Server:MJPG-Streamer/0.2 (从curl -I {on a mjpeg-streamer instance}得到它,但这看起来很奇怪) 只需生成连续的 jpeg 图像二进制文件,注意: 在流的开头添加正确的标头(如 mjpeg-streamer 所做的那样): Content-Type: image/jpeg Content-Length: 5427 X-Timestamp: 3927662.086099 在每个 jpeg 流的末尾附加边界字符串。 --boudary-- 问题: 你这样做了吗
  • Android: streaming the camera as mjpeg
    After several days of searching SO and google I'm beginning to give up, so I thought I might as well post here. I'm creating an android app which should offer some kind of video chat. As this should be as close as possible to realtime, I read about various protocols and decided to try MJPEG for starters (not concerning with audio for now). Right now streaming the data is driving me nuts. The connection gets established, the app starts writing the camera preview frames to the stream, but neither VLC nor mplayer start playing video. Monitoring the connection reveals that the data is arriving
  • 将本地mjpg视频流式传输到html画布(Stream local mjpg video to html canvas)
    问题 我正在尝试将mjpg视频的实时流写入html画布。 以下内容:http://camelive.info/包含带有mjpeg视频的公共网络摄像头列表,但它们似乎正在编写带有frame元素的<frameset>标签,我无法理解其工作方式。 理想的解决方案是在html画布上流式传输任何实时mjpg(最好是链接?)流。 感谢任何有用的资源,我想在不包含外部库的情况下做到这一点(允许使用jquery) 编辑:相关:如何从HTML中的MJPEG流制作快照 编辑:我也有一个本地的mjpg可以从该示例中进行绘制。 解决方案可以使用本地流 回答1 根据有关CanvasRenderingContext2D drawImage方法的规范, 具体地,当CanvasImageSource对象代表了HTMLImageElement动画图像时,用户代理必须使用的动画(一个该格式定义为时,不支持动画中使用或禁用),默认的图像或,如果存在不是这样的图像,即为CanvasRenderingContext2D API渲染图像时的动画的第一帧。 这适用于.gif ,SMIL动画.svg和.mjpeg媒体。 因此,一旦您获取了数据,就只能在画布上绘制一帧。 请注意,Chrome浏览器存在一个错误,仅对.gif图像有效,但有朝一日可能会对其进行修复。 您已经注意到自己的一种解决方案是通过清除缓存黑客( 'your
  • C++/OpenCV Streaming Camera-Video/Images (MJPEG) from Socket into Browser (Windows 8.1)
    Still pretty new to openCV/C++ so please bear with me :) I am currently trying to find a good (and possibly easy) way to stream my camera frames in realtime (or almost realtime) from my OpenCV application so that I can open my browser, type in the IP and see the image. So far I got the server done using winsock2 (if anyone has a good cross-platform alternative and can tell me what's different, I'd be quite glad) and can connect to it via entering the IP in my browser. Socket-/Server-Code: //socket long rc; SOCKET acceptSocket; SOCKADDR_IN addr; WSADATA wsa; // initialize winsock rc=WSAStartup
  • 使用live555进行JPEG流(JPEG streaming with live555)
    问题 我想通过实时555流式传输JPEG图像或动态JPEG文件。但是问题是在实时555中无法实现Jpegs。 任何人都可以帮助吗? 回答1 您可以在http://lists.live555.com/pipermail/live-devel/2012-February/014672.html上找到已发布到开发邮件列表的实现。 该代码和示例可用,但此修改被live555维护人员拒绝。 首先,我们需要实现一个MJPEGVideoSource不是可以提供JPEGVideoRTPSink 。 #include "JPEGVideoSource.hh" class MJPEGVideoSource : public JPEGVideoSource { public: static MJPEGVideoSource* createNew (UsageEnvironment& env, FramedSource* source) { return new MJPEGVideoSource(env,source); } virtual void doGetNextFrame() { if (m_inputSource) m_inputSource->getNextFrame(fTo, fMaxSize, afterGettingFrameSub, this, FramedSource
  • 在Python中从RTSP流读取帧(Read Frames from RTSP Stream in Python)
    问题 我最近安装了Raspberry Pi相机,并通过RTSP传输帧。 虽然可能不是完全必要,但这是我正在使用的视频广播命令: raspivid -o - -t 0 -w 1280 -h 800 |cvlc -vvv stream:///dev/stdin --sout '#rtp{sdp=rtsp://:8554/output.h264}' :demux=h264 这样可以完美地播放视频。 我现在想做的是使用Python解析此流,并分别读取每个帧。 我想做一些运动检测以进行监视。 我完全不知道该从哪里开始。 谁能给我指出一个好的教程? 如果无法通过Python实现此功能,我可以使用哪些工具/语言来实现此目的? 回答1 使用“ depu”列出的相同方法对我来说非常合适。 我只是用实际摄像机的“ RTSP URL”替换了“视频文件”。 以下示例适用于AXIS IP摄像机。 (在早期版本的OpenCV中暂时无法使用)在OpenCV 3.4.1 Windows 10上有效 import cv2 cap = cv2.VideoCapture("rtsp://root:pass@") while(cap.isOpened()): ret, frame = cap.read() cv2.imshow('frame'
  • 在Java Servlet中流式传输大文件(Streaming large files in a java servlet)
    问题 我正在构建需要扩展的Java服务器。 Servlet之一将提供存储在Amazon S3中的图像。 最近在负载下,我的VM内存不足,这是在添加代码以提供图像服务之后,因此,我很确定流较大的servlet响应会引起麻烦。 我的问题是:从数据库或其他云存储读取数据时,如何编写Java Servlet以便将大型(> 200k)响应流回浏览器,是否有最佳实践? 我考虑过将文件写入本地临时驱动器,然后生成另一个线程来处理流,以便可以重新使用tomcat servlet线程。 这似乎很沉重。 任何想法将不胜感激。 谢谢。 回答1 如果可能,您不应将要提供的文件的全部内容存储在内存中。 取而代之的是,为数据获取InputStream,并将数据分段地复制到Servlet OutputStream。 例如: ServletOutputStream out = response.getOutputStream(); InputStream in = [ code to get source input stream ]; String mimeType = [ code to get mimetype of data to be served ]; byte[] bytes = new byte[FILEBUFFERSIZE]; int bytesRead; response
  • 在 python 中使用 libVLC 从内存播放视频(Play video using libVLC from memory in python)
    问题 我正在尝试使用 libVLC python 绑定在将文件读入内存后播放它们。 我有以下代码将有效的视频文件读入内存。 我现在需要直接从内存中播放视频。 import vlc File1 = open('vid.webm','rb') Axel = File1.read() 现在我需要在 Axel 中播放内容,我该怎么做。 有关如何在 C、Java 等中执行此操作的信息也可以提供帮助。 编辑:明白我将不得不使用 imem 模块,但找不到关于如何完成它的任何帮助。 回答1 为此,您必须使用 libvlc 的 imem 模块。 这可能真的很令人困惑,因为它现在不是公开记录的 API。 但是,我在此处和 VideoLan 论坛上关注了一些与此相关的其他帖子。 下面是我今天在 C++ 中使用的一些示例代码,它使用加载到内存中的 JPEG 图像来创建视频流。 您可以遵循类似的步骤,但您只需要更改内存中数据的编解码器(请参阅 imem-codec=RV24 行)。 // Local file/media source. std::string IMEM_SOURCE_FOLDER = "settings/rvideo/samples/bigdog"; class MyImemData { public: MyImemData() : mFrame(0), mDts(0), mPts(0)
  • 如何从IP摄像机解析mjpeg http流?(How to parse mjpeg http stream from ip camera?)
    问题 下面给出的是用于从IP摄像机获取实时流的代码。 from cv2 import * from cv2 import cv import urllib import numpy as np k=0 capture=cv.CaptureFromFile("http://IPADDRESS of the camera/axis-cgi/mjpg/video.cgi") namedWindow("Display",1) while True: frame=cv.QueryFrame(capture) if frame is None: print 'Cam not found' break else: cv.ShowImage("Display", frame) if k==0x1b: print 'Esc. Exiting' break 在运行代码时,我得到的输出是: Cam not found 我要去哪里错了? 另外,为什么这里没有框架? 转换有问题吗? 回答1 import cv2 import urllib import numpy as np stream = urllib.urlopen('http://localhost:8080/frame.mjpg') bytes = '' while True: bytes += stream.read(1024) a =
  • Getting IP Cam video stream on Android (MJEPG)
    I am currently doing an AndAR project in group of 3. I'm the person who's in charge of video streaming into the Android phone. I got ourselves a D-Link DCS-920 IP camera and I found out that it uses MJPEG codec for the live video stream and the webserver uses Jview to view the live stream. As far as I know MJPG is not a supported file type for Android OS so I've came out with an idea, instead of using ImageView, I use WebView to stream the video. I've implemented a very simple concept and it works! But the problem is, refresh rate is terrible. I get the video image (eg:
  • Angular2 SEO-如何使Angle 2应用程序可爬网(Angular2 SEO - How to make an angular 2 app crawlable)
    问题 我正在使用Angular-Meteor框架构建Angular 2应用程序。 我想实现快速,谷歌和其他搜索引擎索引的一致性,并允许Facebook的分享者和其他铲运机产生我的JS生成内容的预览。 通常,SPA使用PhantomJS渲染服务器端页面并将静态HTML发送给客户端。 当然,当我拦截_escaped_fragment_或看到google或scraper用户代理时,我可以自己生成PhantomJS,但是当直接在流量较大的网站上生成PhantomJS时,我总是遇到内存泄漏和孤立的Phantom实例的情况(我使用NodeJS和此模块)。 对于Angular 1应用程序,我曾经使用Angular-SEO之类的角度模块来解决此问题,但似乎很难将此类模块转换为angular 2。 我还没有找到合适的Angular 2模块。 我应该自己构建它,还是有其他好的方法可以实现这一目标? 回答1 Angular2的伟大之处在于,启动后,根应用程序元素中的所有内容都会消失。 这意味着您可以将想要从爬虫抓取的服务器中的任何内容放入其中。 您可以通过使用应用程序中内容的服务器呈现版本来生成此内容,或者具有自定义逻辑。 您可以在此处找到更多信息:https://angularu.com/VideoSession/2015sf/angular-2-server-rendering以及此处:https
  • 如何使用C#流式传输网络摄像头视频? [关闭](How can I stream webcam video with C#? [closed])
    问题 关闭。 此问题不符合堆栈溢出准则。 它当前不接受答案。 想要改善这个问题吗? 更新问题,使它成为Stack Overflow的主题。 去年关闭。 改善这个问题 我想创建一个简单的服务器应用程序,使人们可以使用基于浏览器的客户端(稍后将进行说明)进行连接以观看流式视频。 而且我想使用C#。 我需要通过网络摄像头捕获视频或快速图像并通过网络发送它们,该怎么办? 回答1 如果您想要一个“盒子中的捕获/拖缆”组件,那么就像其他人提到的那样,有很多组件。 如果您想对所有内容进行低级控制,则需要使用alAlededhacker指出的DirectShow。 在C#中使用DirectShow的最佳方法是通过DirectShow.Net库-它包装了所有DirectShow COM API,并为您提供了许多有用的快捷功能。 除了捕获和流式传输之外,您还可以进行记录,音频和视频格式转换,音频和视频实时过滤器以及许多其他工作。 Microsoft声称DirectShow即将消失,但他们尚未发布一种新的库或API,该库或API可以完成DirectShow提供的所有功能。 我怀疑他们发布的许多最新内容仍然是DirectShow。 由于它在Microsoft中的地位,因此除了MSDN以及在论坛上可以找到的东西之外,没有很多其他书籍或参考资料。 去年,当我们启动一个使用它的项目时,关于该主题的最好的书-《
  • 使用HttpHandler流式处理数据库图像(Streaming Databased Images Using HttpHandler)
    问题 很长时间以来,当我在涉及本地计算机上的数据库图像的Web应用程序项目上工作时,已经注意到一些烦人的事情。 在本地,我的意思是这是在工作站上装有VS 2008和SQL Server 2005的典型环境。 每当我使用HttpHandler在本地上显示图像时,每个页面加载时只会渲染一些图像。 但是,当我将应用程序推送到托管环境时,问题通常会消失。 但是,我只是将一个新项目推送到托管环境,并且遇到了与本地环境相同的问题-这次站点和数据库位于托管环境中的同一台服务器上。 有人对这里发生的事情有所了解吗? 这是处理程序: [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class FeaturedHandler : IHttpHandler { Business biz = new Business(); public void ProcessRequest(HttpContext context) { if (context.Request.QueryString["ListingID"] != null) { int listingID = Convert.ToInt32(context
  • OpenCV从stdin加载图像/视频(OpenCV load image/video from stdin)
    问题 我正在尝试使用以下代码从stdin读取jpg图像: int c,count=0; vector<uchar> buffer; //buffer for coding /* for stdin, we need to read in the entire stream until EOF */ while ((c = fgetc(stdin)) != EOF) { buffer.push_back(c); count++; } cout << "Bytes: " << count << endl; Mat im = imdecode(Mat(buffer),CV_LOAD_IMAGE_COLOR); cout << "Decoded\n"; namedWindow("image", CV_WINDOW_AUTOSIZE); imshow("image",im); cv::waitKey(0); 我在cmd中运行此命令: OpenCVTest < thumb.jpg 这是我得到的: Bytes: 335 Decoded OpenCV Error: Bad flag (parameter or structure field) (Unrecognized or unsupported array type) in unknown function, file ..\..\
  • FFMPEG-找不到编解码器参数(FFMPEG - Not finding codec parameters)
    问题 我正在尝试通过FFMPEG将图像序列转换为mpeg电影,尽管我不断收到错误消息,说它找不到代码参数(视频:mjpeg)。 Google搜索没有带来太多有用的信息。 ffmpeg -f image2 -i /tmp/img%03d.jpg video.mpgFFmpeg version SVN-r0.5.1-4:0.5.1-1ubuntu1, Copyright (c) 2000-2009 Fabrice Bellard, et al. configuration: --extra-version=4:0.5.1-1ubuntu1 --prefix=/usr --enable-avfilter --enable-avfilter-lavf --enable-vdpau --enable-bzlib --enable-libgsm --enable-libschroedinger --enable-libspeex --enable-libtheora --enable-libvorbis --enable-pthreads --enable-zlib --disable-stripping --disable-vhook --enable-runtime-cpudetect --enable-gpl --enable-postproc --enable-swscale -
  • v4l2开启摄像头、抓取图像代码实战
    先上核心代码: #include "v4l2Camera.h" #include <sys/stat.h> #include <sys/mman.h> #include <sstream> #include <assert.h> #include <opencv2/opencv.hpp> namespace v4l2_camera { #define CLEAR(x) memset(&(x), 0, sizeof(x)) int xioctl(int fh, int request, void *arg) { int ret_value; do { ret_value = ioctl(fh, request, arg); } while (ret_value == -1 && errno == EINTR); return ret_value; } int print_error_detail(const char* err_msg) { std::cerr << err_msg << " error occurred! errno: " << errno << ", error description: " << strerror(errno) << std::endl; return -1; } void Camera::process_image(void* p_data
  • iOS如何通过流技术将大型资产文件上传到服务器(iOS how to upload a large asset file into sever by streaming)
    问题 我是新的iOS程序员。 我想将资产库中的大文件(视频或图像)上传到服务器,我的原始方法是使用NSMutableURLRequest并将NSData (大视频或大图像)附加到其中,并且在以下代码中发生崩溃: ALAssetsLibraryAssetForURLResultBlock resultblock = ^(ALAsset *asset){ //.......some code I just skip it... ALAssetRepresentation *rep = [asset defaultRepresentation]; void *buffer = [rawData mutableBytes]; [rep getBytes:buffer fromOffset:0 length:size error:nil]; NSData *videoData = [[NSData alloc] initWithBytes:buffer length:size];//crash here [self startUploading:videoData]; } 我知道这次崩溃是因为内存不足,视频文件不能仅分配给NSData。 我已经用谷歌搜索了2天,听起来有几种方法可以解决这个问题。 使用第三方库:例如AFNetworking,ASIHTTPRequest(但我不想使用它
  • 使用FFmpeg工具进行推流、拉流、截图、变速、转换,及常见问题处理
    快速查找 下载安装测试语法规则推流本地视频推流本地摄像头推流1.寻找可用摄像头2.测试摄像头3.摄像头推流 实测低延迟低丢帧摄像头推流 拉流拉流播放视频拉流保存视频视频截取定时截图(不断截图后更新一张图片)定时截图(每次截图产生产生一张图片,全部保存) 格式转换视频处理视频变速改变视频帧率视频剪辑视频旋转视频尺寸裁剪 常见问题:1.推流时遇到红色丢帧警告 real-time buffer [video input] too full or near too full (101% of size: 3041280 [rtbufsize parameter])! frame dropped!2.拉流保存时报错:At least one output file must be specified 更多使用说明 下载安装 FFmpeg下载官网:https://ffmpeg.org/ ,这里提供了官网下载的windows环境 4.1.3版本:https://download.csdn.net/download/qq_43474959/12311422 下载后,配置环境变量,将bin文件地址加入到path中: 测试 在cmd中键入ffmpeg,观察是否显示相关信息 语法规则 语法结构:ffmpeg 输入配置 -i 输入地址 输出配置 输出地址 推流 本地视频推流 ffmpeg -re -i