1、背景

LiveGBS作为国标GB/T28181流媒体服务器软件,具备强大的功能。它支持设备或平台通过GB28181协议进行注册接入,同时也能向上级联第三方国标平台。其可视化的WEB页面管理功能,且页面源码开源,为用户提供了便捷的操作体验。此外,它还支持云台控制、设备录像检索与回放、语音对讲以及用户管理等功能,并且能够输出多种协议流,实现了浏览器无插件直播。

在实际项目中,常常需要在自身业务系统中播放视频流。那么,有哪些常见的视频集成方式呢?下面将详细介绍两种主流的集成方法。

2、视频流媒体集成

2.1、WEB页面集成

这种方式是将包含播放器的页面直接集成到业务系统中,例如采用iframe方式进行页面集成。LiveGBS既支持集成分享的直播页面,也可以集成“云端录像”或是“设备录像”的回看页面。

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

通过接口或其他途径获取视频流的地址,然后将其设置到web播放器、APP播放器或PC播放器中进行播放。这里推荐使用LivePlayer.js H5播放器。

3、WEB页面集成说明

3.1、直播分享页集成

3.1.1、查看通道

上一层的设备可以是NVR、下级平台或者单兵设备。在设备列表中点击【查看通道】,即可查看到该设备下具体的视频通道(摄像头)。

在这里插入图片描述

3.1.2、开启分享

通道支持配置开启分享功能,分享后会获得一个具体的播放页面。需要注意的是,分享的是页面地址,并非原始流地址。我们可以直接将分享页面通过iframe方式集成到自己的业务系统中。

LiveGBS可以对单个视频通道的分享权限进行控制,默认情况下通道是不分享的,用户可以在通道列表中开启分享。

在这里插入图片描述

3.1.3、直播分享页传参

具体的分享页面可以附带一些参数,详细信息可参考:使用分享页面。

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

其中URL参数说明如下:

  • serial:设备国标编号
  • code:通道国标编号
  • share:是否显示分享,可选值为yes/no,默认值为yes
  • ptz:是否显示云台控制,可选值为yes/no,默认值为yes
  • talk:是否显示对讲麦克风,可选值为yes/no,默认值为no
  • aspect:配置只显示视频播放区域,同时指定宽高比,可选值如wxh(例如640x360,即16:9),当aspect = fullscreen时,整页显示播放器
  • fluent:是否以流畅模式播放,可选值为yes/no,默认值为yes
  • autoplay:是否自动播放,可选值为yes/no,默认值为yes
  • controls:是否显示播放器控制栏,可选值为yes/no,默认值为yes
  • stretch:是否拉伸显示,可选值为yes/no,默认值为no
  • muted:播放器是否静音,可选值为yes/no,默认值为yes
  • protocol:播放流格式,可选值为webrtc/flv/ws_flv/hls/rtmp,默认自动检测
  • token:鉴权token,可选参数,未开启分享的通道需要携带登录接口返回的URLToken
3.1.4、分享页面播放

在这里插入图片描述

在手机端,用户可以直接扫码观看,也可以使用手机浏览器访问分享的直播页面。

在这里插入图片描述

3.2、时间轴回放分享页集成

同样,“设备录像”和“云端录像”也可以通过时间轴页面分享并集成到自己的业务系统中。通过传递type参数来区分是“设备录像”还是“云端录像”。

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

其中URL参数说明如下:

  • type:回放类型,可选值为device/cloud,默认值为device
  • serial:设备国标编号
  • code:通道国标编号
  • day:当前日期,可选值格式为YYYYMMDD,默认值为当天
  • minutes:当前时间轴游标位置,可选值范围为0 - 1439,默认值为当前时间
  • calendar:是否显示日历,可选值为yes/no,默认值为yes
  • autoplay:是否自动播放,可选值为yes/no,默认值为yes
  • controls:是否显示播放器控制栏,可选值为yes/no,默认值为yes
  • stretch:是否拉伸显示,可选值为yes/no,默认值为no
  • muted:播放器是否静音,可选值为yes/no,默认值为yes
  • protocol:播放流格式,仅设备录像有效,可选值为webrtc/flv/ws_flv/hls/rtmp,默认自动检测
  • token:鉴权token,可选参数,未开启分享的通道需要携带登录接口返回的URLToken

