rtsp2web

rtsp2web 是一个提供在 web 页面中可以直接播放 rtsp 视频流解决方案的工具；简单、高效、快捷、安全。

> _PS: rtmp 格式的视频流也可以使用_

使用 rtsp2web 后，前端代码中可以使用 jsmpeg.js 或者 flv.js 来进行视频流的直接播放。

特点

- 上手简单，提供的示例代码完整可运行，无需繁琐复杂的技术负担，直接运行代码，快速解决视频流播放的问题；
- 延时非常低，视频流稳定，几乎是实时的，满足任何需求；不花钱，采用开源框架，无商业风险；
- 别的收费平台，需要暴露 RTSP 视频流链接给收费平台，rtsp2web 无需您提供 RTSP 视频流，您的保密和安全牢牢掌握在您手中；
- 高效兼容，大多数 nvr 或 ipc 或摄像头平台都支持输出 RTSP 视频流，rtsp2web 把 RTSP 视频流转换到页面可播放，减少对接工作，无论您是什么摄像头；
- 支持前端使用 jsmpeg.js、flv.js 等播放器，满足不同技术栈团队使用；
- 删繁就简，无需插件就可在浏览器显示视频画面，兼容各大浏览器厂商；
- 省时省力，同一页面可以播放不同厂家的视频，无需任何额外操作，轻松支持多路视频同时播放；
- 可以在公网上部署使用，但也可能因为你们公司网络的设置原因，你会面临一点小问题：还要学习网络穿透打洞，服务器部署能力，流量消耗，wss 等。

支持的视频厂商

海康、海康 NVR、大华平台、萤石、宇视、中天信科达、东方网力、天地伟业等。

How to use（如何在你的项目中使用这个工具）

准备工作

FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。可以轻易地实现多种视频格式之间的相互转换。

确保在你要运行 rtsp2web 的机器上已经安装了 FFmpeg。

> _新打开一个命令行窗口，输入：ffmpeg -version ，如果有相关信息输出，则证明 FFmpeg 的安装是 OK 的。_

rtsp2web 介绍

rtsp2web 是一个 node.js 包，你可以创建一个新的项目引入它，这样很简单，然后运行它即可；也可以把 rtps2web 集成到已有的项目中，随项目运行（如果你知道怎么做的话）；

这里以创建一个新项目运行它为例：（_这是最简单的做法_）

1、创建一个新的文件夹（假如文件夹名叫：rtsp_server），_注意 ⚠️：文件夹名称不能是 rtsp2web，这是 npm 的规则_。

2、进入项目文件夹： cd rtsp_server

3、然后安装 rtsp2web 包

``
npm i rtsp2web
`

4、在 rtsp_server 文件夹中创建入口 js 文件（例如：main.js）

`js
// main.js
const RTSP2web = require('rtsp2web')

// 服务端长连接占据的端口号；你也可以不传，默认是：9999
let port = 9999

// 创建一个RTSP2web服务实例出来
new RTSP2web({
port
})
`

4.1、参数说明（在 new RTSP2web 时，可配置的参数如下：）

| 参数 | 解释说明 |
| :-----------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| port | 转码推流服务占用的端口号；（type：Number）
可以不传；默认值：9999 |
| path | FFmpeg 命令在你机器上的启动名称，(type: String)
一般情况下不传；默认值：'ffmpeg' |
| audio | 默认不传，有声音；默认值：true；即：输出音频。
如果想禁止输出音频，可以配置 audio: false |
| freeTime | 任一视频流空闲(未被使用)时间超过这个值，就会停止该视频流的转码，释放机器资源（type: Number；单位：秒）
一般情况下可不传；默认值：20 |
| checkTime | 检测视频空闲的时间间隔（type: Number；单位：秒）
一般情况下可不传；默认值：10 |
| q | 视频质量；取值范围：0-1000；数字越小，视频越清晰，带宽消耗越大
默认值：8； |
| transportType | 设置 RTSP 传输协议，默认值：无
可选值：['tcp', 'udp', 'udp_multicast', 'http', 'https']
ps: 这里默认值是无，也就是 rtsp2web 会自动选择一种传输协议；但是，并不能保证一定成功，这个时候，rtsp2web 日志会打印错误信息或者长时间的等待，这个时候就需要你手动来配置这个参数了，'tcp'、'udp' 是最常见的选择；详情可以参阅文档最后的【常见问题解决办法】 |
| webplayer | 设置前端播放器（视频流转码器），默认不传，默认值：'jsmpeg'
可选值：['jsmpeg', 'flv']；如果设置为 flv，那么前端页面请使用 flv.js 播放器，详情请参考下面 flv.js 小节了解详细的使用方法 |
| wss | 配置 wss；配置格式如下：
wss: {key: 'keyPath', cert: 'certPath'}
如果你是 pfx 的证书，那么配置格式如下：
wss: {pfx: 'pfxPath', passphrase: 'passphrasePath'}
如果你想使用wss的话请配置这个选项，否则不要使用这个配置。 |

---

5、 运行 node main.js，即可启动视频流转码服务

> 当然，你也可以选择你习惯的进程管理工具来启动它。如：pm2 之类的工具。

6、 在页面中播放视频

6.1、 在你的页面中需要引入 jsmpeg.js。

6.2、 一个完整的前端页面例子代码如下：

> 1、需要 canvas 视频播放容器；2、rtsp 源地址；3、new 一个播放实例。

`html






name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover"
/>









class="jsmpeg"
id="canvas-4"
style="width: 400px; height: 400px; border: 1px solid red"
data-url="ws://localhost:9999/rtsp?url=cnRzcDovL3dvd3phZWMyZGVtby5zdHJlYW1sb2NrLm5ldC92b2QvbXA0OkJpZ0J1Y2tCdW5ueV8xMTVrLm1wNA=="
>