在chrome中呈现RTSP

前言

现在，市场上大多是监控摄像头输出的视频流格式都是rtsp，以海康威视摄像头为例，其视频流的地址格式如下：rstp://user:password@IP:port，例如，用户名为admin，密码为abc123456，IP地址为192.168.61.64，端口号为554（海康威视监控摄像头默认端口号是554）的监控摄像头的地址为：rtsp://admin:abc123456@192.168.64.61:554。

在实际的工作或学习中，经常会遇到将监控视频在程序中显示，在开发过程中，我们可以使用openCV的VideoCapture来读取视频流的数据帧，然后使用imshow函数在窗口中显示，如此不断循环，可以达到播放视频的目的。但是在生产环境中，这种显示方式比较消耗系统资源，而且画面显示位置无法控制，只能在该函数创建的窗口中显示。所以，我们需要寻找一种比较灵活可控的前端呈现方式。基于此，我们很自然联系到Web方式，在Web中，我们可以非常轻松的按照自己项目的要求，设计各种呈现方式，非常灵活的增加或者删除UI中元素。但是，Web中不能直接显示rtsp格式的视频数据，但是幸运的是，IE浏览器可以通过加载Active插件来显示rtsp格式的数据流，具体就是安装海康威视的官方web工具库，然后按照demo在web中引入相应的js文件，在页面加载时，dom中会渲染出一个object对象来显示rtsp视频，这个object对象可以放在web页面的任何地方。这看起来似乎是一个非常不错的解决方案,但是由于object是微软通过active插件技术实现的，只能在IE浏览器中使用，另外，由于object不是使用标准的html实现的，所以，它本身是脱离文档流的，因此，和其他dom对象之间的一起使用就会存在一些问题