3.3、电子地图分享页集成

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

其中URL参数说明如下:

  • serial:设备国标编号,可选参数
  • code:通道国标编号,可选参数
  • trace:是否显示移动轨迹,可选值为yes/no,默认值为no
  • search:是否显示搜索框,可选值为yes/no,默认值为yes
  • ptz:是否显示云台控制,可选值为yes/no,默认值为yes
  • talk:是否显示对讲麦克风,可选值为yes/no,默认值为no
  • fluent:是否以流畅模式播放,可选值为yes/no,默认值为yes
  • autoplay:是否自动播放,可选值为yes/no,默认值为yes
  • controls:是否显示播放器控制栏,可选值为yes/no,默认值为yes
  • stretch:是否拉伸显示,可选值为yes/no,默认值为no
  • muted:播放器是否静音,可选值为yes/no,默认值为yes
  • protocol:播放流格式,可选值为webrtc/flv/ws_flv/hls/rtmp,默认自动检测
  • token:鉴权token,可选参数,未开启分享的通道需要携带登录接口返回的URLToken

4、视频流地址播放集成说明

要获取通道视频直播流地址,下面将详细介绍几种获取直播流播放地址的方式。我们可以使用LivePlayer.js H5播放器进行播放。

4.1、获取直播流地址(页面查看)

  • 进入国标设备,点击【查看通道】,再点击【播放】。默认播放的是直播流,用户可以点击下面的选项切换播放的直播流格式。
    这里的点击播放操作,实际上是获取“视频直播流地址”并设置到播放器中。下面将具体说明如何获取视频直播流地址。

在这里插入图片描述

  • 使用浏览器跟踪NETWORK
    在浏览器中按下F12打开开发者模式,然后查看通道并点击播放。接着在Network中跟踪到api/v1/stream/start接口的调用和结果。

在这里插入图片描述

4.2、获取直播流地址(接口调用)

4.2.1、实时直播
4.2.1.1、开始直播接口说明

通过调用接口的方式可以获取直播流地址,具体接口可参考 实时直播 - 开始直播 /api/v1/stream/start。

在这里插入图片描述

4.2.1.2、开始直播接口调用示例

接口请求示例:

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、前端设备录像
4.2.2.1、开始回放接口说明

通过调用接口的方式可以获取前端设备录像的直播流地址,具体接口可参考 前端设备录像 - 开始回放/api/v1/playback/start。

在这里插入图片描述

4.2.2.2、开始回放接口调用示例

接口请求示例:

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.2.3、获取HTTP - FLV直播流地址

只需取上面接口返回的FLV字段即可,例如:

"FLV": "http://192.168.2.135:10000/sms/34020000002020000001/flv/hls/34020000001110000234_34020000001320000234.flv",
4.2.4、获取HLS直播流地址

取上面接口返回的HLS字段,例如:

"HLS": "http://192.168.2.135:10000/sms/34020000002020000001/hls/34020000001110000234_34020000001320000234/34020000001110000234_34020000001320000234_live.m3u8",
4.2.5、获取WebRTC直播流地址

取上面接口返回的WEBRTC字段,例如:

"WEBRTC": "webrtc://192.168.2.135:10000/sms/34020000002020000001/rtc/34020000001110000234_34020000001320000234",
4.2.6、获取RTMP直播流地址

取上面接口返回的RTMP字段,需要注意的是,对应的RTMP端口需要在服务端开放TCP,例如:

"RTMP": "rtmp://192.168.2.135:11935/hls/34020000001110000234_34020000001320000234",
4.2.7、获取WS - FLV直播流地址

取上面接口返回的WS_FLV字段,例如:

