rtsp2web
是一个提供在 web
页面中可以直接播放 rtsp
视频流解决方案的工具。
FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。可以轻易地实现多种视频格式之间的相互转换。
FFmpeg 的用户有 Google,腾讯视频,Youtube,优酷,爱奇艺,土豆等。
确保在你要运行 rtsp2web 的机器上已经安装了 FFmpeg。
有问题,可以联系我
rtsp2web
是一个 node.js
包,你可以创建一个新项目引入它,并单独的运行它;也可以集成到已有的项目中(如果你知道怎么做的话)。
这里以创建一个新项目运行它为例:
1、创建一个新的文件夹(假如文件夹名叫:rtsp_server
),注意 rtsp2web
,这是 npm
的规则。
2、进入项目文件夹: cd rtsp_server
3、然后安装 rtsp2web
包
npm i rtsp2web
4、在 rtsp_server
文件夹中创建入口 js
文件(例如:main.js
)
// main.js
const RTSP2web = require('rtsp2web')
// 服务端长连接占据的端口号;端口号可以自定义
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;单位:秒) 一般情况下不传;默认值:60 |
checkTime | 检测视频空闲的时间间隔(type: Number;单位:秒) 一般情况下不传;默认值:10 |
q | 视频质量;取值范围:0-1000;数字越小,视频越清晰,带宽消耗越大 默认值:2; |
transportType | 设置 RTSP 传输协议 一般情况下建议不传,默认值:无 可选值:['tcp', 'udp', 'udp_multicast', 'http', 'https'] |
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 一个播放实例。
// index.html
<!DOCTYPE html>
<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, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover"
/>
<script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>
<title>播放rtsp</title>
</head>
<body>
<!-- 方式一:不给定宽度和高度,视频将会和视频源大小保持一致-->
<canvas id="canvas-1"></canvas>
<!-- 方式二: 只给定宽度或者高度,另外一个值将会自适应;整体比例与原视频一致 -->
<canvas id="canvas-2" style="width: 400px"></canvas>
<!-- 方式二、一: 可以自定义视频播放窗口的宽度和高度,会铺满,比例可能与原视频不一致了-->
<canvas id="canvas-2-1" style="width: 400px; height: 400px"></canvas>
<!-- 方式三:虽然设置了固定的宽高,但是视频还是会选择安宽度来自适应,比例与原视频保持一致 -->
<!-- 使用div + class="jsmpeg" + data-url的方式 -->
<div
class="jsmpeg"
id="canvas-3"
style="width: 400px; height: 400px; border: 1px solid red"
data-url="ws://localhost:9999/rtsp?url=cnRzcDovL3dvd3phZWMyZGVtby5zdHJlYW1sb2NrLm5ldC92b2QvbXA0OkJpZ0J1Y2tCdW5ueV8xMTVrLm1wNA=="
></div>
</body>
<script>
var rtsp1 =
'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
window.onload = () => {
// 将rtsp视频流地址进行btoa处理一下
new JSMpeg.Player('ws://localhost:9999/rtsp?url=' + btoa(rtsp1), {
canvas: document.getElementById('canvas-1')
})
// 将rtsp视频流地址进行btoa处理一下,还可以加一点参数
new JSMpeg.Player(
'ws://localhost:9999/rtsp?url=' +
btoa(rtsp1) +
'&brightness=0.2&saturation=1.8',
{
canvas: document.getElementById('canvas-2')
}
)
}
</script>
</html>
PS: 在页面中播放视频,需要依赖
jsmpeg.js
工具包,请记得引入jsmpeg.js
;
详细参考例子:https://github.com/Neveryu/rtsp2web/tree/master/example
6.3、参数说明
如上面的例子所示:在调用
new JSMpeg.Player()
时,第一个参数是接口地址拼接上rtsp
地址,我们还可以使用url
传参的方式传递更多的高阶参数。
参数 | 解释说明 |
---|---|
-s | 视频分辨率大小,不传即表示与源视频大小一致 传值示例: 1920x1080、1280x720、640x360 降低分辨率会降低清晰度 |
-b:v | 释义:码率,默认可以不设置,那就是使用源码率 传值示例:2000k、100k、1k 码率调小,这样其实也间接让文件变小了 码率调小,画质有可能会降低 |
scale | 缩放;间接的,也能调整视频的分辨率; 默认值: -1:-1;即与视频源大小保持一致; 功能与 -s 参数相似;但是可以只传一个宽度或者高度,另一个参数用 -1 表示 如: 1280:-1、-1:360,视频将会自适应显示 降低分辨率会降低清晰度 |
vcodec | 释义:视频编解码方式; 请确保你了解该参数的意义,默认可以不传 |
contrast | 释义:对比度,亮的地方更亮,暗的地方更暗。 取值范围[-100.0, 100.0],默认值为 0。建议不调整,或者在[-2.0, 2.0]范围内进行小的调整 |
brightness | 释义:亮度,如果觉得视频有点暗,可以进行小的调整。 取值范围: [-1.0, 1.0],默认值为 0。 |
saturation | 释义:饱和度,也就是说色彩更鲜艳,绿色更绿,蓝色更蓝...; 取值范围:[0, 3.0],默认值为 1。 |
gamma | 释义:关于显示器/视频的一个专业参数; 取值范围:0.1-10.0,默认值为 1。 这个参数很专业,建议不传,不修改。 |
一个传了很多参数的例子如下:
new JSMpeg.Player(
'ws://localhost:9999/rtsp?url=' +
btoa(rtsp1) +
'&scale=640:-1&-b:v=1k&brightness=0.2&saturation=1.8',
{
canvas: document.getElementById('canvas-2')
}
)
详细参考例子:https://github.com/Neveryu/rtsp2web/tree/master/example
正确的去除水印能减小 FFmpeg
性能开销,有效提高 FFMpeg
运行效率,提升视频播放质量,可支撑更多的视频;
如何去除水印,联系我;
wechat: miracle421354532
rtsp2web
默认自动转码音频并输出,你也可以根据配置设置,选择禁止音频输出。
在浏览器中,自动播放声音是突兀的,根据规则,需要用户在页面任意地方进行任意的点击操作,就有声音了;为了播放声音,请先点击页面一次。
rtsp2web
已经支持直接开启 wss
协议了;
【2023-04-05】基于[key 和 cert]的 SSL 证书验证通过;基于[pfx 和 passphrase]的 SSL 证书验证通过;
【2023-03-28】测试:在 linux
平台上能正确播放,并解决在 linux
平台上播放的问题。
【2023-03-17】优化视频播放的性能;增加配置项:视频质量(q)、传输协议(transportType)。
【2023-03-12】鲁棒性加强,调试播放稳定性。
【2023-02-21】断网重连??
【2023-02-20】默认支持播放声音;(禁止输出音频有利于减少带宽消耗)
【2023-02-15】rtsp2web
支持升级为 wss
了,默认是 ws
。基于 https
的站点不能请求 ws
,要升级为 wss
。
如果你会,你也可以用其他工具或者服务器反向代理,把
ws
代理为wss
。
【2023-02-14】测试将 rtsp2web
部署到服务器上,用 IP+端口来访问是可行的;
【2023-02-02】完善水印功能;全局可配置视频编解码器了,在某些情况下可能会用到吧;完善参数校验规则;验证了参数的校验规则。
【2023-01-12】优化了 rtsp2web
的启动,只需传入端口号即可;将更多的 ffmpeg
配置参数放到创建视频播放实例时传入,增强了视频播放的可配置性,每一个不同的 rtsp 视频源都可以单独配置。相较于之前全局 rtsp2web
只有一种配置,现在配置粒度更小,可行性更强。
如果出现了
3221225477
;这是 NodeJS 内核反馈的[违反了访问规定]的问题,一般这个问题只发生在windows
平台上,可以尝试的操作有:
- 1、执行
npm cache verify
,然后再试试; - 2、清除
npm
缓存:npm cache clean --force
,再试试; - 3、升级更新
nodejs
,安装稳定版,再试试; - 4、
rm -rf node_modules
,delete package-lock.json
,重新安装,再试试; - 5、[待验证]切换合适的
node
版本可解决;
你可以尝试配置
transportType
为其他值试试,'tcp'
,'udp'
是最常见的选择。
If you think rtsp2web help you. maybe you can donate a litter. 🍻🍻
如果你觉得这个项目帮助到了你,你可以帮作者买一杯果汁表示鼓励。 🍻🍻