文章目录

实现web浏览器播放海康威视摄像机和录像机的监控与回放

1、海康威视监控设备简介

由于我们项目需要引入监控，所有作为一个小白特此研究一下，将自己的实操分享发给大家。
海康的监控设备主要是摄像机(IPC)搭配录像机NVR可以实现对监控的预览、回放、布放、告警等功能。

海康威视本身提供了非常多的方式可以进行查看监控和回放
方式1、比如iVMS-4200客户端、直接在浏览器输入摄像机的ip、萤石云。
方式2、合作伙伴后台服务(付费的)：实现标准协议rtsp、hls、http-flv、rtmp取流

海康威视设备搜索：搜素局域网内在线的摄像机设备
海康威视官网工具包

由于我们需要集成到自己的系统中所以需要二次开发后集成到自己的系统中 ，且不想出钱买海康的后台管理平台，所以自己实现。

1.1、摄像机二次开发方案

1.1.1：方案选择

主要包括前端解决方案和后端解决方案。
若只是播放，回放等功能可以使用前端web demo更简单
需要复杂的各种识别、告警布防等功能就需要后端sdk

1、前端web集成
可实现基础的

  • 播放：预览、回放、抓拍、
  • 设备管理：重启、登录、退出、
  • 录像：录像、下载录像
    2、后端集成方案
  • 2.1 标准协议对接（可实现预览，回放）
  • 2.2 海康SDK对接（功能比web更丰富。增加了各种识别、告警布防、事件等）
1.1.2：后端二开协议选择

**需求：**想要二次开发在自己的系统浏览器页面实现监控的播放需要集成播放插件。
**问题：**随着IE、Chrome、Edge等主流浏览器对flash播放插件的停止更新，目前二次开发时应该要摒弃rtmp协议，采用HLS、HTTP-FLV、WebRTC、WebSocket来传输直播视频流。（各种流媒体协议介绍参考第二章节）。浏览器原生不支持rtsp协议取流。
总结如下：

RTSP：浏览器原生不支持rtsp协议取流，只能通过插件或者转码
   插件：vlc浏览器插件。转码：转hls等格式
HTTP-FLV：在播放首屏、播放延迟方面表现较好。移动端不太支持
HLS：将浏览器缓存视频分片后播放，流畅性很好但存在3-4s左右的延时，且录像回放功能对存储要求高（可以存储少的片段解决）
RTMP：依赖Flash插件，Adobe公司2021年已不再更新和分发Flash，不推荐浏览器视频播放采用此协议

前端的Video控件标签支持HLS协议播放，经测试确实支持m3u8的播放。主要支持,几种视频格式m3u8，ogg, mp4, webm。MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

协议选择：浏览器原生不支持rtsp协议取流，所以需要进行协议转换，比如选择HLS协议

1.2：前端web集成实现预览回放

海康开发平台web集成文档
主要包括有才插件版和无插件版。不确定是否支持4*4的打开方式
在这里插入图片描述
方案中建议一个tab页只启动一个播放插件，暂没有尝试播放多个监控，待前端测试完成后补充该部分

用带插件版本的修改后可显示， 需要4*4等各种显示的都可以自行配置。
在这里插入图片描述

1.3：标准协议对接

可以实现rtmp到flv、hls等协议转换，将转换的hls流地址给前端播放

1.3.1：ffmpeg软件rtsp转流hls

1、安装ffmpeg： ffmpeg官网
下载地址：ffmpeg-windows官网下载
配置环境变量：加到path中
在这里插入图片描述
验证：cmd中执行ffmpeg -version
在这里插入图片描述

2、使用命令转流
-hls_time 10 代表每个片段的时长10秒可以用更小的值减少延迟
-hls_list_size 决定保留的ts片段个数。0代表全部，按照自己的存储决定，比如32

ffmpeg -i "rtsp://用户名:密码@IP地址:554/Streaming/Channels/101" -c copy  -hls_time 2 -hls_list_size 0 -hls_flags delete_segments+append_list+omit_endlist -f hls G:\\yd\\word\\ip\\ip_output.m3u8

3、播放该G:\yd\word\ip\ip_output.m3u8流媒体文件即可。比如使用ffmpeg自带的播放器ffplay或者vlc播放器

ffplay G:\\yd\\word\\ip\\ip_output.m3u8


4、优化。生产上可能有多个监控，可以使用脚本实现批量转换

#!/bin/bash

# 定义摄像头列表
CAMERAS=(
  "rtsp://admin:yd@2024@192.168.2.64:554/Streaming/Channels/101"
  "rtsp://admin:yd@2024@192.168.2.65:554/Streaming/Channels/101"
  # 添加更多摄像头
)

