搭建rtsp协议直播的node服务

搭建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开源上搜索可以找到 就是这个图标dev-sidecar
言归正传 下载完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>

min.js属于压缩文件,不美观,则不在这里展示了,可以去我的开源地址直接克隆下来https://gitee.com/liu-soso/node-rtsp-stream

方案二

rtsp-streaming-server + ffmpeg 正在开发中

方案三

node-media-server + ffmpeg 正在开发中

方案四

webrtc-streamer 分为两个一个前端使用npm i webrtc-streamer,一个是后端webrtcstreamer.exe需要配置路径,暂试为成功,后续成功在重新编辑

方案五

webrtc +scoketIo + ffmpeg 正在开发中

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值