167 lines
8.0 KiB
Markdown
167 lines
8.0 KiB
Markdown
# rtsp2web
|
||
|
||
`rtsp2web` 是一个为你提供在 `web` 页面中可以直接播放 `rtsp` 视频流解决方案的工具。
|
||
|
||
**【前言】**
|
||
> 在项目的 Github 代码仓库中，有一个 [refer](./refer) 目录， 它是一个小的独立的 `demo` 程序，学习它对你有很大的帮助（都有注释的）；
|
||
>
|
||
> 当然，如果你现在只想快速的解决 `rtsp` 视频流在 `web` 页面中的播放问题，你可以跳过本段话；继续往下阅读文档。
|
||
|
||
# How to use（如何在你的项目中使用这个工具）
|
||
|
||
## 准备工作
|
||
FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。可以轻易地实现多种视频格式之间的相互转换。
|
||
|
||
FFmpeg 的用户有Google，腾讯视频，Youtube，优酷，爱奇艺，土豆等。
|
||
|
||
**确保在你要运行 rtsp2web 的机器上已经安装了 FFmpeg。**
|
||
|
||
> *有问题，可以联系我*
|
||
|
||
<br>
|
||
|
||
## RTSP2web 介绍
|
||
`rtsp2web` 是一个 `node.js` 包，你可以创建一个新项目引入它，并单独的运行它；也可以集成到已有的项目中（如果你知道怎么做的话）。
|
||
|
||
**这里以创建一个新项目运行它为例：**
|
||
|
||
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')
|
||
|
||
// 服务端长连接占据的端口号；端口号可以自定义
|
||
let port = 9999
|
||
|
||
// 创建一个RTSP2web服务实例出来
|
||
new RTSP2web({
|
||
port
|
||
})
|
||
```
|
||
|
||
4.1、参数说明
|
||
|
||
| 参数 | 解释说明 |
|
||
| :-------: | :----------------------------------------------------------------------------------------------------------------------------: |
|
||
| port | 转码服务占用的端口号；（type：Number）<br/>可以不传；默认值：9999 |
|
||
| vcodec | 视频编解码方式；（type：String）<br/>默认值：'mpeg1video'<br/>请确保你了解该参数的意义，默认可以不传 |
|
||
|
||
5、 运行 `node main.js`，启动视频流转码服务
|
||
|
||
> 当然，你也可以选择你习惯的进程管理工具来启动它。如：pm2 之类的工具。
|
||
|
||
**6、 在页面中播放视频**
|
||
|
||
6.1、 在你的页面中需要引入 `jsmpeg.js`。
|
||
|
||
6.2、 一个完整的前端页面例子代码如下：
|
||
> 1、需要canvas视频播放容器；2、rtsp源地址；3、new一个播放实例。
|
||
|
||
```html
|
||
// 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 宽高比例尽量与视频比例保持一致。 -->
|
||
<canvas id="canvas_1" style="width: 640px; height: 360px;"></canvas>
|
||
<canvas id="canvas_2" style="width: 640px; height: 360px;"></canvas>
|
||
</body>
|
||
<script>
|
||
var rtsp1 =
|
||
'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
|
||
var rtsp2 =
|
||
'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')
|
||
})
|
||
new JSMpeg.Player('ws://localhost:9999/rtsp?url='+btoa(rtsp2)+'&brightness=0.2&saturation=1.8', {
|
||
canvas : document.getElementById('canvas_2')
|
||
})
|
||
}
|
||
</script>
|
||
</html>
|
||
```
|
||
|
||
> PS： 在页面中播放视频，需要依赖 `jsmpeg.js` 工具包，请记得引入 `jsmpeg.js`； `canvas` 宽高比例尽量与视频比例保持一致。
|
||
|
||
详细参考例子：[https://github.com/Neveryu/rtsp2web/tree/master/example](https://github.com/Neveryu/rtsp2web/tree/master/example)
|
||
|
||
6.3、参数说明
|
||
> 如上面的例子所示：在调用 `new JSMpeg.Player()` 时，第一个参数是接口地址拼接上`rtsp`地址，我们还可以使用 `url` 传参的方式传递更多的高阶参数。
|
||
|
||
| 参数 | 解释说明 |
|
||
| :-------: | :----------------------------------------------------------------------------------------------------------------------------: |
|
||
| -s | 视频分辨率大小，不传即表示与源视频大小一致<br> 传值示例： 1920x1080、1280x720、640x360 <br> 降低分辨率会降低清晰度 |
|
||
| -b:v | 释义：码率，默认可以不设置，那就是使用源码率<br>传值示例：2000k、100k、1k<br>码率调小，这样其实也间接让文件变小了<br>码率调小，画质有可能会降低|
|
||
| scale | 缩放；间接的，也能调整视频的分辨率；<br> 默认值： -1:-1；即与视频源大小保持一致；<br>功能与 -s 参数相似；但是可以只传一个宽度或者高度，另一个参数用 -1 表示<br>如： 1280:-1、-1:360，视频将会自适应显示<br>降低分辨率会降低清晰度 |
|
||
| vcodec/codec:v/-c:v | 释义：视频编解码方式；<br>请确保你了解该参数的意义，默认可以不传 |
|
||
| contrast | 释义：对比度，亮的地方更亮，暗的地方更暗。<br>取值范围[-100.0, 100.0]，默认值为0。建议不调整，或者在[-2.0, 2.0]范围内进行小的调整 |
|
||
| brightness | 释义：亮度，如果觉得视频有点暗，可以进行小的调整。<br>取值范围： [-1.0, 1.0]，默认值为0。|
|
||
| saturation | 释义：饱和度，也就是说色彩更鲜艳，绿色更绿，蓝色更蓝...；<br>取值范围：[0, 3.0]，默认值为1。 |
|
||
| gamma | 释义：关于显示器/视频的一个专业参数；<br>取值范围：0.1-10.0，默认值为1。<br>这个参数很专业，建议不传，不修改。|
|
||
|
||
一个传了很多参数的例子如下：
|
||
```js
|
||
new JSMpeg.Player('ws://localhost:9999/rtsp?url='+btoa(rtsp2)+'&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](https://github.com/Neveryu/rtsp2web/tree/master/example)
|
||
|
||
<br>
|
||
|
||
# 去水印
|
||
去除水印能有效提高 `FFMpeg` 运行效率，提升视频播放质量，可支撑更多的视频；
|
||
|
||
如何去除水印，[联系我](https://neveryu.blog.csdn.net/article/details/124124137)；
|
||
|
||
wechat： miracle421354532
|
||
|
||
# WSS
|
||
`rtsp2web` 支持直接开启 `wss` 协议；
|
||
|
||
# change log [更新日志]
|
||
【2023-02-20】默认支持播放声音；断网重连？？
|
||
|
||
【2023-02-15】支持升级为 `wss` 了，默认是 `ws`。基于 `https` 的站点不能请求 `ws`，要升级为 `wss`。
|
||
> *你也可以用其他工具或者服务器来反向代理一把。*
|
||
|
||
【2023-02-14】测试将 `rtsp2web` 部署到服务器上，用 IP+端口来访问是可行的；
|
||
|
||
【2023-02-02】完善水印功能；全局可配置视频编解码器了，在某些情况下可能会用到吧；完善参数校验规则；验证了参数的校验规则。
|
||
|
||
【2023-01-12】优化了 `rtsp2web` 的启动，只需传入端口号即可；将更多的 `ffmpeg` 配置参数放到创建视频播放实例时传入，增强了视频播放的可配置性，每一个不同的rtsp视频源都可以单独配置。相较于之前全局 `rtsp2web` 只有一种配置，现在配置粒度更小，可行性更强。
|
||
|
||
|
||
# donate
|
||
|
||
If you think rtsp2web help you. maybe you can donate a litter. :beers::beers:
|
||
|
||
如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励。 :beers::beers:
|
||
|
||
[donate link](https://neveryu.github.io/reward/index.html)
|
||
|
||
|