实现在web页面中直接播放rtsp视频流

比眉伴天荒 2023-10-13 12:38 96阅读 0赞

轻松实现在web页面中直接播放rtsp视频流  
写在前面  
实现  
介绍  
支持的视频厂商  
如何使用  
准备ffmpeg  
运行rtsp2web  
参数说明（在 \`new RTSP2web\` 时，可配置的参数如下）：  
前端代码  
参数说明  
支持 flv.js  
重要说明  
课外知识  
写在前面  
我之前研究在 web 中直接播放 rtsp 视频流时，写过一篇文章：【前端】rtsp 与 rtmp 视频流的播放方法。阅读 这篇文章 对你的学习有很大帮助。在文章中我有过详细的分析和解读，并给出了 结论：

【要想在 web 中实时播放 rtsp 视频流：借助服务端拉流转码将是必要的操作。】

实现  
我用 node.js 实现了拉流转码的功能，并将其打包成 rtsp2web 发布到了 npm 上。

rtsp2web 使用方便、快捷、高效，对前端开发人员来说，非常的友好。

介绍  
rtsp2web 是一个依赖 ffmpeg，能实时将传入的 rtsp 视频流转码成图像数据并通过 ws 推送到前端的智能工具包。

前端页面借助 jsmpeg.js 就可以很轻松的实现播放啦~

而且 rtsp2web 还有以下特点：

高性能，配置丰富。  
并发，支持同时播放多路视频。  
合并同源，多个视频窗口同时播放同一个rtsp视频源时，只会创建一个转码进程，不会创建多个。  
智能释放资源，智能检测当前没有在使用的转码进程，将其关闭，并释放电脑资源。  
上手简单，提供的示例代码完整可运行，无需繁琐复杂的技术负担，直接运行代码，快速解决视频流播放的问题；  
延时非常低，视频流稳定，几乎是实时的，满足任何需求；不花钱，采用开源框架，无商业风险；  
别的收费平台，需要暴露 RTSP 视频流链接给收费平台，rtsp2web 无需您提供 RTSP 视频流，您的保密和安全牢牢掌握在您手中；  
高效兼容，大多数 nvr 或 ipc 或摄像头平台都支持输出 RTSP 视频流，rtsp2web 把 RTSP 视频流转换到页面可播放，减少对接工作，无论您是什么摄像头；  
支持前端使用 jsmpeg.js、flv.js 等播放器，满足不同技术栈团队使用；  
删繁就简，无需插件就可在浏览器显示视频画面，兼容各大浏览器厂商；  
省时省力，同一页面可以播放不同厂家的视频，无需任何额外操作，轻松支持多路视频同时播放；  
可以在公网上部署使用，但也可能因为你们公司网络的设置原因，你会面临一点小问题：还要学习网络穿透打洞，服务器部署能力，流量消耗，wss 等。  
支持的视频厂商  
海康、海康 NVR、大华平台、萤石、宇视、中天信科达、东方网力、天地伟业等。

如何使用  
使用 rtsp2web 是简单的；你只需：

准备ffmpeg  
首先，你得确保你的电脑上安装了 ffmpeg。 我已经将我的 windows 64位电脑上使用的 ffmpeg 上传到了资源库中，如果你的电脑上没有，你可以点击下载并解压安装。（不会可以找我）

安装成功以后，你重新打开一个命令行终端，输入：ffmpeg -h，如果能输出 ffmpeg 的相关信息出来，则证明你的电脑安装 ffmpeg 成功。

运行rtsp2web  
创建一个空的目录（目录名不能是rtsp2web），进入目录后，依次运行下面的命令：

npm init --yes
    npm i rtsp2web

创建 `index.js`，内容如下：

// index.js
    
    const RTSP2web = require('rtsp2web')
    
    // 服务端长连接占据的端口号；端口号可以自定义
    let port = 9999
    
    new RTSP2web({
      port
    })

运行命令： `node index.js` 启动视频流转码服务，即可。

> 当然，你也可以选择你习惯的进程管理工具来启动它。如：pm2 之类的工具。

到此，你的视频转码服务就已经运行起来了。

#### 参数说明（在 `new RTSP2web` 时，可配置的参数如下）： ####

![b167802ea5ed42b78eb307142834eca7.png][]

前端代码

<!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 id="canvas-1" style="width: 600px;"></canvas>
    </body>
    <script>
        var rtsp = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
      window.onload = () => {
        // 将rtsp视频流地址进行btoa处理一下
        new JSMpeg.Player("ws://localhost:9999/rtsp?url="+btoa(rtsp), {
           canvas: document.getElementById("canvas-1")
        })
      }
    </script>
    </html>

不管你的前端是用原生的 html 还是在 React、Vue 等框架中使用，操作起来都非常简单。

1、你需要先在全局的模板 html 文件头部引入 jsmpeg.js 或者 jsmpeg.min.js；

2、创建一个 canvas 容器，用来播放视频的；

3、创建视频源播放实例：

var rtsp = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
    // 将rtsp视频流地址进行btoa处理一下
    new JSMpeg.Player("ws://localhost:9999/rtsp?url="+btoa(rtsp), {
      canvas: document.getElementById("canvas")
    })

【说明】：JSMpeg.Player 第一个参数是拼接转码链接 'ws://localhost:9999/rtsp?url=' + btoa(rtsp)； 第二个参数是一个对象，对象里面属性包含 canvas。

参数说明  
如上面的例子所示：在调用 new JSMpeg.Player() 时，第一个参数是接口地址拼接上rtsp地址，其实我们还可以使用 url 传参的方式传递更多的高阶参数。  
![ebfa1197fc344705a129555209626b3e.png][]

支持 flv.js  
flv.js 也是现在主流的播放器之一，而且 flv.js 播放器，默认就有进度条、在线回放、全屏、画中画、倍速播放等功能，有需要的可以选择 flv.js。

重要说明  
【2023-06-18】随着大家对 rtsp2web 的使用与喜爱，也对 rtsp2web 提出了更高的要求和更多的功能需要；rtsp2web 一直在发展与进步中，如果你想了解 rtsp2web 最新的变化和使用文档，请参阅 rtsp2web 的官方文档，官方文档的内容更新的优先级最高。

课外知识  
一、node install –unsafe-perm 是什么作用？

就是说 npm 出于安全考虑不支持以 root 用户运行，即使你用 root 用户身份运行了，npm 会自动转成一个叫 nobody 的用户来运行，而这个用户几乎没有任何权限。这样的话如果你脚本里有一些需要权限的操作，比如写文件（尤其是写 /root/.node-gyp），就会崩掉了。  
为了避免这种情况，要么按照 npm 的规矩来，专门建一个用于运行 npm 的高权限用户；要么加 –unsafe-perm 参数，这样就不会切换到 nobody 上，运行时是哪个用户就是哪个用户，即使是 root。

经常是安装 node-sass 的时候会很容易出现因为权限不够无法创建目录的问题

二、在 nodejs 中，注意： 最好不要使用 var 定义变量以避免引入全局变量，因为全局变量会污染命名空间，提高代码的耦合风险。

[b167802ea5ed42b78eb307142834eca7.png]: https://img-blog.csdnimg.cn/b167802ea5ed42b78eb307142834eca7.png
[ebfa1197fc344705a129555209626b3e.png]: https://img-blog.csdnimg.cn/ebfa1197fc344705a129555209626b3e.png