Web H5 接入海康录像机 (rtsp转flv)

最终效果

开始了~

私网映射为公网

• 如果你需要非局域网内访问就需要做这一步
• 映射好公网后 ip 可能会变动 建议用域名做动态映射

搭建转流服务器(RTSP => RTMP)

• 可参考其他方法

通过FFmpeg将rtsp流摄像头视频转码为rtmp播放 https://blog.csdn.net/u012492535/article/details/79220398

• 我用的现成的docker镜像部署的服务 原理一样的

• • GitHub地址: https://github.com/ossrs/srs
  • 搭建好后就可以通过服务器地址:8380默认端口 查看了
  • 

 

服务端相关命令

添加视频流

直播

• 在容器外执行srs容器内的命令

docker exec -it ${你的srs容器地址} /bin/bash -c ffmpeg -rtsp_transport tcp -i rtsp://${账号:密码}@${映射为公网的ip或者域名地址ztzyjc.3322.org}:${端口 默认9002}/Streaming/channels/${你的摄像头通道地址}0${主流1 子流2}  -c:v libx264 -crf 300 -acodec aac -f flv rtmp://127.0.0.1:1935/live/mystream${地址要不一样的, 我的是通道地址}

 

以我的地址为例: 在9.20的服务器上部署的srs 命令为

docker exec e5e1135e7cf6 /bin/bash -c 'ffmpeg -rtsp_transport tcp -i rtsp://admin:******@www.***.com:9002/Streaming/channels/2001  -c:v libx264  -acodec aac -f flv rtmp://127.0.0.1:1935/live/mystream20'

• 这样前端就能通过地址 rtmp://192.168.9.20:8380/live/mystream20 或者 http://192.168.9.20:8380/live/mystream20

回放

• 命令docker exec e5e1135e7cf6 /bin/bash -c 'ffmpeg -rtsp_transport tcp -i "rtsp://admin:******@www.***.com:9002/Streaming/tracks/2001?starttime=20201214t000000z&endtime=20201214t000000z" -c copy -f flv rtmp://127.0.0.1:1935/live/mytrack20201214t000000z'

• • 相应的前端播放地址: http://192.168.9.20:8380/live/mytrack20201214t000000z

 

前端对接

说明事项(最终转流为flv格式)

• RTMP 需要 flash 插件播放(以下有说明), chrome 在2020年12月后已经不再支持, 现在相关api接口都已经关闭了, 需要操作flash本身去调用浏览器相关接口(放弃了)

• • https://segmentfault.com/a/1190000018582436
  • RTMP(Real Time Messaging Protocol)实时消息传送协议是Adobe Systems公司为Flash播放器和服务器之间音频、视频和数据传输开发的私有协议。
  • RTMP是一个应用层协议，有多路复用的特点，传输内容有视频、音频、控制命令
  • RTMP 在音视频相关的协议中，它的突出特点是：连接可靠、低延时

• 使用flv

• • 视频加载快比hls的m3u8格式快得多(可能是个人情况,未作深究)

 

• 前端添加设备需要写服务端cmd脚本, 我这边也是使用的 nodejs 的express搭建了权限校验和docker的添加视频流命令

• • 附上地址: https://gitee.com/Izhaong/node-srs-cmd

Vue 接入

我使用了 Dplayer播放器, 附上链接: http://dplayer.js.org/zh/guide.html#flv

1. public/index.js引入

1. 1. 可以使用其他的cdn

1. cmd 运行cnpm i dplayer -S
2. 视频加载页面(单个视频)

...

...

import DPlayer from 'dplayer'

data: { dp: undefined }
mounted() { this.initPlayer() }
methods: {
    initPlayer() {
        this.$nextTick(() => {
        const liveBaseUrl = 'http://192.168.9.20:8380' // 你的srs服务地址
        // const url = live ? `${liveBaseUrl}/live/mystream${channelNo}.flv` : `${liveBaseUrl}/live/mytrack${this.datetimeValue[0]}.flv` // 回放后面再说
        const url = `${liveBaseUrl}/live/mystream${channelNo}.flv` // 直播地址
        // 测试flx地址: https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv
        this.dp = new DPlayer({
          container: document.getElementById('dplayer'),
          video: {
            url,
            type: 'flv'
          },
          // mutex: false, // api自己查查 不描述了 
          autoplay: true,
          live
        })
      })
  }
}

a. 多个视频自己琢磨吧~我给个大概思路, 数组嘛~简单 如下循环就好了

 

到此应该就差不多了, 肯定还有很多遗漏 不想写了 累~