rtsp2web 2.2.0 → 2.3.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 +144 -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,144 @@
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
+ ## RTSP2web 介绍
22
+ `rtsp2web` 是一个 `node.js` 包，你可以创建一个新项目引入它，并单独的运行它；也可以集成到已有的项目中（如果你知道怎么做的话）。
23
+
24
+ **这里以创建一个新项目运行它为例：**
25
+
26
+ 1、**创建一个新的文件夹（假如文件夹名叫：`rtsp_server`）**，*文件夹名称不能是 `rtsp2web`，这是 `npm` 的规则*。
27
+
28
+ 2、进入项目文件夹： `cd rtsp_server`
29
+
30
+ 3、安装 `rtsp2web` 包
31
+ ```
32
+ npm i rtsp2web
33
+ ```
34
+
35
+ 4、在 `rtsp_server` 文件夹中创建入口 `js` 文件（例如：`main.js`）
36
+ ```js
37
+ // main.js
38
+ const RTSP2web = require('rtsp2web')
39
+
40
+ // 服务端长连接占据的端口号；端口号可以自定义
41
+ let port = 9999
42
+
43
+ // 创建一个RTSP2web服务实例出来
44
+ new RTSP2web({
45
+ port
46
+ })
47
+ ```
48
+
49
+ 4.1、参数说明
50
+
51
+ | 参数 | 解释说明 |
52
+ | :-------: | :----------------------------------------------------------------------------------------------------------------------------: |
53
+ | port | 转码服务占用的端口号；（type：Number）<br/>可以不传；默认值：9999 |
54
+ | vcodec | 视频编解码方式；（type：String）<br/>默认值：'mpeg1video'<br/>请确保你了解该参数的意义，默认可以不传 |
55
+
56
+ 5、 运行 `node main.js`，启动视频流转码服务
57
+
58
+ > 当然，你也可以选择你习惯的进程管理工具来启动它。如：pm2 之类的工具。
59
+
60
+ **6、 在页面中播放视频**
61
+
62
+ 6.1、 在你的页面中需要引入 `jsmpeg.js`。
63
+
64
+ 6.2、 一个完整的前端页面例子代码如下：
65
+ > 1、需要canvas视频播放容器；2、rtsp源地址；3、new一个播放实例。
66
+
67
+ ```html
68
+ // index.html
69
+ <!DOCTYPE html>
70
+ <html lang="en">
71
+ <head>
72
+ <meta charset="utf-8" />
73
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
74
+ <meta
75
+ name="viewport"
76
+ content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover"
77
+ />
78
+ <script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>
79
+ <title>播放rtsp</title>
80
+ </head>
81
+ <body>
82
+ <canvas id="canvas_1" style="width: 600px; height: 600px;"></canvas>
83
+ <canvas id="canvas_2" style="width: 600px; height: 600px;"></canvas>
84
+ </body>
85
+ <script>
86
+ var rtsp1 =
87
+ 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
88
+ var rtsp2 =
89
+ 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
90
+ window.onload = () => {
91
+ // 将rtsp视频流地址进行btoa处理一下
92
+ new JSMpeg.Player('ws://localhost:9999/rtsp?url='+btoa(rtsp1), {
93
+ canvas : document.getElementById('canvas_1')
94
+ })
95
+ new JSMpeg.Player('ws://localhost:9999/rtsp?url='+btoa(rtsp2)+'&brightness=0.2&saturation=1.8', {
96
+ canvas : document.getElementById('canvas_2')
97
+ })
98
+ }
99
+ </script>
100
+ </html>
101
+ ```
102
+
103
+ > PS： 在页面中播放视频，需要依赖 `jsmpeg.js` 工具包，请记得引入 `jsmpeg.js`。
104
+
105
+ 详细参考例子：[https://github.com/Neveryu/rtsp2web/tree/master/example](https://github.com/Neveryu/rtsp2web/tree/master/example)
106
+
107
+ 6.3、参数说明
108
+ > 如上面的例子所示：在调用 `new JSMpeg.Player()` 时，第一个参数是接口地址拼接上`rtsp`地址，我们还可以使用 `url` 传参的方式传递更多的高阶参数。
109
+
110
+ | 参数 | 解释说明 |
111
+ | :-------: | :----------------------------------------------------------------------------------------------------------------------------: |
112
+ | -s | 视频分辨率大小，不传即表示与源视频大小一致<br> 传值示例： 1920x1080、1280x720、640x360 <br> 降低分辨率会降低清晰度 |
113
+ | -b:v | 释义：码率，默认可以不设置，那就是使用源码率<br>传值示例：2000k、100k、1k<br>码率调小，这样其实也间接让文件变小了<br>码率调小，画质有可能会降低|
114
+ | scale | 缩放；间接的，也能调整视频的分辨率；<br> 默认值： -1:-1；即与视频源大小保持一致；<br>功能与 -s 参数相似；但是可以只传一个宽度或者高度，另一个参数用 -1 表示<br>如： 1280:-1、-1:360，视频将会自适应现实<br>降低分辨率会降低清晰度 |
115
+ | vcodec/codec:v/-c:v | 释义：视频编解码方式；<br>请确保你了解该参数的意义，默认可以不传 |
116
+ | contrast | 释义：对比度，亮的地方更亮，暗的地方更暗。<br>取值范围[-100.0, 100.0]，默认值为0。建议不调整，或者在[-2.0, 2.0]范围内进行小的调整 |
117
+ | brightness | 释义：亮度，如果觉得视频有点暗，可以进行小的调整。<br>取值范围： [-1.0, 1.0]，默认值为0。|
118
+ | saturation | 释义：饱和度，也就是说色彩更鲜艳，绿色更绿，蓝色更蓝...；<br>取值范围：[0, 3.0]，默认值为1。 |
119
+ | gamma | 释义：关于显示器/视频的一个专业参数；<br>取值范围：0.1-10.0，默认值为1。<br>这个参数很专业，建议不传，不修改。|
120
+
121
+ 一个传了很多参数的例子如下：
122
+ ```js
123
+ new JSMpeg.Player('ws://localhost:9999/rtsp?url='+btoa(rtsp2)+'&scale=640:-1&-b:v=1k&brightness=0.2&saturation=1.8', {
124
+ canvas : document.getElementById('canvas_2')
125
+ })
126
+ ```
127
+
128
+ 详细参考例子：[https://github.com/Neveryu/rtsp2web/tree/master/example](https://github.com/Neveryu/rtsp2web/tree/master/example)
129
+
130
+ # change log [更新日志]
131
+ [2023-02-02]水印；全局可配置视频编解码器了，在某些情况下可能会用到吧；完善参数校验规则；验证了参数的校验规则。
132
+
133
+ [2023-01-12]优化了 `rtsp2web` 的启动，只需传入端口号即可；将更多的 `ffmpeg` 配置参数放到创建视频播放实例时传入，增强了视频播放的可配置性，每一个不同的rtsp视频源都可以单独配置。相较于之前全局 `rtsp2web` 只有一种配置，现在配置粒度更小，可行性更强。
134
+
135
+
136
+ # donate
137
+
138
+ If you think rtsp2web help you. maybe you can donate a litter. :beers::beers:
139
+
140
+ 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励。 :beers::beers:
141
+
142
+ [donate link](https://neveryu.github.io/reward/index.html)
143
+
144
+ ![](https://neveryu.github.io/reward/wechat-alipay.png)