搭建rtsp协议直播的node服务

我就不信起不来名字了！

已于 2022-06-29 16:49:23 修改

阅读量5k

点赞数 4

分类专栏： node搭建服务器文章标签：服务器 node.js

于 2022-06-29 16:42:49 首次发布

本文链接：https://blog.csdn.net/weixin_45465901/article/details/125520454

版权

node搭建服务器专栏收录该内容

2 篇文章 1 订阅

订阅专栏

搭建rtsp协议直播的node服务获取大华海康摄像头协议流

现在很多公司都开始进军物联网，进行万物互联，摄像头属于入门级别的物联，虽然普遍都是摄像头，但是想要获取自己购买的摄像头，还是需要厂商提供的设备平台进行观看！尤其是商用的几乎都是各家有各家的凭他，虽然nvr上可以接入各家设备，但是对于平台显示，还是只限于自家摄像头的！这就产生一个疑惑，那么对于我们做IT的就没有开源的项目可以使用吗？答案是肯定有的！，例如接下来我要讲的项目。
项目需求：公司购买了大华的摄像头和海康的摄像头，海康的nvr是可以接入大华的摄像头，大华的nvr也是可以接入海康的摄像头。也可以在nvr上常看所连接的摄像头，但是吧，由于作为工业级别，使用nvr获取摄像的rtsp协议流，同时开启多个，恐怕nvr吞吐数据量太大，会卡。所以想着直接链接摄像头，来拉流
。
调研：一种是海康的sdk，一种是api-web大华的平台，经过调研发现摄像头不可以相互使用。另外就是自己搭建服务用来解析rtsp协议转为前端使用的数据
平台:使用nodejs搭建的服务来获取实时数据，再由前端接收解析后的数据，来显示实时的摄像数据。

所有方案：

一、 node-rtsp-stream + ffmpeg 搭建的服务

二、 rtsp-streaming-server + ffmpeg 搭建的服务

三、node-media-server + ffmpeg 搭建的服务

四、webrtc-streamer 搭建的服务

五、webrtc +scoketIo + ffmpeg 搭建的推流服务

以上是经过辛苦寻找符合使用的插件，正在一一验证插件的可行度，第五个处于idea阶段，后续慢慢实现

方案一

插件：、node-rtsp-stream
服务器本机需要的推流工具：
ffmpeg
以下代码则使用最简洁的代码结构，如需复杂结构逻辑，请自行更改，本次代码顺序对于大佬级别可能会显得罗素，大佬轻饶过，直接查看源码！小白请继续，代码会在gitee开源，可直接下载

第一步搭建node服务环境
1、npm init 上述的每一步，请自行查询，不在赘述，也可以从头到尾一直回车
2、npm install node-rtsp-stream

代码：nodejs服务端最核心的代码部分，此插件是使用的最webscoket推送的数据到前端页面

var Stream = require('node-rtsp-stream')
var stream = new Stream({
  name: 'socket',
  streamUrl: 'rtsp://username:password@172.16.0.255:554/cam/realmonitor?channel=1&subtype=1',//这里是你要链接大华或者海康的rtsp协议的摄像头地址
  wsPort: 9990,//这里就是webscoket的端口
  ffmpegOptions: {//这部分是ffmpeg的配置，当构造完成，会自动寻找ffmpeg程序
    '-stats': '',
    '-r': 20,
    '-s': '1920 1080'
  }
})

相关的api 可以查看这里https://www.npmjs.com/package/node-rtsp-stream
第二步下载ffmpeg程序
可以到这里下载macOs系统程序，win系统程序、linux系统程序，地址在这里http://www.ffmpeg.org/download.html
本来想着上传gitee上，由于exe文件程序太大，没上传成功，抱歉！如果大家在外网上下载过慢或者失败的话给大家一个代理工具，相对速度会快一点
代理工具名称叫 dev-sidecar，gitee开源上搜索可以找到就是这个图标
言归正传下载完FFmpeg 的exe文件之后设置变量环境，找到exe的文件夹，复制路径，打开我的电脑，高级设置，环境设置，全局环境设置，点击path 点击编辑，找到空白行，粘贴上去就行了，
运行node XXX.js 你搭建的服务名称开始运行

![(https://img-blog.csdnimg.cn/7e4bf370b26c45579ae9755d9a2f1e56.png)

运行成功示例
前端页面代码：

<!DOCTYPE html>
<html>

<head>
     
  <meta charset="UTF-8">
     
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>

<body>
      <div style="position: absolute;">
            <canvas id="canvas" style='width:100%;height:100%' onclick="pauseBtnShow()"></canvas>
            <div id="pauseBtn" onclick="startOrPause()"
      style="z-index: 2; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; max-width: 75px; max-height: 75px; margin: auto; opacity: 0.7; cursor: pointer; display: none;">
      <svg style="max-width: 75px; max-height: 75px;" viewBox="0 0 200 200" alt="Play video">
        <circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"></circle>
        <polygon points="70, 55 70, 145 145, 100" fill="#fff"></polygon>
      </svg>
    </div>
        </div>
     
  <script src="jsmpeg.min.js"></script>
     
  <script>
  //此处的ws就是本机器的scoket地址和端口
    var player = new JSMpeg.Player('ws://localhost:9990', {
      canvas: document.getElementById('canvas'),
      autoplay: false,//是否自动播放
      loop: true,
    });

    function startOrPause () {
      if (player.isPlaying) {
        player.pause();
      }
      else {
        player.play();
        document.getElementById('pauseBtn').style.display = 'none'
      }
    }
    function pauseBtnShow () {
      if (player.isPlaying) {
        player.pause();
        document.getElementById('pauseBtn').style.display = 'block'
      }
    }
  </script>
</body>

</html>