# 输出目录
OUTPUT_DIR="G:\\yd\\word\\ip"

# 保留片段数量
RETAIN_COUNT=36

# 定期清理旧片段
cleanup_old_segments() {
  for i in "${!CAMERAS[@]}"; do
    CAM_ID=$((i + 1))
    M3U8_FILE="$OUTPUT_DIR/camera_$CAM_ID.m3u8"
    
    # 获取M3U8文件中的所有TS文件
    TS_FILES=$(grep -oP '#EXT-X-KEY:.*\n#EXTINF:[0-9.]+,\n(.*?)\n' $M3U8_FILE | cut -d'\n' -f3)
    
    # 删除多余的TS文件
    while [ $(echo "$TS_FILES" | wc -l) -gt $RETAIN_COUNT ]; do
      OLDEST_TS=$(echo "$TS_FILES" | head -n1)
      rm "$OUTPUT_DIR/$OLDEST_TS"
      TS_FILES=$(echo "$TS_FILES" | tail -n +2)
    done
    
    # 更新M3U8文件
    sed -i '/#EXT-X-ENDLIST/d' $M3U8_FILE
    echo "#EXT-X-ENDLIST" >> $M3U8_FILE
  done
}

# 启动FFmpeg进程
for i in "${!CAMERAS[@]}"; do
  CAM_ID=$((i + 1))
  OUTPUT_FILE="$OUTPUT_DIR/camera_$CAM_ID.m3u8"
  
  # 启动FFmpeg进程
  ffmpeg -i "${CAMERAS[$i]}" \
         -c copy -map 0:v:0 -map 0:a:0 -hls_time 10 -hls_list_size 5 \
         -hls_flags delete_segments+program_date_time \
         -f hls "$OUTPUT_FILE" &
done

# 定期清理旧片段
cleanup_old_segments

# 设置定时任务
(crontab -l ; echo "*/5 * * * * /path/to/cleanup_old_segments.sh") | crontab -

生产上需要nginx代理+ffmpeg转流（hls输出的文件）

1.3.2：开源监控软件shinobi

shinobi官网
shinobi集成了ffmpeg，也可以将rtsp转为hls等流信息

1.3.2.1 安装使用

1、安装：支持docker安装
其中的–shm-size大小。每个摄像头720P的按照100MB估算。乘以摄像头数量即可

docker run -d  --name=shinobi --shm-size=2048m -p 8080:8080  registry.gitlab.com/shinobi-systems/shinobi:latest

首次登录管理员：http://ip:8080/super#
后续登录普通账号：http://ip:8080/

2、添加摄像头。每个摄像头默认会生成一个唯一ID，默认转为HLS协议
在这里插入图片描述

每个监控默认会生成唯一ID
标签：指定的分组，标签一样的会分到同一个分组
在这里插入图片描述
输入监控的URL。
默认的海康威视或者大华等有自己固定的URL格式
比如：海康rtsp://用户名:密码@IP地址:554/Streaming/Channels/101

3、查看监控
在这里插入图片描述
查看监控时若无法播放，确保涉摄像头设置中的视频编码格式是H.264，海康有些会是H.265导致无法查看黑屏
4、查看Stream流：复制stream流地址。
在这里插入图片描述

利用shinobi可以播放rtsp流并可以将其转为m3u8的流。复制m3u8地址接口播放，下面是用vlc播放器播放的
在这里插入图片描述
在这里插入图片描述
可以看到监控
4、缺点：其stream流的地址会变化，有时会导致前面的stream流失效无法查看监控内容。那么有没有方法固定Stream url。肯定是有的，可以通过API实现。

stream流URL的格式http://xxx.xxx.xxx.xxx/[API KEY]/hls/[GROUP KEY]/[MONITOR ID]/s.m3u8

其实是api key会自动刷新，客户端断开连接15分钟就刷新了。我们只需要创建自己的API KEY即可

1.3.2.2 shinobi API使用

shinobi的整个页面都是调用API获取的，比如获取监控，获取stream流信息等。所以我们可以借助api实现自己的系统和页面，达到嵌入自己系统的目的
在这里插入图片描述
shinobi API文档

  • 1创建秘钥
    在这里插入图片描述
    创建秘钥并给权限后就可以通过替换url中的key实现获取监控，获取stream流信息
    比如旧的是默认的：http://localhost:8091/35758c68d976c08a4b6a0f25ceab61b5/hls/HFiE3MlIHj/ZRjzDq8WKU/s.m3u8
    替换其中的35758c68d976c08a4b6a0f25ceab61b5为自己新建的key即可实现固定URL
  • 2获取监控：http://xxx.xxx.xxx.xxx/[API KEY]/monitor/[GROUP KEY]
    在这里插入图片描述
  • 3 获取流
