@

1、背景
2、影片流媒體整合
- 2.1、頁面整合
- 2.1、影片流地址播放整合
3、頁面整合說明
- 3.1、直播分享頁整合
  - 3.1.1、檢視通道
  - 3.1.2、開啟分享
  - 3.1.3、分享頁面傳參
  - 3.1.4、分享頁面播放
- 3.2、時間軸回放分享頁整合
- 3.3、電子地圖分享頁整合
4、影片流地址播放整合說明
- 4.1、獲取直播流地址（頁面檢視）
- 4.2、獲取直播流地址（介面呼叫）
  - 4.2.1、實時直播
    - 4.2.1.1、開始直播介面說明
    - 4.2.1.1、開始直播介面呼叫示例
  - 4.2.2、前端裝置錄影
    - 4.2.2.1、開始回放介面說明
    - 4.2.2.2、開始回放介面呼叫示例
  - 4.2.3、獲取HTTP-FLV直播流地址
  - 4.2.4、獲取HLS直播流地址
  - 4.2.5、獲取WebRTC直播流地址
  - 4.2.6、獲取RTMP直播流地址
  - 4.2.7、獲取WS-FLV直播流地址
  - 4.2.8、獲取RTSP直播流地址
    - 4.2.8.1、開啟RTSP
    - 4.2.8.2、配置RTSP流使用者密碼
- 4.3、獲取直播流地址（靜態拼接）
5、介面呼叫相關問題
6、搭建GB28181影片直播平臺

1、背景

LiveGBS國標GB/T28181流媒體伺服器軟體，支援裝置|平臺GB28181註冊接入、向上級聯第三方國標平臺，視覺化的WEB頁面管理(頁面原始碼開源)；支援雲臺控制、裝置錄影檢索、回放，支援語音對講，使用者管理，多種協議流輸出，實現瀏覽器無外掛直播。

在專案過程中，需要播放影片流。直接在自己的業務系統裡面播放。影片整合的方式有幾種呢？下面會詳細說明2中常見的整合方式。

2、影片流媒體整合

2.1、頁面整合

直接整合包含播放器的頁面到業務系統中去，如 iframe 方式整合頁面。LiveGBS支援整合分享的直播頁面，也可以整合雲端錄影或是裝置錄影回看頁面

2.1、影片流地址播放整合

透過介面或其它方式獲取影片流的地址，設定到web播放器|APP播放器|PC播放器中，進行播放。可以使用LivePlayer.js H5播放器。

3、頁面整合說明

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, 預設 auto check

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, 預設 auto check

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, 預設 auto check

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.1、開始直播介面呼叫示例

介面請求示例

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

在這裡插入圖片描述

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、介面呼叫相關問題

LiveGBS國標GB/T28181流媒體平臺呼叫介面時遇到401Unauthorized時怎麼辦？

6、搭建GB28181影片直播平臺

高穩GB/T28181國標流媒體伺服器軟體，支援裝置|平臺GB28181註冊接入、向上級聯第三方國標平臺，視覺化的WEB頁面管理(頁面原始碼開源)；支援雲臺控制、裝置錄影檢索、回放，支援語音對講，使用者管理，多種協議流輸出，實現瀏覽器無外掛直播

根據GB28181規範，接入裝置或是閘道器平臺，在LiveGBS的web管理後臺的，國標裝置選單介面中可以檢視到裝置列表
在這裡插入圖片描述

支援 Windows Linux 及其它CPU架構（國產、嵌入式...）作業系統
安裝包下載、安裝使用說明、 WEB前端原始碼

LiveGBS流媒體平臺GB/T28181功能-獲取GB28181接入的海康大華宇視華為攝像頭硬體NVR裝置通道影片直播流地址HLS/HTTP-FLV/WS-FLV/WebRTC/RTMP/RTSP

1、背景

2、影片流媒體整合

2.1、頁面整合

2.1、影片流地址播放整合

3、頁面整合說明

3.1、直播分享頁整合

3.1.1、檢視通道

3.1.2、開啟分享

3.1.3、分享頁面傳參

3.1.4、分享頁面播放

3.2、時間軸回放分享頁整合

3.3、電子地圖分享頁整合

4、影片流地址播放整合說明

4.1、獲取直播流地址（頁面檢視）

4.2、獲取直播流地址（介面呼叫）

4.2.1、實時直播

4.2.1.1、開始直播介面說明

4.2.1.1、開始直播介面呼叫示例

4.2.2、前端裝置錄影

4.2.2.1、開始回放介面說明

4.2.2.2、開始回放介面呼叫示例

4.2.3、獲取HTTP-FLV直播流地址

4.2.4、獲取HLS直播流地址

4.2.5、獲取WebRTC直播流地址

4.2.6、獲取RTMP直播流地址

4.2.7、獲取WS-FLV直播流地址

4.2.8、獲取RTSP直播流地址

4.2.8.1、開啟RTSP

4.2.8.2、配置RTSP流使用者密碼

4.3、獲取直播流地址（靜態拼接）

5、介面呼叫相關問題

6、搭建GB28181影片直播平臺

相關文章

LiveGBS流媒體平臺GB/T28181功能-獲取GB28181接入的海康大華宇視華為攝像頭硬體NVR裝置通道影片直播流地址HLS/HTTP-FLV/WS-FLV/WebRTC/RTMP/RTSP

1、背景

2、影片流媒體整合

2.1、頁面整合

2.1、影片流地址播放整合

3、頁面整合說明

3.1、 直播分享頁整合

3.1.1、檢視通道

3.1.2、開啟分享

3.1.3、分享頁面傳參

3.1.4、分享頁面播放

3.2、時間軸回放分享頁整合

3.3、電子地圖分享頁整合

4、影片流地址播放整合說明

4.1、獲取直播流地址（頁面檢視）

4.2、獲取直播流地址（介面呼叫）

4.2.1、實時直播

4.2.1.1、開始直播介面說明

4.2.1.1、開始直播介面呼叫示例

4.2.2、前端裝置錄影

4.2.2.1、開始回放介面說明

4.2.2.2、開始回放介面呼叫示例

4.2.3、獲取HTTP-FLV直播流地址

4.2.4、獲取HLS直播流地址

4.2.5、獲取WebRTC直播流地址

4.2.6、獲取RTMP直播流地址

4.2.7、獲取WS-FLV直播流地址

4.2.8、獲取RTSP直播流地址

4.2.8.1、開啟RTSP

4.2.8.2、配置RTSP流使用者密碼

4.3、獲取直播流地址（靜態拼接）

5、介面呼叫相關問題

6、搭建GB28181影片直播平臺

相關文章

3.1、直播分享頁整合