rtsp2web 2.4.6 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -34
- package/dist/rtsp2web.js +3 -3
- package/dist/rtsp2web.js.map +1 -1
- package/dist/rtsp2web.min.js +3 -3
- package/dist/rtsp2web.min.js.map +1 -1
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -1,40 +1,45 @@
|
|
|
1
1
|
# rtsp2web
|
|
2
2
|
|
|
3
|
-
`rtsp2web`
|
|
3
|
+
`rtsp2web` 是一个提供在 `web` 页面中可以直接播放 `rtsp` 视频流解决方案的工具。
|
|
4
4
|
|
|
5
5
|
**【前言】**
|
|
6
|
+
|
|
6
7
|
> 在项目的 Github 代码仓库中，有一个 [refer](./refer) 目录， 它是一个小的独立的 `demo` 程序，学习它对你有很大的帮助（都有注释的）；
|
|
7
|
-
>
|
|
8
|
+
>
|
|
8
9
|
> 当然，如果你现在只想快速的解决 `rtsp` 视频流在 `web` 页面中的播放问题，你可以跳过本段话；继续往下阅读文档。
|
|
9
10
|
|
|
10
11
|
# How to use（如何在你的项目中使用这个工具）
|
|
11
12
|
|
|
12
13
|
## 准备工作
|
|
14
|
+
|
|
13
15
|
FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。可以轻易地实现多种视频格式之间的相互转换。
|
|
14
16
|
|
|
15
|
-
FFmpeg 的用户有Google，腾讯视频，Youtube，优酷，爱奇艺，土豆等。
|
|
17
|
+
FFmpeg 的用户有 Google，腾讯视频，Youtube，优酷，爱奇艺，土豆等。
|
|
16
18
|
|
|
17
19
|
**确保在你要运行 rtsp2web 的机器上已经安装了 FFmpeg。**
|
|
18
20
|
|
|
19
|
-
>
|
|
21
|
+
> _有问题，可以联系我_
|
|
20
22
|
|
|
21
23
|
<br>
|
|
22
24
|
|
|
23
25
|
## RTSP2web 介绍
|
|
26
|
+
|
|
24
27
|
`rtsp2web` 是一个 `node.js` 包，你可以创建一个新项目引入它，并单独的运行它；也可以集成到已有的项目中（如果你知道怎么做的话）。
|
|
25
28
|
|
|
26
29
|
**这里以创建一个新项目运行它为例：**
|
|
27
30
|
|
|
28
|
-
1、**创建一个新的文件夹（假如文件夹名叫：`rtsp_server
|
|
31
|
+
1、**创建一个新的文件夹（假如文件夹名叫：`rtsp_server`）**，_文件夹名称不能是 `rtsp2web`，这是 `npm` 的规则_。
|
|
29
32
|
|
|
30
33
|
2、进入项目文件夹： `cd rtsp_server`
|
|
31
34
|
|
|
32
35
|
3、安装 `rtsp2web` 包
|
|
36
|
+
|
|
33
37
|
```
|
|
34
38
|
npm i rtsp2web
|
|
35
39
|
```
|
|
36
40
|
|
|
37
41
|
4、在 `rtsp_server` 文件夹中创建入口 `js` 文件（例如：`main.js`）
|
|
42
|
+
|
|
38
43
|
```js
|
|
39
44
|
// main.js
|
|
40
45
|
const RTSP2web = require('rtsp2web')
|
|
@@ -50,9 +55,9 @@ new RTSP2web({
|
|
|
50
55
|
|
|
51
56
|
4.1、参数说明
|
|
52
57
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
58
|
+
| 参数 | 解释说明 |
|
|
59
|
+
| :----: | :--------------------------------------------------------------------------------------------------: |
|
|
60
|
+
| port | 转码服务占用的端口号；（type：Number）<br/>可以不传；默认值：9999 |
|
|
56
61
|
| vcodec | 视频编解码方式；（type：String）<br/>默认值：'mpeg1video'<br/>请确保你了解该参数的意义，默认可以不传 |
|
|
57
62
|
|
|
58
63
|
5、 运行 `node main.js`，启动视频流转码服务
|
|
@@ -64,7 +69,8 @@ new RTSP2web({
|
|
|
64
69
|
6.1、 在你的页面中需要引入 `jsmpeg.js`。
|
|
65
70
|
|
|
66
71
|
6.2、 一个完整的前端页面例子代码如下：
|
|
67
|
-
|
|
72
|
+
|
|
73
|
+
> 1、需要 canvas 视频播放容器；2、rtsp 源地址；3、new 一个播放实例。
|
|
68
74
|
|
|
69
75
|
```html
|
|
70
76
|
// index.html
|
|
@@ -81,9 +87,10 @@ new RTSP2web({
|
|
|
81
87
|
<title>播放rtsp</title>
|
|
82
88
|
</head>
|
|
83
89
|
<body>
|
|
84
|
-
<!--
|
|
90
|
+
<!-- 自定义视频播放窗口的宽度和高度 -->
|
|
85
91
|
<canvas id="canvas_1" style="width: 640px; height: 360px;"></canvas>
|
|
86
|
-
|
|
92
|
+
<!-- 只给定宽度或者高度，另外一个值将会自适应 -->
|
|
93
|
+
<canvas id="canvas_2" style="width: 600px;"></canvas>
|
|
87
94
|
</body>
|
|
88
95
|
<script>
|
|
89
96
|
var rtsp1 =
|
|
@@ -92,40 +99,52 @@ new RTSP2web({
|
|
|
92
99
|
'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
|
|
93
100
|
window.onload = () => {
|
|
94
101
|
// 将rtsp视频流地址进行btoa处理一下
|
|
95
|
-
new JSMpeg.Player('ws://localhost:9999/rtsp?url='+btoa(rtsp1), {
|
|
96
|
-
canvas
|
|
97
|
-
})
|
|
98
|
-
new JSMpeg.Player('ws://localhost:9999/rtsp?url='+btoa(rtsp2)+'&brightness=0.2&saturation=1.8', {
|
|
99
|
-
canvas : document.getElementById('canvas_2')
|
|
102
|
+
new JSMpeg.Player('ws://localhost:9999/rtsp?url=' + btoa(rtsp1), {
|
|
103
|
+
canvas: document.getElementById('canvas_1')
|
|
100
104
|
})
|
|
105
|
+
new JSMpeg.Player(
|
|
106
|
+
'ws://localhost:9999/rtsp?url=' +
|
|
107
|
+
btoa(rtsp2) +
|
|
108
|
+
'&brightness=0.2&saturation=1.8',
|
|
109
|
+
{
|
|
110
|
+
canvas: document.getElementById('canvas_2')
|
|
111
|
+
}
|
|
112
|
+
)
|
|
101
113
|
}
|
|
102
114
|
</script>
|
|
103
115
|
</html>
|
|
104
116
|
```
|
|
105
117
|
|
|
106
|
-
> PS： 在页面中播放视频，需要依赖 `jsmpeg.js` 工具包，请记得引入 `jsmpeg.js`；
|
|
118
|
+
> PS： 在页面中播放视频，需要依赖 `jsmpeg.js` 工具包，请记得引入 `jsmpeg.js`；
|
|
107
119
|
|
|
108
120
|
详细参考例子：[https://github.com/Neveryu/rtsp2web/tree/master/example](https://github.com/Neveryu/rtsp2web/tree/master/example)
|
|
109
121
|
|
|
110
122
|
6.3、参数说明
|
|
123
|
+
|
|
111
124
|
> 如上面的例子所示：在调用 `new JSMpeg.Player()` 时，第一个参数是接口地址拼接上`rtsp`地址，我们还可以使用 `url` 传参的方式传递更多的高阶参数。
|
|
112
125
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
| vcodec/codec:v/-c:v |
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
|
|
|
122
|
-
|
|
|
126
|
+
| 参数 | 解释说明 |
|
|
127
|
+
| :-----------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
128
|
+
| -s | 视频分辨率大小，不传即表示与源视频大小一致<br> 传值示例： 1920x1080、1280x720、640x360 <br> 降低分辨率会降低清晰度 |
|
|
129
|
+
| -b:v | 释义：码率，默认可以不设置，那就是使用源码率<br>传值示例：2000k、100k、1k<br>码率调小，这样其实也间接让文件变小了<br>码率调小，画质有可能会降低 |
|
|
130
|
+
| scale | 缩放；间接的，也能调整视频的分辨率；<br> 默认值： -1:-1；即与视频源大小保持一致；<br>功能与 -s 参数相似；但是可以只传一个宽度或者高度，另一个参数用 -1 表示<br>如： 1280:-1、-1:360，视频将会自适应显示<br>降低分辨率会降低清晰度 |
|
|
131
|
+
| vcodec/codec:v/-c:v | 释义：视频编解码方式；<br>请确保你了解该参数的意义，默认可以不传 |
|
|
132
|
+
| contrast | 释义：对比度，亮的地方更亮，暗的地方更暗。<br>取值范围[-100.0, 100.0]，默认值为 0。建议不调整，或者在[-2.0, 2.0]范围内进行小的调整 |
|
|
133
|
+
| brightness | 释义：亮度，如果觉得视频有点暗，可以进行小的调整。<br>取值范围： [-1.0, 1.0]，默认值为 0。 |
|
|
134
|
+
| saturation | 释义：饱和度，也就是说色彩更鲜艳，绿色更绿，蓝色更蓝...；<br>取值范围：[0, 3.0]，默认值为 1。 |
|
|
135
|
+
| gamma | 释义：关于显示器/视频的一个专业参数；<br>取值范围：0.1-10.0，默认值为 1。<br>这个参数很专业，建议不传，不修改。 |
|
|
123
136
|
|
|
124
137
|
一个传了很多参数的例子如下：
|
|
138
|
+
|
|
125
139
|
```js
|
|
126
|
-
new JSMpeg.Player(
|
|
127
|
-
|
|
128
|
-
|
|
140
|
+
new JSMpeg.Player(
|
|
141
|
+
'ws://localhost:9999/rtsp?url=' +
|
|
142
|
+
btoa(rtsp2) +
|
|
143
|
+
'&scale=640:-1&-b:v=1k&brightness=0.2&saturation=1.8',
|
|
144
|
+
{
|
|
145
|
+
canvas: document.getElementById('canvas_2')
|
|
146
|
+
}
|
|
147
|
+
)
|
|
129
148
|
```
|
|
130
149
|
|
|
131
150
|
详细参考例子：[https://github.com/Neveryu/rtsp2web/tree/master/example](https://github.com/Neveryu/rtsp2web/tree/master/example)
|
|
@@ -133,25 +152,32 @@ new JSMpeg.Player('ws://localhost:9999/rtsp?url='+btoa(rtsp2)+'&scale=640:-1&-b:
|
|
|
133
152
|
<br>
|
|
134
153
|
|
|
135
154
|
# 去水印
|
|
136
|
-
|
|
155
|
+
|
|
156
|
+
去除水印能减小 `FFmpeg` 性能开销，有效提高 `FFMpeg` 运行效率，提升视频播放质量，可支撑更多的视频；
|
|
137
157
|
|
|
138
158
|
如何去除水印，[联系我](https://neveryu.blog.csdn.net/article/details/124124137)；
|
|
139
159
|
|
|
140
160
|
wechat： miracle421354532
|
|
141
161
|
|
|
142
162
|
# WSS
|
|
163
|
+
|
|
143
164
|
`rtsp2web` 支持直接开启 `wss` 协议；
|
|
144
165
|
|
|
145
166
|
# change log [更新日志]
|
|
167
|
+
|
|
168
|
+
【2023-02-21】断网重连？？
|
|
169
|
+
|
|
170
|
+
【2023-02-20】默认支持播放声音；（禁止输出音频有利于减少带宽消耗）
|
|
171
|
+
|
|
146
172
|
【2023-02-15】支持升级为 `wss` 了，默认是 `ws`。基于 `https` 的站点不能请求 `ws`，要升级为 `wss`。
|
|
147
|
-
|
|
173
|
+
|
|
174
|
+
> _你也可以用其他工具或者服务器来反向代理一把。_
|
|
148
175
|
|
|
149
176
|
【2023-02-14】测试将 `rtsp2web` 部署到服务器上，用 IP+端口来访问是可行的；
|
|
150
177
|
|
|
151
178
|
【2023-02-02】完善水印功能；全局可配置视频编解码器了，在某些情况下可能会用到吧；完善参数校验规则；验证了参数的校验规则。
|
|
152
179
|
|
|
153
|
-
【2023-01-12】优化了 `rtsp2web` 的启动，只需传入端口号即可；将更多的 `ffmpeg` 配置参数放到创建视频播放实例时传入，增强了视频播放的可配置性，每一个不同的rtsp视频源都可以单独配置。相较于之前全局 `rtsp2web` 只有一种配置，现在配置粒度更小，可行性更强。
|
|
154
|
-
|
|
180
|
+
【2023-01-12】优化了 `rtsp2web` 的启动，只需传入端口号即可；将更多的 `ffmpeg` 配置参数放到创建视频播放实例时传入，增强了视频播放的可配置性，每一个不同的 rtsp 视频源都可以单独配置。相较于之前全局 `rtsp2web` 只有一种配置，现在配置粒度更小，可行性更强。
|
|
155
181
|
|
|
156
182
|
# donate
|
|
157
183
|
|