LiveGBS如何获取接入的海康/大华/宇视/华为摄像头/硬件NVR设备通道视频直播流地址（HLS/HTTP-FLV/WS-FLV/WebRTC/RTMP/RTSP）并完成集成

1、背景介绍

LiveGBS国标GB/T28181流媒体服务器软件，支持设备/平台GB28181协议注册接入、向上级联第三方国标平台，提供可视化WEB管理页面（页面源码开源）；具备云台控制、设备录像检索与回放、语音对讲、用户管理等能力，同时支持多协议流输出，可实现浏览器无插件视频直播。

在实际项目落地过程中，业务系统往往需要集成视频播放能力，本文将详细介绍两种主流的视频集成方式，帮助开发者快速实现GB28181视频流的播放对接。

2、视频流媒体集成方式

LiveGBS提供两种核心的视频集成方案，适配不同业务场景的需求：

2.1 WEB页面集成

直接将LiveGBS内置的播放器页面（直播、回放、电子地图）通过iframe方式嵌入业务系统，无需单独处理流地址，集成成本低。

2.2 视频流地址+播放器集成

通过接口或静态拼接方式获取视频流地址，将地址配置到自研/第三方播放器（如Web播放器、APP播放器、PC播放器）中播放，灵活性更高。推荐使用LivePlayer.js H5播放器，适配多协议流播放。

3、WEB页面集成实操

3.1 直播分享页集成

3.1.1 查看设备通道

上级设备可为NVR、下级平台、单兵设备等，在LiveGBS管理后台点击设备列表的【查看通道】，即可查看该设备下的具体视频通道（摄像头）。

在这里插入图片描述

3.1.2 开启通道分享

通道默认关闭分享功能，需手动开启后才能生成可集成的播放页面（分享的是页面地址，非原始流地址）。开启后可直接通过iframe将分享页嵌入业务系统。

在这里插入图片描述

3.1.3 直播分享页参数配置

分享页支持多参数自定义播放行为，示例代码及参数说明如下：

<!-- 直播页面iframe集成示例 -->
<iframe src="http://ip:10000/play.html?serial=34020000001110000001&code=34020000001320000001&aspect=fullscreen" allowfullscreen allow="autoplay; fullscreen; microphone;"></iframe>

URL参数说明：

参数名说明可选值默认值
serial设备国标编号-无（必填）
code通道国标编号-无（必填）
share是否显示分享按钮yes/noyes
ptz是否显示云台控制yes/noyes
talk是否显示对讲麦克风yes/nono
aspect播放区域宽高比，fullscreen为整页显示wxh（如640x360）/fullscreen-
fluent是否启用流畅模式yes/noyes
autoplay是否自动播放yes/noyes
controls是否显示播放器控制栏yes/noyes
stretch是否拉伸显示yes/nono
muted是否静音播放yes/noyes
protocol播放流格式webrtc/flv/ws_flv/hls/rtmpauto check
token鉴权令牌（未开启分享的通道需携带）-无
3.1.4 分享页播放效果

PC端播放效果：
在这里插入图片描述

移动端可通过扫码或直接访问分享页面观看：
在这里插入图片描述

3.2 时间轴回放分享页集成

设备录像、云端录像均支持通过时间轴回放页面集成，通过type参数区分回放类型，示例代码如下：

<!-- 时间轴回放页面iframe集成示例 -->
<iframe src="http://ip:10000/playback.html?type=device&serial=34020000001110000001&code=34020000001320000001" allowfullscreen allow="autoplay; fullscreen"></iframe>

URL参数说明（补充核心参数，其余同直播页）：

参数名说明可选值默认值
type回放类型device（设备录像）/cloud（云端录像）device
day回放日期YYYYMMDD当天
minutes时间轴游标位置0~1439（分钟）当前时间
calendar是否显示日历yes/noyes

3.3 电子地图分享页集成

电子地图页面也可通过iframe集成，支持定位指定设备/通道，示例代码如下：

<!-- 电子地图页面iframe集成示例 -->
<iframe src="http://ip:10000/map.html" allowfullscreen allow="autoplay; fullscreen; microphone;"></iframe>

URL参数说明（补充核心参数，其余同直播页）：

参数名说明可选值默认值
serial设备国标编号（可选，定位指定设备）-无
code通道国标编号（可选，定位指定通道）-无
trace是否显示设备移动轨迹yes/nono
search是否显示搜索框yes/noyes

4、视频流地址播放集成指南

通过获取原始视频流地址，可灵活对接各类播放器，以下是流地址的获取方式及格式说明。

4.1 页面查看流地址（调试用）

  1. 进入国标设备列表 → 查看通道 → 点击播放按钮（默认播放最优流格式，可切换流类型）；
  2. 打开浏览器开发者模式（F12），在Network面板中跟踪api/v1/stream/start接口的调用请求及返回结果，即可看到各类流地址。

在这里插入图片描述
在这里插入图片描述

4.2 接口调用获取流地址（生产用）

4.2.1 实时直播流地址
接口说明