比如HLS流：http://xxx.xxx.xxx.xxx/[API KEY]/hls/[GROUP KEY]/[MONITOR ID]/s.m3u8
  • 4 获取视频
    获取视频的前提是摄像头的设置模式是记录
    在这里插入图片描述
http://xxx.xxx.xxx.xxx/[API KEY]/videos/[GROUP KEY]

比如浏览器访问

http://localhost:8091/35758c68d976c08a4b6a0f25ceab61b5/videos/HFiE3MlIHj/ZRjzDq8WKU/2024-09-20T03-00-01.mp4

即可浏览器看到视频
在这里插入图片描述

1.3.3：ffmpeg+nginx的RTMP模块

nginx默认不带RTMP模块的，需要下载和nginx源码一起自行编译。

1：windows下实现rtsp流转rtmp和http协议的flv流媒体，实现vue播放
  • 1、安裝nginx、ffmpeg
    下载nginx：下载链接: http://nginx-win.ecsds.eu/download/nginx 1.7.11.3 Gryphon.zip，下载完成后解压， 将解压后的目录去除空格
  • 2、下载/nginx-rtmp-module流媒体转换module，此module非默认的，需要额外下载： 下载地址https://github.com/arut/nginx-rtmp-module/
  • 3、下载后解压放到nginx-1.7.11.3-Gryphon目录下，并将包名改为nginx-rtmp-module

修改配置文件
nginx-win.conf配置如下

worker_processes 1;

events {
    worker_connections 1024;
}

rtmp {
    server {
        listen 1935;
        chunk_size 4096;

        application live {
            live on;
            hls on;
            hls_path "G:/yd/word/nginx-1.7.11.3-Gryphon/hls";  # 使用反斜杠或正斜杠
            hls_fragment 5s;
        }
    }
}

http {
    server {
        listen 880;
        server_name localhost;

        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
        }

        location /hls/ {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/MP2T ts;
            }
            add_header Cache-Control no-cache;
            alias "G:/yd/word/nginx-1.7.11.3-Gryphon/hls/";  # 使用反斜杠或正斜杠
        }
    }
}

4、启动和停止nginx
启动nginx：nginx -c conf/nginx-win.conf
停止：taskkill /f /t /im nginx.exe
在这里插入图片描述

4、安装ffmpeg实现推流到nginx
你可以使用FFmpeg或其他直播软件推送流到Nginx RTMP服务器：

ffmpeg -i "rtsp://admin:password@192.168.2.64:554/Streaming/Channels/101" -c copy -f flv rtmp://localhost:1935/live/test

在这里插入图片描述

5、获取流播放测试
在客户端，你可以使用VLC播放器或其他支持RTMP协议的播放器来观看直播：
vlc播放器测试hls
在这里插入图片描述
在这里插入图片描述

ffplay拉流播放测试：ffplay.exe rtmp://192.168.2.4:1935/live/test 说明推送到rtmp没问题
在这里插入图片描述

rtmp协议url： rtmp://192.168.2.4:1935/live/test
http协议url：http://localhost:880/hls/test.m3u8

rtmp新的浏览器可能不支持

1.4：后端二开海康SDK实现预览回放

海康硬件设备对接SDK
在这里插入图片描述
区分了不同的操作系统，里面有不同代码语言的demo。

1.4.1：添加maven依赖

1、先本地安装maven
2、将海康的两个依赖包jna.jar 和examples.jar安装到本地的maven仓库。jar位于
在这里插入图片描述

cmd中执行添加到maven本地仓库，path为自己的绝对路径

mvn install:install-file -Dfile=path\src\main\resources\META-INF\lib\jna.jar -DgroupId=com.hikvision -DartifactId=HCNetSDK -Dversion=1.0.0 -Dpackaging=jar
mvn install:install-file -Dfile=path\src\main\resources\META-INF\lib\examples.jar -DgroupId=com.hikvision -DartifactId=hk-example -Dversion=1.0.0 -Dpackaging=jar

3、pom.xml添加依赖

  <!--海康威视sdk-->
        <dependency>
            <groupId>com.hikvision</groupId>
            <artifactId>HCNetSDK</artifactId>
            <version>1.0.0</version>
        </dependency>

        <dependency>
            <groupId>com.hikvision</groupId>
            <artifactId>hk-example</artifactId>
            <version>1.0.0</version>
        </dependency>
1.4.2：springboot集成SDK提供接口调用

下载的sdk文档中有demo示例
在这里插入图片描述
下面进行实践
想用更低的延迟可以使用WebRTC进行播放。即将获取的回调函数中的二进制流自行处理发送

2、各种流媒体协议介绍

