node通过ffmpeg将多路rtsp、rtmp流媒体转换为多端口websocket流供前端播放 ...

node通过ffmpeg将多路rtsp、rtmp流媒体转换为多端口websocket流供前端播放


  
1 安装node

node官网下载安装：https://nodejs.org/zh-cn/download/prebuilt-installer
2 安装ffmpeg

ffmpeg官网下载：https://ffmpeg.org/
github下载：https://github.com/FFmpeg/FFmpeg
3 【重要】使用node搭建rtsp、rtmp转码服务器（必须要提前安装ffmpeg）

1. // 初始化项目并安装插件node-rtsp-stream
2. npm init -y
3. npm install express
4. npm install node-rtsp-stream
5. npm install get-port

复制代码

新建index.js作为主文件，代码如下

1. const Stream = require("node-rtsp-stream"); // 引入node-rtsp-stream模块,rtsp/rtmp转码工具
2. const express = require("express"); // 引入express模块，http模块封装了http协议
3. const getPort = require("get-port");
4. const app = express(); // 创建一个express实例,提供http服务
5. /* **************************************************http-config************************************************ */
7. // 设置跨域资源共享
8. app.use((req, res, next) => {
9.   res.header("Access-Control-Allow-Origin", "*"); // 允许任何源
10.   res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
11.   res.header(
12.     "Access-Control-Allow-Headers",
13.     "Origin, X-Requested-With, Content-Type, Accept"
14.   );
15.   next();
16. });
17. app.use((req, res, next) => {
18.   res.setHeader(
19.     "Content-Security-Policy",
20.     "default-src https: 'self'; script-src https: 'self' 'unsafe-inline' 'unsafe-eval' http://trusted-domain.com;"
21.   );
22.   next();
23. });
24. /* **************************************************var************************************************ */
25. // ws流使用端口列表
26. let PostList = [];
27. /* **************************************************api************************************************ */
28. /* 关闭组件进程未关闭 */
29. // Name of the stream, used to identify it in the API
30. // 定义接口
33. /* 清除某一端口任务 */
34. app.get("/cleraWsPort", (req, res) => {
35.   let query = req.query;
36.   if (PostList.length == 0) {
37.     res.send({ status: "success", message: "未找到该端口" });
38.     return;
39.   }
40.   PostList.forEach((element, index) => {
41.     if (element.port == query.port) {
42.       element.stream.stop();
43.       PostList.splice(index, 1);
44.       res.send({ status: "success", message: "关闭成功：" + port });
45.     } else {
46.       res.send({ status: "success", message: "未找到该端口" });
47.     }
48.   });
49. });
51. /* 清空所有端口任务 */
52. app.get("/cleraWsAll", async (req, res) => {
53.   for (let index = 0; index < PostList.length; index++) {
54.     await PostList[index].stream.stop();
55.   }
56.   PostList = [];
57.   console.log("PostList->>>", PostList);
58.   res.send({ status: "success", message: "已清空所有端口" });
59. });
61. /* rtmp、rtsp转weboscket流 */
62. app.get("/rtmpToWebsocket", (req, res) => {
63.   let query = req.query; // 获取请求参数
64.   // 获取该端口是否已经存在，存在则返回该端口，不存在则创建可用端口
65.   for (let index = 0; index < PostList.length; index++) {
66.     const element = PostList[index];
67.     if (element.name == query.name) {
68.       /* 存在则返回该端口 */
69.       res.send({ port: element.port, message: "已存在该端口" });
70.       return;
71.     }
72.   }
73.   // 该视频流为发现，获取可用端口，并进行发布websocket流
74.   getPort({ port: getPort.makeRange(20000, 21000) }) // 获取可用端口
75.     .then((port) => {
76.       try {
77.         // log
78.         console.log("rtmpUrl->>>", query.rtmpUrl);
79.         console.log("port->>>", port);
80.         // 创建一个Stream实例,将rtmpUrl转换为websocket流并发布到（getport）指定的端口
81.         let stream = new Stream({
82.           name: "name",
83.           streamUrl: query.rtmpUrl, //query.rtmpUrl,
84.           wsPort: port, //18965,随机端口号
85.           wsPath: "/" + query.name, //暂时无效，如果需要使用效果需要修改videoStram.js中new WebSocket函数
86.           /* ffmpegOptions，其他配置 */
87.           ffmpegOptions: {
88.             // options ffmpeg flags
89.             "-stats": "", //
90.             "-r": "60", //key，帧率
91.             "-s": "1920x1080", //帧像素
92.           },
93.         });
95.         PostList.push({ name: query.name, port, stream });
96.       } catch (error) {
97.         console.log("error->>>", error);
98.       }
100.       res.send({ port, message: "创建成功" });
101.     })
102.     .catch((err) => {
103.       console.error(`Error: ${err}`);
104.     });
105. });
107. /* ************************************************http_listen************************************************ */
108. // 监听3000端口
109. app.listen(9001, () => {
110.   console.log("Server running on http://localhost:9001");
111. });

复制代码

1. // 执行命令为
2. node ./index.js

复制代码

传参：
rtmpUrl：‘rtmp或rtsp流媒体路径’
name：‘自己随机定义，唯一标识，name重复的rtmp或rtsp不会举行转码’
哀求样例：
http://127.0.0.1:9001/rtmpToWebsocket?rtmpUrl=‘rtmp://xxx’&name=‘name1’
回参样例：
{
port：‘20000’,
message: “创建成功”
}
可以通过前端播放ws://127.0.0.1:20000了
4 前端（vue3）播放websocket流

1. // 安装jsmpeg-player
2. npm i jsmpeg-player
3. npm i axios

复制代码

1. <script setup>
2. // jsmpeg播放器
3. import JSMpeg from 'jsmpeg-player'
4. import axios from 'axios'
5. ...
6. axios.get(`http://127.0.0.1:9001/rtmpToWebsocket?rtmpUrl='rtmp://xxx'&name='name1'`).then((res) => {
7.         wsport = res.data.port
8.                 new JSMpeg.Player(`ws://127.0.0.1:` + wsport + `/`, {
9.         bufferSize: 8,
10.         videoBufferSize: 20484096,
11.         canvas: document.getElementById('video')
12.    })
13. })
15. ...
16. </script>
17. <template>
18. <canvas :id="video" style="width: 100%; height: 100%"></canvas>
19. </template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。