最近在整理thingsboard课程，基于最新thingsboard版本3.9.1/4.0，欢迎大家点赞，收藏、关注我，提问，在评论区留言，我争取把最新、最准、最好的课程，呈现在各位亦师亦友的csdn广大读者面前。
目录
ThingsBoard集成摄像头播放视频+wvp-pro+ZLMedia
ThingsBoard集成摄像头播放视频+wvp-pro+ZLMedia
背景及准备
架构
本章节讲述ThingsBoard集成摄像头并实时播放视频技术架构图，如下：
官网参考文档：
wv-gb28181-pro使用文档 https://doc.wvp-pro.cn
ZLMediaKit使用文档 https://github.com/ZLMediaKit/ZLMediaKit
摄像头
目前摄像头品牌和规格都很成熟，大类分为枪机/球机/筒机/半球/云台机等。一般摄像头都有网口或串口/IO或wifi/4G通信接口或USB/音频口。
摄像头视频编码主流支持H.264。
媒体服务器
ZLMediaKit 是一款开源的轻量级流媒体服务器框架，由国内开发者开发并维护，专注于高效、稳定、易扩展的流媒体服务。它支持多种协议（RTSP、RTMP、HLS、HTTP-FLV、WebRTC等），适用于直播、点播、视频监控、视频会议等场景，如下：
(1) 互联网直播
方案：OBS推流（RTMP）→ ZLMediaKit → 转HLS/HTTP-FLV → 观众播放。
(2) 安防监控
方案：摄像头（RTSP/GB28181）→ ZLMediaKit → 存储/NVR → 网页端查看。
(3) 视频会议
方案：WebRTC推流 → ZLMediaKit → SFU转发 → 参会者。
(4) 教育/远程医疗
方案：屏幕共享（RTMP）→ 录制为MP4 → 点播回放。
ZLMediaKit功能架构图如下：
ZLMediaKit推流和拉流示意图如下：
视频推流/拉流
视频推流（Stream Pushing）是指将视频数据从采集端（如摄像头、屏幕、文件）实时传输到流媒体服务器或对等节点的过程，广泛应用于直播、视频会议、监控等场景。
推流是摄像头-->服务器（RTMP/WebRTC）。
开源服务器：
SRS（Simple RTMP Server）：支持RTMP/WebRTC/HLS，低配置部署。
Nginx-RTMP模块：轻量级，适合基础RTMP推拉流。
ZLM（ZLMediaKit）：支持RTSP/RTMP/WebRTC，国产开源方案。
视频拉流（Pulling Stream）是指客户端从流媒体服务器或源主动获取视频流数据并播放等场景。
拉流是服务器-->客户端（RTMP/WebRTC）。
拉流协议：
| 协议 | 延迟 | 兼容性 | 适用场景 | 特点 |
| HLS | 10-30s | 所有浏览器、移动端 | 直播、点播 | 基于HTTP的TS切片，高兼容性但延迟高 |
| DASH | 10-30s | 现代浏览器、移动端 | 点播、自适应码率 | 类似HLS，支持多编码格式 |
| RTMP | 1-3s | 需Flash或专用播放器 | 传统直播（逐渐淘汰） | 低延迟，但安全性差，需转协议分发 |
| WebRTC | <1s | 浏览器/原生应用 | 视频会议、实时监控 | 点对点传输，超低延迟 |
| RTSP | 1-5s | 专用播放器/VLC | 监控摄像头、IPCAM | 需配合RTP/RTCP传输，原生浏览器不支持 |
| FLV | 1-3s | 需JS解封装 | 低延迟直播（HTTP-FLV） | 基于HTTP长连接，兼容性优于RTMP |
GB28181协议基础
GB28181是中国国家标准，用于规范视频监控系统的互联互通，解决跨区域、跨部门、跨层级的视频资源共享问题，基于SIP（会话初始协议）和RTP/RTCP（媒体传输），分别为会话通道（控制信令）和媒体流通道（视音频数据）。
GB28181关键组成
SIP 服务器：处理注册、邀请、控制信令（如摄像头与平台间的会话建立）。
媒体服务器（如 ZLMediaKit）：接收、转封装、分发媒体流。
摄像头（IPC）：作为SIP终端，推送流到媒体服务器。
GB28181规范版本：
2011版：首次发布，奠定基础框架。
2016版：细化通信协议，当前主流版本。
2022版：支持H.265\ACC，抓拍。
wvp和ZLMediaKit之间的通信和定位
（1）WVP的定位
作为GB28181国标协议的SIP服务端，接收来自前端摄像头（或平台）的注册、心跳、目录、设备信息、视频预览/回放请求等。
与后端媒体服务器（ZLMediaKit）配合使用，实现实际的视频流播放和分发。
（2）ZLMediaKit的定位
作为强大的 媒体流服务器，支持多协议（RTMP、RTSP、HLS、GB28181 RTP）。实际负责拉流、转码、分发视频数据。
（3）二者之间的通信方式
核心是RTP over UDP（PS封装）：
国标前端设备推送RTP视频流到WVP。
WVP转发/重定向该RTP流到ZLMediaKit的RTP接口（如UDP端口30000+）。
ZLMediaKit解析PS流并生成多协议媒体服务（如RTMP/RTSP/HLS）供外部访问。
控制协议通过HTTP/HOOK接口：
WVP利用ZLMediaKit提供的RESTful API和WebHook回调机制，完成媒体注册、流状态监听、流播放地址获取等。
ThingsBoar集成摄像头方法
ThingsBoard默认情况下不支持视频播放/摄像头接入，要想自己开发视频接入功能，需要有以下步骤：
（1）把视频摄像头做为设备增加在系统中；
（2）搭建流媒体服务器环境并与系统对接；
（3）自定义视频播放部件,并加入仪表板库；
（4）在部件上展示播放实时视频流。
应用场景测试
摄像头
海康摄像头：ip= 192.168.1.64
ZLMediaKit
wvp+ZLMediaKit：ip= 192.168.1.107
在windows环境下，ZLMediaKit运行文件如下：
MediaServer.exe
鼠标双击MediaServer.exe可以启动ZLMediaKit服务，如下：
ZLMediaKit的config.ini文件配置如下：
[general]
broadcast_player_count_changed=0
check_nvidia_dev=1
enableVhost=0
enable_ffmpeg_log=0
flowThreshold=1024
listen_ip=::
maxStreamWaitMS=15000
mediaServerId=1237788 // 重要Id
mergeWriteMS=0
resetWhenRePlay=1
streamNoneReaderDelayMS=20000
unready_frame_cache=100
wait_add_track_ms=3000
wait_audio_track_data_ms=1000
wait_track_ready_ms=10000
[http]
allow_cross_domains=1
allow_ip_range=::1,127.0.0.1,172.16.0.0-172.31.255.255,192.168.0.0-192.168.255.255,10.0.0.0-10.255.255.255
charSet=utf-8
dirMenu=1
forbidCacheSuffix=
forwarded_ip_header=
keepAliveSecond=15
maxReqSize=40960
notFound=<html><head><title>404 Not Found</title></head><body bgcolor="white"><center><h1>您访问的资源不存在！</h1></center><hr><center>ZLMediaKit(git hash:Git_Unkown_commit/Git_Unkown_time,branch:Git_Unkown_branch,build time:2024-10-20T14:19:48)</center></body></html>
port=9000 // 重要port
rootPath=./www
sendBufSize=65536
sslport=443
virtualPath=wvp-pro
在windows环境下，wvp-gb28181-pro运行文件如下：
wvp-GB28181-pro-2.7.2.jar
wvp-gb28181-pro的application.yml文件配置如下：
# REDIS数据库配置
redis:
# [必须修改] Redis服务器IP, REDIS安装在本机的,使用127.0.0.1
host: 127.0.0.1
# [必须修改] 端口号
port: 6379
# [可选] 数据库 DB
database: 1
# [可选] 访问密码,若你的redis服务器没有设置密码，就不需要用密码去连接
password: 123456
# [可选] 超时时间
timeout: 10000
# mysql数据源
datasource:
dynamic:
primary: master
datasource:
master:
type: com.zaxxer.hikari.HikariDataSource
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/wvp?useUnicode=true&characterEncoding=UTF8&rewriteBatchedStatements=true&serverTimezone=PRC&useSSL=false&allowMultiQueries=true&allowPublicKeyRetrieval=true
username: root
password: 123456
hikari:
connection-timeout: 20000 # 是客户端等待连接池连接的最大毫秒数
initialSize: 50 # 连接池初始化连接数
maximum-pool-size: 200 # 连接池最大连接数
minimum-idle: 10 # 连接池最小空闲连接数
idle-timeout: 300000 # 允许连接在连接池中空闲的最长时间（以毫秒为单位）
max-lifetime: 1200000 # 是池中连接关闭后的最长生命周期（以毫秒为单位)
#[可选] WVP监听的HTTP端口, 网页和接口调用都是这个端口
server:
port: 18080
# [可选] HTTPS配置， 默认不开启
# ssl:
# [可选] 是否开启HTTPS访问
# enabled: false
# [可选] 证书文件路径，放置在resource/目录下即可，修改xxx为文件名
# key-store: classpath:test.monitor.89iot.cn.jks
# [可选] 证书密码
# key-store-password: gpf64qmw
# [可选] 证书类型， 默认为jks，根据实际修改
# key-store-type: JKS
# 作为28181服务器的配置
sip:
# [必须修改] 本机的IP，对应你的网卡，监听什么ip就是使用什么网卡，
# 如果要监听多张网卡，可以使用逗号分隔多个IP， 例如： 192.168.1.4,10.0.0.4
# 如果不明白，就使用0.0.0.0，大部分情况都是可以的
# 请不要使用127.0.0.1，任何包括localhost在内的域名都是不可以的。
ip: 192.168.1.107
# [可选] 28181服务监听的端口
port: 5060
# 根据国标6.1.2中规定，domain宜采用ID统一编码的前十位编码。国标附录D中定义前8位为中心编码（由省级、市级、区级、基层编号组成，参照GB/T 2260-2007）
# 后两位为行业编码，定义参照附录D.3
# 3701020049标识山东济南历下区 信息行业接入
# [可选]
domain: 4101050000
# [可选]
id: 41010500002000000001
# [可选] 默认设备认证密码，后续扩展使用设备单独密码, 移除密码将不进行校验
password: 123456
# 是否存储alarm信息
alarm: true
#zlm 默认服务器配置
media:
id: 1237788
# [必须修改] zlm服务器的内网IP
ip: 192.168.1.107
# [必须修改] zlm服务器的http.port
http-port: 9000
# [可选] 返回流地址时的ip，置空使用 media.ip
stream-ip: 192.168.1.107
# [可选] wvp在国标信令中使用的ip，此ip为摄像机可以访问到的ip， 置空使用 media.ip
sdp-ip: 192.168.1.107
# [可选] zlm服务器的hook所使用的IP, 默认使用sip.ip
hook-ip: 192.168.1.107
# [可选] zlm服务器的http.sslport, 置空使用zlm配置文件配置
http-ssl-port: 1443
# [可选] zlm服务器的hook.admin_params=secret
secret: JvVotkdN01y4qZHlrJsdq4gD7n9rK6wV
# 启用多端口模式, 多端口模式使用端口区分每路流，兼容性更好。 单端口使用流的ssrc区分， 点播超时建议使用多端口测试
rtp:
# [可选] 是否启用多端口模式, 开启后会在portRange范围内选择端口用于媒体流传输
enable: true
# [可选] 在此范围内选择端口用于媒体流传输, 必须提前在zlm上配置该属性，不然自动配置此属性可能不成功
port-range: 50000,50300 # 端口范围
# [可选] 国标级联在此范围内选择端口发送媒体流,
send-port-range: 50000,50300 # 端口范围
# 录像辅助服务， 部署此服务可以实现zlm录像的管理与下载， 0 表示不使用
record-assist-port: 18081启动wvp-gb28181-pro，如下：
查看wvp-pro
浏览器打开wvp管理系统，如下：
ThingsBoard播放
ThingsBoard：ip= 192.168.1.38
HTML Card代码说明：
html代码如下：
<div class='card iframe-wrapper'>Camera1<br>
<iframe src="http://192.168.1.107:18080/#/play/wasm/ws%3A%2F%2F192.168.1.107%3A9000%2Frtp%2F34020000001320000064_34020000001320000001.live.flv"></iframe>
</div>样式代码如下：
.card { /* thingsboard默认的card */
font-weight: bold;
font-size: 32px;
color: #999;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.iframe-wrapper { /* 我新增的 */
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9宽高比 (计算方式：9/16=0.5625) */
overflow: hidden;
}
.iframe-wrapper iframe { /* 我新增的 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}结束。
扫一扫
1607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
