海康威視實時視訊監控接入學習 2023.2.16
- 引言
- 1、視訊協定簡介
-
- 1.1 RTSP——Real Time Streaming Protocol（實時流傳輸協定）
- 1.2 RTMP——Real Time Messaging Protocol（實時消息傳輸協定）
- 1.3 HLS——HTTP Live Streaming（基于HTTP的自适應碼率流媒體傳輸協定）
- 2、海康線上視訊接入執行個體
-
- 2.1 檢視海康官網API
-
- 2.1.1 檢視擷取監控資源清單接口（接口1）
- 2.1.2 檢視擷取取流位址接口（接口2）
- 2.2 調用接口擷取視訊流位址
-
- 2.2.1 Java 調用（可封裝為後端服務供前端js調用）
- 2.2.2 C++ 調用
- 2.2.3 JS調用（有待測試）
- 2.3 實時視訊流線上檢視
-
- 2.3.1 rtsp協定（rtsp://ip:port/BSwvVkAUrG6XAMhIEeIMYb66A84s）
- 2.3.2 rtmp協定（rtmp://ip:port/livetv/hunantv）
- 2.3.3 hls協定（http://ip:port/openUrl/AID3VR/live.m3u8）
-
- 2.3.3.1 video.js庫簡介
- 2.3.3.2 video.js庫解析hls視訊（.m3u8）
-
- 2.3.3.2.1 html 代碼
- 2.3.3.2.2 視訊效果
- 3 總結
引言
資訊時代萬物互聯、資料共享的發展趨勢猶如冬春交替、萬象更新一般不可阻擋，與此同時帶來的網絡及資料安全問題也油然而生，目前視訊線上直播、實時安全監控、物聯智慧感覺在人們的生産和生活中随處可見，極大地展現了
計算機硬體、軟體和網絡
等技術的飛速發展。
不得不承認的是，海康威視在國内視訊監控領域無疑是行業翹楚，無論是走在大街上、馬路邊，還是在大型商超、學校、公園、文娛場所、小區、企業、交通路口，我們都可以看到無處不在的監控裝置，如攝像頭，那麼問題來了，現在需要接入遠端視訊流，該如何去實作呢？
- 第一種做法（簡單快速、直接高效、需要一定成本）：尋找監控裝置廠商，向其咨詢相關的SDK，搭建充足的網絡及軟硬體環境，使用廠商提供的插件來接入線上視訊；
- 第二種做法（耗時費力、實時性效果和畫面品質不一定理想）：選擇适合監控裝置支援的回傳視訊流協定，網上搜集相關文檔或利用開源庫實作遠端視訊流實時回傳；
- 第三種做法（難度較大、短期較難實作、成本高）：開發者尋找相關論文，了解視訊協定原理，自己編寫解析代碼，進行功能封裝後實作視訊流解析加載。
1、視訊協定簡介
除了常見的文本、圖檔、音頻之外，視訊作為一種喜聞樂見的資料類型，深受廣大使用者的喜愛和好評，不但包含畫面和聲音，還支援同步進行播放或者循環回放，甚至可以遠端呼叫和操控角度。視訊檔案格式多種多樣（如avi、wmv、mpeg、mp4、m4v、mov、asf、flv、f4v、rmvb、rm、3gp、vob等），每類格式的誕生和發展都展現了時代和技術的進步，為了在
Windows、Linux、Unix、macOS
等多種平台下将視訊進行高效內建，需要設計和約定多種視訊協定以提高相容性和可用性，其中常見的視訊協定包含
rtsp、rtmp和hls
等。
1.1 RTSP——Real Time Streaming Protocol（實時流傳輸協定）
實時流協定（
RTSP
）是一種應用級網絡協定，設計用于通過合适的傳輸協定複用和打包多媒體傳輸流（例如互動式媒體、視訊和音頻）。
RTSP
在娛樂和通信系統中用于控制流媒體伺服器。該協定用于建立和控制端點之間的媒體會話。媒體伺服器的用戶端發出諸如播放、錄制和暫停之類的指令，以便于實時控制從伺服器到用戶端（視訊點播）或從用戶端到伺服器（語音錄制）的媒體流。此外，關于rtsp視訊協定的内容，大家可以參考文章[MS-RTSP]: Real-Time Streaming Protocol (RTSP) Windows Media Extensions
1.2 RTMP——Real Time Messaging Protocol（實時消息傳輸協定）
實時消息傳遞協定（
RTMP
）是一種通信技術，它支援通過網際網路進行實時視訊流傳輸。它基于傳輸控制協定（
TCP
）技術，最初由
Macromedia
為其
Flash Player
開發，後來被
Adobe
收購後成為
Adobe Flash Player
。
最初，
RTMP
主要用于在托管伺服器和視訊播放器之間傳輸内容。就最現代的直播設定而言，RTMP的主要作用是将内容從編碼器傳送到線上視訊主機。這是一個被稱為“攝取”的過程。在直播流媒體的新角色背景下，
RTMP
能夠進行低延遲流媒體，這對于實時直播重大事件的廣播公司來說是一個重要的優勢。它還以最小的緩沖而聞名，這确實增強了使用者體驗。
RTMP
流媒體是傳遞低緩沖區流媒體内容的最佳方式之一，同時也在自适應比特率流和一些網絡會議工具中發揮作用。此外，關于
rtmp
視訊協定的内容，大家可以參考文章What is RTMP? The Real-Time Messaging Protocol: What you Need to Know in 2022
 | |
