Web端集成海康视频监控画面
海康NVR(Network Video Recorder)
海康威视(Hikvision)是一家全球领先的视频监控设备和解决方案提供商,其产品包括网络视频录像机(NVR)以及摄像头、监视器、存储设备、软件和其他安全监控相关的产品。
获取录像机RTSP视频流
- 取流格式
>>RTSP单播取流格式如下(车载录像机不支持RTSP取流):
rtsp://用户名:密码@IP:554/Streaming/Channels/101
录像机示例:
取第1个通道的主码流预览
rtsp://admin:hik12345@10.16.4.25:554/Streaming/Channels/101
取第1个通道的子码流预览
rtsp://admin:hik12345@10.16.4.25:554/Streaming/Channels/102
取第1个通道的第三码流预览
rtsp://admin:hik12345@10.16.4.25:554/Streaming/Channels/103
取第12个通道的主码流预览
rtsp://admin:hik12345@10.16.4.25:554/Streaming/Channels/1201
>>RTSP多播取流格式如下
rtsp://用户名:密码@IP:554/Streaming/Channels/101?transportmode=multicast
录像机示例
取第1个通道的主码流预览
rtsp://admin:hik12345@10.16.4.25:554/Streaming/Channels/101?transportmode=unicast
★2012年之前的设备URL规定:
rtsp://username:password@//ch/
路径后面不能有空格、回车等符号,否则会连接失败。
→举例:
主码流取流:
rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream
子码流取流:
rtsp://admin:12345@192.0.0.64:554/h264/ch1/sub/av_stream
零通道取流:
rtsp://admin:12345@192.0.0.64:554/h264/ch0/main/av_stream
注意:URL中“:”“?”“&”等符号均为英文半角。
-
这里是通过录像机的ip取的RTSP流
-
RTSPtoWeb转化视频格式
下载RTSPtoWeb工程
-
安装GO环境
-
wget https://dl.google.com/go/go1.18.3.linux-amd64.tar.gz sudo tar -zxvf go1.18.3.linux-amd64.tar.gz -C /usr/local/lib/ sudo ln -s /usr/local/lib/go/bin/* /usr/bin/ # GOPATH需要设置成你自己的路径 sudo tee -a ~/.bashrc << EOF export GOROOT=/usr/local/lib/go/ export GOPATH=/home/${USER}/sdk/go export PATH=\$PATH:\$GOROOT/bin:\$GOPATH/bin EOF go env -w GO111MODULE=on go env -w GOPROXY=https://goproxy.cn,direct # 查看Go版本信息 go version
-
-
项目根目录编译RTSPtoWeb
-
go build
-
-
运行
-
./RTSPtoWeb
-
-
打开浏览器
- http://localhost:8083
-
在海康威视录像机界面设置摄像头的编码格式
RTSPtoWEB添加通道
RTSPtoWEB页面效果
通过RTSPtoWeb的接口再次取流
RTSPtoWeb API
-
列出所有流
-
GET /streams curl http://demo:demo@127.0.0.1:8083/streams
-
-
获取某个流信息
-
GET /stream/{STREAM_ID}/info curl http://demo:demo@127.0.0.1:8083/stream/{STREAM_ID}/info
-
-
HLS-LL视频接口
-
GET /stream/{STREAM_ID}/channel/{CHANNEL_ID}/hlsll/live/index.m3u8 curl http://127.0.0.1:8083/stream/{STREAM_ID}/channel/{CHANNEL_ID}/hlsll/live/index.m3u8
-
自定义HTML页面播放画面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式视频</title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
<!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
</head>
<body>
<style>
.video-js .vjs-tech {position: relative !important;}
</style>
<div>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
<source id="source" src="http://127.0.0.1:8083/stream/{STREAM_ID}/channel/{CHANNEL_ID}/hlsll/live/index.m3u8" type="application/x-mpegURL"></source>
</video>
</div>
<div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>
</body>
<script>
// videojs 简单使用
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
})
myVideo.play()
var changeVideo = function (vdoSrc) {
if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
myVideo.src({
src: vdoSrc,
type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
})
} else {
myVideo.src(vdoSrc)
}
myVideo.load();
myVideo.play();
}
var src = 'http://127.0.0.1:8083/stream/{STREAM_ID}/channel/{CHANNEL_ID}/hlsll/live/index.m3u8';
document.querySelector('.qiehuan').addEventListener('click', function () {
changeVideo(src);
})
</script>