踩坑历程

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

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

介绍：

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

1. 调用控件开发包

1.1. V3.0包（支持Win32&Win64，支持的浏览器有：IE6_{IE11、Chrome8}Chrome42、Firefox3.5~Firefox52（32位，64位是到Firefox40）、Safari5.0.2+，需要浏览器支持NPAPI。） （这种可以放弃了）

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

2. RTSP 取流 URL （下面有介绍node方法，取流正常，回放有坑） 亲测艰苦历程
3. SDK动态库对接设备进行取流 （官方提供了MFC、C#、Java三种demo） 这种我没测试过
4. 使用平台开发好的文档 （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:'连接失败'
        })
    }
})

---

回放()

// 回放
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、点击控制台->开发能力->基础能力->物联网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)
  })
}