目前大多数在浏览器中实时播放监控视频的大多采用的以下两种方案：
- 在服务端中对视频流进行转码，然后在前端用一些库（flv.js等）进行视频播放，这种在服务端进行视频流转码对服务器有压力
- 在本地本地安装一些软件，例如vlc、海康威视的软件等，这样对于用户不是很方便，还需要下载额外的软件
最近我也接到了这个需求，经过调研，最后采用基于webrtc的webrtc-streamer库提供的方案
这套方案不用在本地安装额外软件，也不用在服务端进行视频转码，其原理是这样的：
- 服务端：在服务端会开启一个微型的http server，来进行类似视频流转发的功能，注意该服务并未进行视频流转码
- 客户端：通过webrtc来播放由服务端转发的视频流
优点:
- 服务端把可执行文件启动后进行简单配置即可，不用在服务端转码，大大节约了服务器的性能消耗
- 客户端无需进行额外的软件安装，webrtc-streamer库中提供的方法操作很简单
缺点：
- 由于视频变成了由浏览器通过webrtc进行解析播放，当同时播放多个监控视频时，对客户端电脑性能是个考验
目前我仅试验了该方案下的监控视频播放、暂停，别的功能还未探索，能基本满足在线看监控的需求 最后上前端代码！
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video id='video' style='object-fit:fill' controls autoplay autobuffer muted preload='auto'></video>
<!-- 主要就是引入一下两个js包，在webrtc-streamer库的github中就有 -->
<script type="text/javascript" src="./webrtcstreamer.js"></script>
<script type="text/javascript" src="./adapter.min.js"></script>
<script>
var webRtcServer = null;
//页面加载时加载视频画面
window.onload = function () {
//192.168.1.100是启动webrtc-streamer的服务器IP，8000是webrtc-streamer的默认端口号，可以在服务端启动的时候更改的
webRtcServer = new WebRtcStreamer("video", location.protocol + "//192.168.1.100:8000");
//需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用
webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4");
}
//页面退出时销毁，一定要进行销毁，避免出现频繁进入关闭该监控页面时反复创建又未手动销毁导致的性能问题
window.onbeforeunload = function () {
webRtcServer.disconnect();
}
</script>
</body>
</html>
然后是后端，按照webrtc-streamer库中提供中提供的服务端启动所需可执行文件方法启动迹可
