前端播放RTSP流视频

前端播放RTSP流视频

一、接入监控

开发Java web平台第一次遇到接入监控的需求,品牌大华录像机,提供RTSP视频流,本以为一个IP地址放到video标签就齐活了,没想到现在前端不支持RTSP视频流,需要转到Http视频流给前端。花了大半找到这个不怎么需要开发的方案,链接上面有gitee的demo地址,这个方案的命令是sh,应该是在linux下使用的,不过我在window上已经调试好。

二、jsmpeg+node+ffmpeg转码方案

将用到的软件放到这里:

ffmpeg下载完需要添加环境变量到Path中。下载的文件目录如下:

├─package-lock.json
│  
├─rtsp-video-canvas
│  │  index.html
│  │  play.png
│  │  video.png
│  │  
│  ├─css
│  │      style.css
│  │      
│  ├─js
│  │      jsmpeg.js
│  │      
│  └─plugs
│          jquery.js
│          
└─rtsp-video-node
        app.js
        cmd.js
        package-lock.json
        package.json
        stop.sh
        stopall.sh
        test.sh
        

因为node构建的项目,cmd到项目录下运行npm i,安装依赖。

ps :windows上使用命令可生成文件树:

# 把目录树生成到123.txt中
tree js_ffmpeg_websocket_node /F > 123.txt 
三、项目配置

流程是app.js后台请求rtsp流,调用ffmpeg解码后用websocket一帧帧图像传到前端,用canvas显示。所以app.js时起一个http服务,一个websocket服务

// 启动静态服务器,端口20000
app.listen(20000, () => {
  console.log(`App listening at port 20000`);
});
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: false
  })
);

// 后台api
app.post('/startRtspVideo', function (req, res) { // 每次请求都会重新加载
  let data = JSON.parse(req.body.urls)
  let diff = [] //ipcList中不存在的视频数据
  data.forEach(item => {
    let res = ipcList.filter(item1 => {
      return item1.url === item.url && item1.port === item.port
    })
    if(res.length === 0){
      diff.push(item)
    }
  })

  // 
  diffList = diff.map((item, index) => {
    return {
      ...item,
      //此处判断是不是大华, 按大华的rtsp格式写地址。item参数是前端传过来的
      rtsp: item.type !== 'dh' ? (item.url)
      : (`rtsp://admin:admin@${item.url}/cam/realmonitor?channel=${item.ch}&subtype=${subtype}`), // parseInt(index + 32)
    }
  })
…………
})

前端index.html配置

    let basUrl = 'localhost';
    const rtspData = [
      {
          url: '192.168.0.1',	//rtsp的服务器ip
          port: '15000',	//websocket端口,回传图片用的
          type: 'dh',
          coverSrc: '',
          ch:1,
          canvas: document.getElementById('video-canvas')
        },
      
      ]

	// 调接口把参数传给后台
    $.ajax({
      url: 'http://' + basUrl + ':20000/startRtspVideo',
      type: 'post',
      data: {
        urls: JSON.stringify(rtspData)
      },
      success: function (res) {
        console.log(res)
      },
      error: function (err) {
        console.log(err)
      }
    })

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值