【RTSP】使用webrtc播放rtsp视频流

一、简介
rtsp流一般是监控、摄像机的实时视频流，现在的主流浏览器是不支持播放rtsp流文件的，所以需要借助其他方案来播放实时视频，下面介绍下我采用的webrtc方案，实测可行。

二、webrtc-streamer是什么？
webrtc-streamer是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。webrtc-streamer就相当于一个微型服务器。
三、详细的开发使用步骤
1、下载webrtc-streamer，我下载的是最新的window版本，大家可以根据自己开发需求下载对应的版本。
下载地址：https://github.com/mpromonet/webrtc-streamer/releases

2、解压下载的安装包

3、双击webrtc-streamer.exe运行程序

如下图则启动成功，此时可以通过127.0.0.1:8000在浏览器访问可以看到本机监控画面(即自己电脑桌面)。

当你同时打开多个视频流/访问窗口时，发现本地CPU会快速上涨，cpu太高的话打字都非常卡。所以在使用的时候不要直接双击打开webrtc-streamer.exe程序，而是在cmd里使用命令启动exe，需要加上这个配置参数 -o。

4、将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目你需要用的位置。可以按需引入局部使用，也可以全局引入使用，这里推荐局部引入使用，全局会比较耗性能，大家可以自行选择。


5、开始在项目中使用webrtc-streamer实现rtsp实时视频播放

注意：
1.第3步在本机启动服务所以 new WebRtcStreamer(id,serverUrl)中URL传入127.0.0.1，端口可
见第3步截图为8000；各监控设备厂商有自己的RTSP地址格式connect要传入正确的rtsp地址。
2.如果是在本机启动的话，127.0.0.1也可以换成你的本地ip地址。
3.在本地测试完成没问题之后是要部署到生产环境的，这个时候就要把serverUrl中的127.0.0.1或者本地ip换成服务器的ip,端口依然是你启动webrtc-streamer程序的端口。
4.new WebRtcStreamer(id,serverUrl)：id为<video id="video"></video>播放组件的id,可以自己定义。

我选择的是局部引入，在需要地方直接新建js文件夹，把webstreamer.js和adapter.min.js文件放到其中，在vue文件中直接使用即可。

注意点：如果adapter.min.js文件中如果一下红框中的引入文件有.js后缀的话最好去掉，要不然使用的时候可能会出现报错。

（1）单个视频流Demo

<template>
	<div>
		<video id="video" controls widt