1.3 HLS——HTTP Live Streaming（基于HTTP的自适應碼率流媒體傳輸協定）
HTTP Live Streaming
（簡稱
HLS
） 是
Apple
實作的基于 HTTP 的自适應比特率流通信協定， 由于采用
HTTP
協定和跨平台性而被廣泛應用，需要根據網絡狀況播放目前可播放的具有最佳品質的音視訊。關于
hls
視訊協定的内容，大家可以參考文章What is HLS (HTTP Live Streaming) and How Does It Work?和
Apple
官網釋出的文章Understanding the HTTP Live Streaming Architecture，個人覺得講解得非常詳細，有時間的小夥伴可以耐心品讀和研究一下🔔🔔🔔。
2、海康線上視訊接入執行個體
假設前提工作已經做好，采用
海康威視
的智能監控裝置，而且裝置已經安裝調試、部署成功，為了成功接入線上視訊，需要進行以下三個步驟：（1）官網API檢視；（2）監控視訊取流接口調用；（3）頁面展示實時視訊。
2.1 檢視海康官網API
首先打開海康開放平台，點選上方菜單欄中資源中心->智能應用平台（
Infovision IoT
）->海康開放平台智能應用平台對接指南。
海康開放平台
| |
| |
之後需要認真閱讀指南中的一些術語，其中AppKey/AppSecret（簡稱
ak/sk
）較為關鍵，一對AppKey/AppSecret用于辨別一個調用方來進行安全認證，接口調用時需要用到這兩個參數加以驗證進而跳過
casLogin
登入；可以看到，監控裝置目前僅支援RTSP、RTMP和HLS三種視訊協定；目前的接口隻支援
Java、C++、C#、C
這四種語言進行調用。
2.1.1 檢視擷取監控資源清單接口（接口1）
打開API清單下的監控資源資訊頁面，找到分頁擷取監控點資源接口，可以了解到該接口為
POST
請求，需要傳入
頁面編号
和
每頁條數
，傳回結果中包含多個監控點組成的清單，每個監控點包含
經度、緯度、高度和相機索引碼
等屬性，利用這些資訊可以在地圖中添加監控點位用以展示相機位址，同時利用相機索引碼還可擷取到相對應的視訊流位址，進而彈出實時監控視窗。
擷取監控資源清單接口
2.1.2 檢視擷取取流位址接口（接口2）
打開API清單下的視訊應用服務->視訊能力，找到擷取監控點預覽取流URL接口，可以了解到該接口為
POST
請求，需要傳入
相機索引碼
，對于protocol參數，可以傳入
rtsp、rtmp和hls
三種協定字元串，然後傳回結果中包含對應相機的取流位址。
擷取取流位址接口
2.2 調用接口擷取視訊流位址
在海康官方SDK下載下傳位址頁面可根據需要下載下傳相關的插件為自己所用，點選開發指南可檢視具體的API調用方法和操作步驟。
2.2.1 Java 調用（可封裝為後端服務供前端js調用）
artemis-http-client.jar下載下傳位址
這裡采用
Java
代碼調用需要依賴
artemis-http-client.jar
包，由于安全認證庫已上傳公網倉庫，是以可以直接建立Maven工程，在.pom檔案中引入依賴；也可以在Maven庫網站下載下傳該jar包後，放至Java工程的依賴庫中即可；當然更可以利用官網下載下傳的插件
OpenAPI安全認證庫（Java）
。
調用示例代碼如下：
import com.hikvision.artemis.sdk.ArtemisHttpUtil;
import com.hikvision.artemis.sdk.config.ArtemisConfig;
import java.util.HashMap;
import java.util.Map;
public class GetCameraPreviewURL {
public static String GetCameraPreviewURL() {
/**
* STEP1：設定平台參數，根據實際情況,設定host appkey appsecret 三個參數.
*/
ArtemisConfig.host = "127.0.0.1:443"; // 平台的ip端口
ArtemisConfig.appKey = "29180881"; // 密鑰appkey
ArtemisConfig.appSecret = "XO0wCAYGi4KV70ybjznx";// 密鑰appSecret
/**
* STEP2：設定OpenAPI接口的上下文
*/
final String ARTEMIS_PATH = "/artemis";
/**
* STEP3：設定接口的URI位址
*/
final String previewURLsApi = ARTEMIS_PATH + "/api/video/v1/cameras/previewURLs";
Map<String, String> path = new HashMap<String, String>(2) {
{
put("https://", previewURLsApi);//根據現場環境部署确認是http還是https
}
};
/**
* STEP4：設定參數送出方式
*/
String contentType = "application/json";
/**
* STEP5：組裝請求參數
*/
JSONObject jsonBody = new JSONObject();
jsonBody.put("cameraIndexCode", "748d84750e3a4a5bbad3cd4af9ed5101");
jsonBody.put("streamType", 0);
jsonBody.put("protocol", "rtsp");
jsonBody.put("transmode", 1);
jsonBody.put("expand", "streamform=ps");
String body = jsonBody.toJSONString();
/**
* STEP6：調用接口
*/
String result = ArtemisHttpUtil.doPostStringArtemis(path, body, null, null, contentType , null);// post請求application/json類型參數
return result;
}
public static void main(String[] args) {
String result = GetCameraPreviewURL();
System.out.println("result結果示例: " + result);
}
}
2.2.2 C++ 調用
調用示例代碼如下：
#include "iostream"
#include "sstream"
#include "HttpUtillib.h"
#include "HttpHeader.h"
typedef struct Unit_query_s
{
string artemisIp; // 平台的ip位址（必填）
int artemisPort; // 平台的Port（必填）
string appKey; // 密鑰的appKey（必填）
string appSecret; // 密鑰的appSecret（必填）
}Unit_query_t;
/*示例1：（Post）擷取目前AppKey的合作方對應監控點清單*/
string FindIndexCodesOfAppKey(Unit_query_t query)
{
std::stringstream ss;
ss << "http://" << query.artemisIp << ":" << query.artemisPort
<< "/artemis/api/resource/v1/camera/advance/cameraList";
map<string, string> headers;
//（必填的Http頭）根據期望的Response内容類型設定
headers.insert(std::make_pair(HttpHeader::HTTP_HEADER_ACCEPT, "application/json"));
headers.insert(std::make_pair(HttpHeader::HTTP_HEADER_CONTENT_TYPE, "application/json;charset=UTF-8"));
list<string> signHeaderPrefixList;
char strBody[1024] = { 0 };
sprintf_s(strBody, 1024, "{\"pageNo\":%d,\"pageSize\":%d}", 1, 100);
return HttpPost(ss.str(), headers, strBody, query.appKey, query.appSecret, 30, signHeaderPrefixList);
}
int main()
{
Unit_query_t myQuery;
myQuery.appKey = "26018161";
myQuery.appSecret = "tdxjiS8bNXZTOf80ymWw";
myQuery.artemisIp = "x.x.x.x";
myQuery.artemisPort = 80;
//1 Post
std::string str1 = FindIndexCodesOfAppKey(myQuery);
std::cout << str1 << std::endl << std::endl;
system("pause");
return 0;
}
2.2.3 JS調用（有待測試）
在Github搜尋
artemis-http-client
會出現一個
nodejs
封裝的HIKVISION artemis-http-client nodejs SDK，不過這個代碼的時效性不夠，可能不會随官網更新而改變，是以其中的功能有待驗證，由于時間較緊，還是未能加以測試，有時間的小夥伴可以嘗試着學習研究👍👍👍。
調用代碼示例：
const co = require('co');
const {Client} = require('artemis-http-client');
//new Client(appKey, appSecret)
const client = new Client('23967750', 'BZcz3VlqL1DVhWeF1boE');
//GET
co(function* () {
var url = 'https://open8200.hikvision.com/artemis/api/artemis/v1/minus';
var result = yield client.get(url, {
query: {
'a': 1,
'b': 1
},
headers: {
accept: 'application/json',
'content-type':'text/plain;charset=UTF-8'
}
});
console.log(JSON.stringify(result));
}).catch((error)=>{
//請求錯誤資訊
console.log(JSON.stringify(error.message));
});
//POST
co(function* () {
var url = 'https://open8200.hikvision.com/artemis/api/artemis/v1/plus';
var result = yield client.post(url, {
headers: {
'content-type': "application/x-www-form-urlencoded;charset=UTF-8"
},
data: {
'a': 1,
'b': 1
}
});
console.log(JSON.stringify(result));
}).catch((error)=>{
//請求錯誤資訊
console.log(JSON.stringify(error.message));
});
2.3 實時視訊流線上檢視
2.3.1 rtsp協定（rtsp://ip:port/BSwvVkAUrG6XAMhIEeIMYb66A84s）
對于
rtsp
協定的視訊流位址，建議采用官方插件，在用戶端安裝完成後使用。
2.3.2 rtmp協定（rtmp://ip:port/livetv/hunantv）
對于
rtmp
協定的視訊流位址，可以參考vue-rtmp-cli3.0，但需要用戶端的浏覽器支援
Flash
，依賴于Flash插件，有興趣的小夥伴可以研究一下。
2.3.3 hls協定（http://ip:port/openUrl/AID3VR/live.m3u8）
對于
hls
協定的視訊流位址，可以采用
video.js
庫進行實時播放。
2.3.3.1 video.js庫簡介
video.js庫是一個為
HTML5
世界從頭開始建構的網絡視訊播放器。它支援
HTML5
視訊和媒體源擴充，以及其他播放技術，如YouTube和Vimeo（通過插件）。它支援桌面和移動裝置上的視訊播放。該項目于2010年中期開始，目前該播放器在超過700000個網站上使用。具體使用教程可參考videojs快速開始。
2.3.3.2 video.js庫解析hls視訊（.m3u8）
利用
video.js
庫可在html靜态網頁中直接接入hls線上視訊，這裡分别以m3u8線上url1和m3u8線上url2兩個線上執行個體來進行測試。
2.3.3.2.1 html 代碼
video.js
調用hls視訊執行個體
html
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-jjg-online</title>
<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
</head>
<body>
<h1 style="margin-left:25%;">線上視訊（hls-m3ub格式）------<strong style="color:blue;">By jing_zhong 2023.2.16</strong></h1>
<div style="width:100%;height:90%">
<video id="myVideo" class="video-js vjs-default-skin" controls preload="auto" height="770px" width="1720px" height="auto" data-setup='{}'>
<!--
<source src="https://v7.dious.cc/20220807/YeSnYrwi/index.m3u8" type="application/x-mpegURL">
-->
<source src="https://v7.dious.cc/20220802/qyRQEXdQ/index.m3u8" type="application/x-mpegURL">
</video>
</div>
<script>
var myVideo = videojs('myVideo',{
autoplay: true, // 設定自動播放
controls: true, // 顯示播放的控件
preload: "auto", // 預加載
muted: true, // 設定了它為true，才可實作自動播放,同時視訊也被靜音 （Chrome66及以上版本，禁止音視訊的自動播放）
bigPlayButton : true,
textTrackDisplay : false,
posterImage: false,
errorDisplay : true,
controlBar: {
volumePanel:{
inline:false}},
// playbackRates: [0.5,1,1.25,1.5,2],
},function(){
this.on('error',function(){
myVideo.errorDisplay.close()
alert('抱歉，視訊位址解析錯誤≥﹏≤ \n 請檢查視訊連結位址是否正确')
})
}
)
</script>
</body>
</html>
2.3.3.2.2 視訊效果
視訊1接入效果
視訊2接入效果
3 總結
交通、安防、視訊直播、線上會議、網絡帶貨
等領域都需要将視訊流快速轉發以便用戶端接入，希望給使用者帶來極緻的服務體驗。當然，如果有條件的話，還是建議到海康官網下載下傳視訊插件，然後利用官方SDK解析RTSP和RTMP等協定的視訊流，在用戶端或浏覽器安裝好
視訊插件
，這樣會比
HLS
協定的視訊流傳輸效果更加快速、響應時間更短。
注：本文旨在學習視訊實時接入方法，分享個人學習心得，希望與廣大開發者共同交流思想，切勿用于非法商業用途！！！