当前位置:   article > 正文

海康威视rtsp取流和回放_qtcreator 海康rtsp视频查看回放

qtcreator 海康rtsp视频查看回放

踩坑历程

  1. 目前回放还需完善,存在(1、离线不能显示。2、个别在线也不能显示。3、后台测试也不能播放)这些不知名问题。测试是基于vlc播放器的,但是有些vlc也不能播放,问过海康客服,海康客服也不能给出解决办法。继续研究吧,有大神知道可以指点下,日后再完善此文档。

通过了两个多星期的研究,总算用做出了可用的成功例子。以下是根据海康威视提供的api方法:
后端技术栈:node + ffmpeg 取流通过ws输入到前端界面
参考链接:浏览器播放rtsp视频,基于nodeJs

介绍:

使用海康威视显示在网页有以下几种方法

  1. 调用控件开发包

1.1. V3.0包(支持Win32&Win64,支持的浏览器有:IE6IE11、Chrome8Chrome42、Firefox3.5~Firefox52(32位,64位是到Firefox40)、Safari5.0.2+,需要浏览器支持NPAPI。) (这种可以放弃了)

1.2 .V3.2包WEB3.2无插件版本开发包,支持高版本谷歌、火狐浏览器,同时需要设备支持Websocket取流。无插件版本需要使用nginx代理服务器。) (这种需要设备支持webscoket取流)

  1. RTSP 取流 URL (下面有介绍node方法,取流正常,回放有坑) 亲测艰苦历程
  2. SDK动态库对接设备进行取流 (官方提供了MFC、C#、Java三种demo) 这种我没测试过
  3. 使用平台开发好的文档 (ISC、云曜平台 ) 收费的,看个人需求

方法一: RTSP实现(取流、回放)

取流()

// 取流
let rtspStream = null
app.post('/open-rtsp-stream', function (req, res) {
    const { ip } = req.body;
    if(rtspStream){
        rtspStream.stop()
        rtspStream = null
    }
    if(ip){
        const rtsp_url = `rtsp://admin:hm123456789@${ip}:554/h264/ch1/sub/av_stream`
        rtspStream = new Stream({
            name: 'sockets',
            streamUrl: rtsp_url,
            wsPort: 9998,
            ffmpegOptions: { // 选项ffmpeg标志
                '-stats': '', // 没有必要值的选项使用空字符串
                '-r': 30, // 具有必需值的选项指定键后面的值<br>    
                '-s':'1920*1080'
            }
        })
        res.send({
            code:200,
            msg:'连接成功'
        })
    }else{
        res.send({
            code:400,
            msg:'连接失败'
        })
    }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

回放()

// 回放
let rtspPlayback = null
app.post('/playback-rtsp-stream', function (req, res) {
    const { forkId, currTime, status } = req.body.obj;
    if(rtspPlayback){
        rtspPlayback.stop()
        rtspPlayback = null
    }
    if(status === 'open'){
        const rtsp_url = `rtsp://admin:hm123456789@192.168.65.10/Streaming/tracks/${forkId}?${currTime}`
        rtspPlayback = new Stream({
            name: 'sockets',
            streamUrl: rtsp_url,
            wsPort: 9966,
            ffmpegOptions: { // 选项ffmpeg标志
                '-stats': '', // 没有必要值的选项使用空字符串
                '-r': 30, // 具有必需值的选项指定键后面的值<br>    
                '-s':'1920*1080'
            }
        })
        res.send({
            code:200,
            msg:'连接成功'
        })
    }else{
        res.send({
            code:400,
            msg:'连接失败'
        })
    }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

方法二:海康云曜实现

1、注册平台账号密码 —> 创建产品 —> 创建项目 附上平台地址

2、点击控制台->开发能力->基础能力->物联网loT->设备接入->快速试用
在试用中心的物联网loT->设备接入->设备添加,填入必要信息,完成设备接入。
附上平台地址

提示:如果设备接入失败则需要联系平台客服处理,有可能是经销商的需要nvr硬盘接入

前端部分

import JSMpeg from 'jsmpeg-player' // 安装这个包(可以搜下这个包用法)
data() {
  return {
    per: 0,
    player: null, // jsmpeg实例
    obj: {},
    time: '',
    wid: 800, // 宽度
    hei: 600 // 高度
  }
}
// 初始化监控
openRtsp(time = 0) {
  const that = this
  if (that.player) {
    that.player.destroy()
    that.player = null
  }
  axios({
    method: 'post',
    url: 'http://localhost:9000/playback-rtsp-stream',
    data: {
      obj: this.obj
    }
  }).then(function (response) {
    // console.log(response)
    that.player = new JSMpeg.VideoElement('#playback', urls)
  })
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/186453
推荐阅读
相关标签
  

闽ICP备14008679号