调用/api/v1/stream/start接口获取实时直播流地址，接口详情参考：实时直播 - 开始直播

在这里插入图片描述

调用示例

请求示例：

http://192.168.2.135:10000/api/v1/stream/start?serial=34020000001110000234&code=34020000001320000234

返回示例（核心流地址字段）：

{
  "FLV": "http://192.168.2.135:10000/sms/34020000002020000001/flv/hls/34020000001110000234_34020000001320000234.flv",
  "HLS": "http://192.168.2.135:10000/sms/34020000002020000001/hls/34020000001110000234_34020000001320000234/34020000001110000234_34020000001320000234_live.m3u8",
  "RTMP": "rtmp://192.168.2.135:11935/hls/34020000001110000234_34020000001320000234",
  "RTSP": "rtsp://192.168.2.135:554/34020000001110000234_34020000001320000234",
  "WS_FLV": "ws://192.168.2.135:10000/sms/34020000002020000001/ws-flv/hls/34020000001110000234_34020000001320000234.flv",
  "WEBRTC": "webrtc://192.168.2.135:10000/sms/34020000002020000001/rtc/34020000001110000234_34020000001320000234"
}
4.2.2 前端设备录像回放流地址
接口说明

调用/api/v1/playback/start接口获取设备录像回放流地址，接口详情参考：前端设备录像 - 开始回放

在这里插入图片描述

调用示例

请求示例：

http://192.168.2.135:10000/api/v1/playback/start?serial=34020000001110000234&code=34020000001310000002&starttime=2024-03-08T10%3A50%3A00&endtime=2024-03-08T11%3A00%3A00

返回示例（核心流地址字段）：

{
  "StreamID": "playback:34020000001110000234:34020000001310000002:1200000109",
  "FLV": "http://192.168.2.135:10000/sms/34020000002020000001/flv/hls/34020000001110000234_34020000001310000002_1200000109.flv",
  "HLS": "http://192.168.2.135:10000/sms/34020000002020000001/hls/34020000001110000234_34020000001310000002_1200000109/live.m3u8",
  "RTMP": "rtmp://192.168.2.135:11935/hls/34020000001110000234_34020000001310000002_1200000109",
  "RTSP": "rtsp://39.98.57.187:554/34020000001110000234_34020000001310000002_1200000109",
  "WEBRTC": "webrtc://192.168.2.135:10000/sms/34020000002020000001/rtc/34020000001110000234_34020000001310000002_1200000109",
  "WS_FLV": "ws://192.168.2.135:10000/sms/34020000002020000001/ws-flv/hls/34020000001110000234_34020000001310000002_1200000109.flv"
}

4.3 各协议流地址提取说明

4.3.1 HTTP-FLV流地址

提取接口返回的FLV字段，示例：

http://192.168.2.135:10000/sms/34020000002020000001/flv/hls/34020000001110000234_34020000001320000234.flv
4.3.2 HLS流地址

提取接口返回的HLS字段，示例：

http://192.168.2.135:10000/sms/34020000002020000001/hls/34020000001110000234_34020000001320000234/34020000001110000234_34020000001320000234_live.m3u8
4.3.3 WebRTC流地址

提取接口返回的WEBRTC字段，示例：

webrtc://192.168.2.135:10000/sms/34020000002020000001/rtc/34020000001110000234_34020000001320000234
4.3.4 RTMP流地址

提取接口返回的RTMP字段（需在服务端开放RTMP对应的TCP端口），示例：

rtmp://192.168.2.135:11935/hls/34020000001110000234_34020000001320000234
4.3.5 WS-FLV流地址

提取接口返回的WS_FLV字段，示例：

ws://192.168.2.135:10000/sms/34020000002020000001/ws-flv/hls/34020000001110000234_34020000001320000234.flv
4.3.6 RTSP流地址
地址提取

提取接口返回的RTSP字段，示例：

rtsp://192.168.2.135:554/34020000001110000234_34020000001320000234
RTSP配置说明

  1. 开启RTSP：在LiveGBS后台「基础配置 → 流媒体服务配置」中配置RTSP端口，并在服务端开放该TCP端口；

    ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/70c593849999516961240726e8cb8270.png在这里插入图片描述

  2. 配置用户密码：在LiveSMS配置文件livesms.ini的[rtsp]节点下添加用户名和密码，重启LiveSMS生效。播放时需在地址中携带鉴权信息，格式如下：

    [rtsp]
username=testname
password=testpass

    带鉴权的RTSP地址示例：

    rtsp://testname:testpass@192.168.2.135:554/34020000001110000234_34020000001320000234

4.4 静态拼接流地址（无需调用接口）

若需直接通过地址拉流，需先在LiveGBS后台「基础配置」中开启「允许直播地址拉流」：

在这里插入图片描述

