前端播放RTSP流视频

前端播放RTSP流视频

一、接入监控

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

二、jsmpeg+node+ffmpeg转码方案

将用到的软件放到这里：

• node.js 下载的是18.17版本
• ffmpeg 这个版本应该能直接下载https://www.gyan.dev/ffmpeg/builds/packages/ffmpeg-5.1.2-full_build.7z
• https://gitee.com/eightFlying/rtsp-demo.git

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)
      }
    })