"WS_FLV": "ws://192.168.2.135:10000/sms/34020000002020000001/ws-flv/hls/34020000001110000234_34020000001320000234.flv",
4.2.8、获取RTSP直播流地址

取上面接口返回的RTSP字段,例如:

"RTSP": "rtsp://192.168.2.135:554/34020000001110000234_34020000001320000234",
4.2.8.1、开启RTSP

在基础配置 -> 流媒体服务配置中配置RTSP端口,对应的RTSP端口需要在服务端开放TCP。

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

4.2.8.2、配置RTSP流用户密码
  • 在LiveSMS的配置文件中进行配置。
  • 在livesms.ini的[rtsp]部分添加如下示例配置,将示例中的testname和testpass替换为您自己的配置。
  • 重启LiveSMS后生效。如果配置开启了该功能,播放RTSP流地址时需要加上用户名和密码,格式如下:
rtsp://用户名:密码@192.168.2.135:554/34020000001110000234_34020000001320000234

配置示例:

...
[rtsp]
username=testname
password=testpass
...

4.3、获取直播流地址(静态拼接)

如果需要通过直播流地址直接拉流,而不是通过开始直播接口,需要开启基础配置 -> 允许直播地址拉流。

在这里插入图片描述

配置规则如下:

HTTP端口直播流地址格式

  • WEBRTC:webrtc://{cms_ip}:{port}/sms/{sms_id}/rtc/{设备国标编号}_{通道国标编号}
  • FLV:http://{cms_ip}:{port}/sms/{sms_id}/flv/hls/{设备国标编号}_{通道国标编号}.flv
  • WS_FLV:ws://{cms_ip}:{port}/sms/{sms_id}/ws-flv/hls/{设备国标编号}_{通道国标编号}.flv
  • HLS:http://{cms_ip}:{port}/sms/{sms_id}/hls/{设备国标编号}_{通道国标编号}/live.m3u8
  • RTMP:rtmp://{sms_ip}:{port}/hls/{设备国标编号}_{通道国标编号}
  • RTSP:rtsp://{sms_ip}:{port}/{设备国标编号}_{通道国标编号}

HTTPS端口直播流地址格式

  • WEBRTC:webrtcs://{cms_ip}:{port}/sms/{sms_id}/rtc/{设备国标编号}_{通道国标编号}
  • FLV:https://{cms_ip}:{port}/sms/{sms_id}/flv/hls/{设备国标编号}_{通道国标编号}.flv
  • WS_FLV:wss://{cms_ip}:{port}/sms/{sms_id}/ws-flv/hls/{设备国标编号}_{通道国标编号}.flv
  • HLS:https://{cms_ip}:{port}/sms/{sms_id}/hls/{设备国标编号}_{通道国标编号}/live.m3u8
  • RTMP:rtmp://{sms_ip}:{port}/hls/{设备国标编号}_{通道国标编号}
  • RTSP:rtsp://{sms_ip}:{port}/{设备国标编号}_{通道国标编号}

5、相关问题

5.1、接口调用401

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

5.2、iframe全屏播放

可参考 如何配置iframe允许自动播放和全屏操作。

6、搭建GB28181视频直播平台

LiveGBS是一款高稳定性的GB/T28181国标流媒体服务器软件,支持设备或平台通过GB28181协议进行注册接入,同时也能向上级联第三方国标平台。其可视化的WEB页面管理功能,且页面源码开源,为用户提供了便捷的操作体验。此外,它还支持云台控制、设备录像检索与回放、语音对讲以及用户管理等功能,并且能够输出多种协议流,实现了浏览器无插件直播。

根据GB28181规范,接入设备或网关平台后,在LiveGBS的web管理后台的国标设备菜单界面中可以查看到设备列表。

在这里插入图片描述

该软件支持Windows、Linux以及其他CPU架构(国产、嵌入式等)的操作系统。您可以通过以下链接获取相关资源:

Logo

邀请您加入社区

更多推荐