HTTP端口流地址格式
协议地址格式
WEBRTCwebrtc://{cms_ip}:{port}/sms/{sms_id}/rtc/{设备国标编号}_{通道国标编号}
FLVhttp://{cms_ip}:{port}/sms/{sms_id}/flv/hls/{设备国标编号}_{通道国标编号}.flv
WS_FLVws://{cms_ip}:{port}/sms/{sms_id}/ws-flv/hls/{设备国标编号}_{通道国标编号}.flv
HLShttp://{cms_ip}:{port}/sms/{sms_id}/hls/{设备国标编号}_{通道国标编号}/live.m3u8
RTMPrtmp://{sms_ip}:{port}/hls/{设备国标编号}_{通道国标编号}
RTSPrtsp://{sms_ip}:{port}/{设备国标编号}_{通道国标编号}
HTTPS端口流地址格式
协议地址格式
WEBRTCwebrtcs://{cms_ip}:{port}/sms/{sms_id}/rtc/{设备国标编号}_{通道国标编号}
FLVhttps://{cms_ip}:{port}/sms/{sms_id}/flv/hls/{设备国标编号}_{通道国标编号}.flv
WS_FLVwss://{cms_ip}:{port}/sms/{sms_id}/ws-flv/hls/{设备国标编号}_{通道国标编号}.flv
HLShttps://{cms_ip}:{port}/sms/{sms_id}/hls/{设备国标编号}_{通道国标编号}/live.m3u8
RTMPrtmp://{sms_ip}:{port}/hls/{设备国标编号}_{通道国标编号}
RTSPrtsp://{sms_ip}:{port}/{设备国标编号}_{通道国标编号}

5、常见问题解决

5.1 接口调用返回401 Unauthorized

解决方案参考：LiveGBS流媒体平台GB/T28181常见问题-安全控制HTTP接口鉴权勾选流地址鉴权后401Unauthorized如何播放调用接口

5.2 iframe页面无法全屏播放

解决方案参考：如何配置iframe允许自动播放和全屏操作

6、LiveGBS平台搭建说明

LiveGBS是高稳定性的GB/T28181国标流媒体服务器，支持设备/平台GB28181注册接入、向上级联第三方国标平台，提供可视化WEB管理后台（源码开源），支持云台控制、录像检索回放、语音对讲等能力，可跨平台部署。

核心特性

  • 支持Windows、Linux及国产/嵌入式等多CPU架构操作系统；
  • 多协议流输出（WebRTC/FLV/WS-FLV/HLS/RTMP/RTSP），浏览器无插件播放；
  • 可视化WEB管理，易操作、易集成。

资源获取

设备接入验证

按GB28181规范接入设备/网关平台后，可在LiveGBS后台「国标设备」菜单中查看设备列表，确认接入成功：

在这里插入图片描述

Logo
火山引擎视频云技术社区

火山引擎视频云技术社区，是面向 AI 音视频开发者的技术交流平台。这里汇聚源自抖音、豆包等亿级 DAU 产品的 RTC、直播、点播、AI 媒体处理、音视频互动技术，提供接入指南、最佳实践、性能调优、场景案例、Demo 代码、开源项目、白皮书和 API 文档。社区汇聚官方工程师与一线开发者，为 AI 视频通话、数字人、AI 视频处理等应用的开发与落地提供技术支持。

更多推荐

洛雪音乐桌面版完整实战：找歌、攒列表、定制与排障一次讲清

装完洛雪音乐桌面版（lx-music-desktop），很多人卡在同一件事上：歌是搜到了，播放却不一定响得起来，或者听了几首歌就不知道往哪放。这个基于 Electron + Vue 3 开发的开源播放器，默认设置并不刻意迁就新手，但它的五个在线音乐源、本地列表管理、桌面歌词和音效模块，只要按顺序摸一遍，日常使用就足够了。这篇指南按"找歌 → 攒列表 → 调体验 → 进阶玩法 → 故障排查"五个环节

avatar 火山引擎视频云技术社区

基于 WebRTC-Experiment 的 Firefox 屏幕捕获扩展：从自定义域名到 AMO 发布全指南

> 本文以 [Firefox-Extensions/README.md](https://link.gitcode.com/i/d51aa89ee4d31cc869ed4221467fa333) 为主体，结合仓库内 `enable-screen-capturing` 等目录的源码，讲解如何通过 Firefox 扩展为 WebRTC 页面启用屏幕捕获能力：包括扩展的工作原理（preference 白

avatar 火山引擎视频云技术社区

洛雪音乐桌面版：5 个快捷键加 3 个启动参数，把找歌速度提上来

深夜想找那首老歌，搜索页卡了十秒。洛雪音乐聚合多个音乐源，基于 Electron+Vue 3。掌握洛雪音乐快捷键，搜索到播放只需两步。## 洛雪音乐 30 秒上手：打开、搜索、播放1. 打开软件，焦点默认在搜索框（随时按 `F1` 重新聚焦），输入歌名，结果直接出来。2. 单击歌曲即可试听，默认会先加入"我的列表"的试听列表再播放。3. 想连续听多首，按下节的顺序多选并建歌单。[!

avatar 火山引擎视频云技术社区