常见的流媒体协议包括RTSP、RTMP、HLS、FLV等，它们在不同的应用场景中提供了各自的优势和 特性。

2.1：流媒体协议介绍

在这里插入图片描述

2.1.1：RTSP (实时流传输协议)

RTSP（Real-Time Streaming Protocol）RTSP本身并不传送数据，而仅仅是是媒体播放器能控制多媒体流的传送，暂停播放，快进快退等。实际媒体数据的传输可以用RTP协议或其他专用协议。
RTSP以客户-服务器方式工作，它是一个应用层的多媒体播放控制协议。它和Http协议有些相似，但它不像Http，而是有状态的，而且可以在TCP和UDP上传输。

    默认端口554。

在这里插入图片描述
海康默认的RTSP格式：

主码流：rtsp://用户名:密码@IP地址:554/Streaming/Channels/101      
子码流：rtsp://用户名:密码@IP地址:554/Streaming/Channels/102
2.1.2：RTMP (实时消息协议)

RTMP（Real-Time Messaging Protocol）是Adobe开发的用于实时视频和音频流传输的协议。它最初是为Flash Video应用设计的，但现已被广泛用于各种直播和点播服务，如YouTube、Twitch等

2.1.3：FLV（Flash Video）

格式是一种面向Flash平台的流媒体格式。它被广泛用于Adobe Flash Player的内容播放，尤其在早期的互联网视频应用中非常流行。

2.1.4：HLS (HTTP Live Streaming)

HLS（HTTP Live Streaming）是一种通过标准HTTP协议动态传输实时音视频流的技术。它将视频和音频分段并使用HTTP进行传输，使得在不同的网络环境下都能提供流畅、质量可适应的流媒体体验。
hls存储的是.ts格式的视频片段，可以使用http协议存储成m3u8格式的视频
在这里插入图片描述
m3u8文件是动态更新的，里面存放了各种的.ts格式的视频片段。获取播放的视频流并不是直接播放.m3u8文件本身，而是通过.m3u8文件来索引和播放一系列的TS（Transport Stream）视频片段。.m3u8文件是一个文本文件，它包含了指向这些视频片段的链接列表，以及可能的其他元数据（如带宽信息）。HLS播放器（如Hls.js）会首先下载.m3u8文件，然后根据文件中的列表逐个下载TS片段，并将它们拼接起来播放

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXTINF:10.000,
http://username:password@yourserver.com/path/to/segment0.ts
#EXTINF:10.000,
http://username:password@yourserver.com/path/to/segment1.ts
...

视频文件类型：.m3u8

2.2：流媒体协议选择与适用场景

在选择流媒体协议时，应考虑以下几个因素：

传输速度与稳定性：对于实时性要求高的场景，RTMP与RTSP可能更为合适。
平台支持：如果目标是跨平台应用，HLS因其基于HTTP的优势而更受欢迎。
压缩效率：FLV在Flash平台上的使用历史中表现出色，尤其在对压缩效率有较高要求的场景下。
版权保护与防盗链：HLS提供较好的版权保护机制，适合版权内容的分发。
流媒体协议的实现与设置
开发工具：对于开发者来说，使用如Python、Node.js、Java等通用编程语言搭配专门的流媒体框架（如FFmpeg、Nginx的RTMP模块）可以快速搭建流媒体服务。
在这里插入图片描述
其中的视频格式是支持的摄像机的视频编码格式，注意选择协议时进行摄像机的视频编码格式的设置

2.3：推流和拉流

在这里插入图片描述

2.3.1：推流

将直播的内容推送至服务器的过程，其实就是将现场的视频信号传到网络的过程。“推流”对网络要求比较高，如果网络不稳定，直播效果就会很差，观众观看直播时就会发生卡顿等现象，观看体验很是糟糕。要想用于推流还必须把音视频数据使用传输协议进行封装，变成流数据。常用的流传输协议有 RTSP、RTMP、HLS 等，使用 RTMP 传输的延时通常在 1–3 秒，对于手机直播这种实时性要求非常高的场景，RTMP 也成为手机直播中最常用的流传输协议。最后通过一定的 QoS 算法将音视频流数据推送到网络端，并通过 CDN 进行分发。

2.3.2：拉流

拉流：指服务器已有直播内容，用指定地址进行拉取的过程。即是指服务器里面有流媒体视频文件，这些视频文件根据不同的网络协议类型（如 RTMP、RTSP、HTTP 等）被读取的过程，称之为拉流，我们日常观看视频和直播就是一个拉流的过程。

3：海康摄像头使用

3.1：使用浏览器输入ip打开后显示灰色，无法预览

在这里插入图片描述

需要下载插件进行安装。安装后刷新即可预览
在这里插入图片描述

# 硬件工程
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