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