前言

现在，市场上大多是监控摄像头输出的视频流格式都是rtsp，以海康威视摄像头为例，其视频流的地址格式如下：rstp://user:password@IP:port，例如，用户名为admin，密码为abc123456，IP地址为192.168.61.64，端口号为554（海康威视监控摄像头默认端口号是554）的监控摄像头的地址为：rtsp://admin:[email protected]: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对象之间的一起使用就会存在一些问题。笔者做过的一个项目需求是这样的：全屏显示监控摄像头的视频数据，画面中出现人时，检测并跟踪人脸目标，识别人脸，然后将识别到的信息以卡片的形式浮动显示在画面左侧。 这听起来是一个非常简单的需求，我开始也是这样认为的，不就是在web中播放视频，然后在视频上使用一个浮动的层来显示其他内容吗？一点点jquery和js的知识足以应付，so easy！真的是这样的吗？真正了解项目的需求后，逐渐发现这个实现起来没有这么简单。主流的监控摄像头的输出数据是rtsp格式的，无法直接在浏览器中显示，需要借助IE独有的插件显示，因此浏览器只能局限于IE了。但是IE浏览器对于Html5的内容支持的不够好，所以会影响到后面的功能的实现。最主要的就是IE插件产生的object对象是脱离dom文档流的，在其设计的时候就已经被置于最顶层了，其上面是无法覆盖任何内容的，也就不能实现需求了，所以不能使用。在面对技术问题无解的时候我也考虑过折中的方法：在没有检测到显示目标的时候，全屏播放视频，检测到显示目标，自动退出全屏，左侧挤出一点空间来显示信息。 但是很不幸的是，这种想法马上被老板否掉了。然后，我就只能硬着头皮想办法。那就换个思路，既然浏览器不能显示rtsp的流，那么我们是否可以将rtsp的流转换成其他格式播放么？只有转换的效率高，应该是可以的。

RTSP

什么是RTSP呢？

RTSP（Real Time Streaming Protocol），RFC2326，实时流传输协议，是TCP/IP协议体系中的一个应用层协议，由哥伦比亚大学、网景和RealNetworks公司提交的IETF RFC标准。该协议定义了一对多应用程序如何有效地通过IP网络传送多媒体数据。RTSP在体系结构上位于RTP和RTCP之上，它使用TCP或UDP完成数据传输。HTTP与RTSP相比，HTTP请求由客户机发出，服务器作出响应；使用RTSP时，客户机和服务器都可以发出请求，即RTSP可以是双向的。RTSP是用来控制声音或影像的多媒体串流协议，并允许同时多个串流需求控制，传输时所用的网络通讯协定并不在其定义的范围内，服务器端可以自行选择使用TCP或UDP来传送串流内容，它的语法和运作跟HTTP 1.1类似，但并不特别强调时间同步，所以比较能容忍网络延迟。

监控摄像头为什么要采用RTSP格式输出呢？

由于监控摄像头只是一种视频图像数据采集的工具，并不具备显示和存储视频的功能，而要想发挥视频监控的作用，必须将摄像头采集到的数据进行存储分析处理，然后应用于不同的场景当中。所以，就需要一种高效通用的方式来连接摄像头和存储设备，很容易想到使用网络来连接，但是受限于网络带宽和存储设备处理能力和容量，我们需要一种高效的视频编码传输方案，而且在监控场景中，实时性要求还是比较高的。

如何在浏览器（chrome）中显示RTSP数据流？

Streamedian: https://streamedian.com/
Streamedian是一个局域网免费的rtsp流转换工具，它是采用websocket实现的，可以将rtsp的视频流转换成video标签可以支持的内容，转换效率很高，基本上和原来rtsp视频流同步。
这个工具如何使用呢？

1. server端安装

首先下载server端的安装包，可以根据自己的实际情况下载相应的版本。
server端支持的平台
下载之后按照提示安装即可，如果安装的是windows版的话，桌面上会有启动server端的图标。点击这个图标，首先会启动 server程序，然后打开一个浏览器窗口，其实就是一个简单的页面，我们可以找一个rtsp的流，输入到url中，点击set，就可以播放了。如果找不到demo视频流，可以使用这个：rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov

2.浏览器端

可以下载官网的浏览器端的demo。然后根据自己需要修改即可。也可以按照下面方式实现：

在浏览器页面中放入一个video标签，如下所示：
<video id="test_video" controls autoplay src="rtsp://your_rtsp_stream/url"></video>
或者

	<video id="test_video" controls autoplay>
		<source src="rtsp://your_rtsp_stream/url">
	</video>

引入js库
<script src="streamedian.js的路径"></script>
编写播放器初始化的代码
下面是实现最简单的播放功能，不含播放控制代码，如果需要其他特性，根据官方的demo修改即可。

if (window.Streamedian) {
    let errHandler = function (err) {
        alert(err.message);
    };

    let infHandler = function (inf) {
        let sourcesNode = document.getElementById("sourcesNode");
        let clients = inf.clients;
        sourcesNode.innerHTML = "";

        for (let client in clients) {
            clients[client].forEach((sources) => {
                let nodeButton = document.createElement("button");
                nodeButton.setAttribute('data', sources.url + ' ' + client);
                nodeButton.appendChild(document.createTextNode(sources.description));
                nodeButton.onclick = (event) => {
                    setPlayerSource(event.target.getAttribute('data'));
                };
                sourcesNode.appendChild(nodeButton);
            });
        };
    };

    var playerOptions = {
        socket: "ws://localhost:8088/ws/", redirectNativeMediaErrors: true,
        bufferDuration: 30,
        errorHandler: errHandler,
        infoHandler: infHandler
    };
    var player = Streamedian.player('test_video', playerOptions);
}

踩过的坑

chrome浏览器会自动忽略video标签的autoplay特性，必须用户手动点击一下才可以播放。在绝大多数情况下，这种做法是好的，而这么做的出发点就是减少网页广告的骚扰，节省用户流量。但是当这种特性出现在特性需求的系统中时，就变得很不友好了，总不能要求用户每次启动客户端后都手动点击一下播放按钮才开始播放吧！好在办法总比困难多，我们可以通过在video标签添加muted属性来解决。这个属性的含义是对该视频静音。一般情况下，我们只需要显示视频画面即可，所以还是可以接受的。
视频播放过程中，浏览器窗口是不能切换到后台的，一旦切换，会导致视频传输中断，导致流的时延很大，然后就得刷新一下。为了避免出现这种问题，推荐在单独的浏览器窗口打开页面。

在chrome中呈现RTSP

从RTSP数据流到浏览器呈现

前言