一、前言
視頻監控系統做到後面，逐漸需要搭配人工智能算法，將算法計算後的信息以OSD標籤以及方框各種圖形的信息顯示到視頻中，這種當然和OSD一樣也是有兩種方式，一種是源頭就貼好了，一種是將結果發給軟件這邊解析繪製，於是才需要這種通用的圖形繪製需求，有了之前OSD標籤信息的經驗，這個在最初設計的時候就考慮了很多可能的要素，比如圖形的邊框大小、邊框顏色、背景顏色，區域爲了兼容更多的內容，除了矩形，還支持QPainterPath路徑集合，多邊形區域QList
一般都是矩形區域居多，比如人臉框，人體區域、物體區域等，都是一個矩形區域，圖形信息和OSD標籤信息一樣，都可以選擇三種繪製方式，一種是繪製到覆蓋窗體中，一種是繪製到圖片中，一種是源頭數據繪製好，如果源頭支持的儘量源頭就繪製好，比如ffmpeg的濾鏡就專幹這事的，而且乾的非常漂亮，親測幾千個文字使用和幾千個矩形框同時繪製在源頭數據中，效果非常好，性能還是非常高的，就是數量越多佔用CPU越高。
//圖形信息(人臉框和多邊形區域等)
struct GraphInfo {
QString name; //名字唯一標識符(方便刪除或更新)
int borderWidth; //邊框大小
QColor borderColor; //邊框顏色
QColor bgColor; //背景顏色
QRect rect; //矩形區域
QPainterPath path; //路徑集合
QList<QPoint> points; //點座標集合
GraphInfo() {
name = "graph";
borderWidth = 2;
borderColor = "#FF0000";
bgColor = Qt::transparent;
}
};
二、效果圖
三、體驗地址
- 國內站點：https://gitee.com/feiyangqingyun
- 國際站點：https://github.com/feiyangqingyun
- 個人作品：https://blog.csdn.net/feiyangqingyun/article/details/97565652
- 體驗地址：https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取碼：01jf 文件名：bin_video_demo/bin_linux_video。
四、相關代碼
void WidgetHelper::drawRect(QPainter *painter, const QRect &rect, int borderWidth, QColor borderColor, bool angle)
{
painter->setPen(QPen(borderColor, borderWidth));
//背景顏色
borderColor.setAlpha(50);
//painter->setBrush(QBrush(borderColor));
int x = rect.x();
int y = rect.y();
int width = rect.width();
int height = rect.height();
if (!angle) {
painter->drawRect(x, y, width, height);
} else {
//繪製四個角
int offset = 10;
painter->drawLine(x, y, x + offset, y);
painter->drawLine(x, y, x, y + offset);
painter->drawLine(x + width - offset, y, x + width, y);
painter->drawLine(x + width, y, x + width, y + offset);
painter->drawLine(x, y + height - offset, x, y + height);
painter->drawLine(x, y + height, x + offset, y + height);
painter->drawLine(x + width - offset, y + height, x + width, y + height);
painter->drawLine(x + width, y + height - offset, x + width, y + height);
}
}
void WidgetHelper::drawPoints(QPainter *painter, const QList<QPoint> &pts, int borderWidth, QColor borderColor)
{
//至少要兩個點
if (pts.count() < 2) {
return;
}
painter->setPen(QPen(borderColor, borderWidth));
//背景顏色
borderColor.setAlpha(50);
//painter->setBrush(QBrush(borderColor));
//繪製多邊形
QPainterPath path;
//先移動到起始點
path.moveTo(pts.first());
//逐個連接線條
int count = pts.count();
for (int i = 1; i < count; ++i) {
path.lineTo(pts.at(i));
}
//閉合圖形
path.closeSubpath();
painter->drawPath(path);
}
void WidgetHelper::drawPath(QPainter *painter, QPainterPath path, int borderWidth, QColor borderColor)
{
painter->setPen(QPen(borderColor, borderWidth));
painter->drawPath(path);
}
void AbstractVideoWidget::drawInfo(QPainter *painter)
{
//只有音頻和句柄模式不用繪製OSD
if (videoWidth == 0 || onlyAudio || widgetPara.videoMode == VideoMode_Hwnd) {
return;
}
//標籤位置儘量偏移多一點避免遮擋
QRect rect = image.isNull() ? coverWidget->rect() : image.rect();
int borderWidth = widgetPara.borderWidth + 5;
rect = QRect(rect.x() + borderWidth, rect.y() + borderWidth, rect.width() - (borderWidth * 2), rect.height() - (borderWidth * 2));
//將標籤信息繪製到遮罩層
if (widgetPara.osdDrawMode == DrawMode_Cover) {
foreach (OsdInfo osd, listOsd) {
if (osd.visible) {
painter->save();
WidgetHelper::drawOsd(painter, osd, rect);
painter->restore();
}
}
}
//將圖形信息繪製到遮罩層
if (widgetPara.graphDrawMode == DrawMode_Cover) {
foreach (GraphInfo graph, listGraph) {
painter->save();
if (!graph.rect.isEmpty()) {
WidgetHelper::drawRect(painter, graph.rect, graph.borderWidth, graph.borderColor);
}
if (!graph.path.isEmpty()) {
WidgetHelper::drawPath(painter, graph.path, graph.borderWidth, graph.borderColor);
}
if (graph.points.count() > 0) {
WidgetHelper::drawPoints(painter, graph.points, graph.borderWidth, graph.borderColor);
}
painter->restore();
}
}
}
void AbstractVideoWidget::drawImage(QPainter *painter)
{
if (image.isNull()) {
return;
}
//標籤位置儘量偏移多一點避免遮擋
QRect rect = image.isNull() ? coverWidget->rect() : image.rect();
int borderWidth = widgetPara.borderWidth + 5;
rect = QRect(rect.x() + borderWidth, rect.y() + borderWidth, rect.width() - (borderWidth * 2), rect.height() - (borderWidth * 2));
//將標籤信息繪製到圖片上
if (widgetPara.osdDrawMode == DrawMode_Image) {
foreach (OsdInfo osd, listOsd) {
if (osd.visible) {
QPainter painter;
painter.begin(&image);
//painter.setRenderHints(QPainter::Antialiasing);
WidgetHelper::drawOsd(&painter, osd, rect);
painter.end();
}
}
}
//將圖形信息繪製到圖片上
if (widgetPara.graphDrawMode == DrawMode_Image) {
foreach (GraphInfo graph, listGraph) {
QPainter painter;
painter.begin(&image);
//painter.setRenderHints(QPainter::Antialiasing);
if (!graph.rect.isEmpty()) {
WidgetHelper::drawRect(&painter, graph.rect, graph.borderWidth, graph.borderColor);
}
if (!graph.path.isEmpty()) {
WidgetHelper::drawPath(&painter, graph.path, graph.borderWidth, graph.borderColor);
}
if (graph.points.count() > 0) {
WidgetHelper::drawPoints(&painter, graph.points, graph.borderWidth, graph.borderColor);
}
painter.end();
}
}
//繪製圖片
painter->save();
painter->drawImage(imageRect, image);
painter->restore();
}
五、功能特點
5.1 基礎功能
- 支持各種音頻視頻文件格式，比如mp3、wav、mp4、asf、rm、rmvb、mkv等。
- 支持本地攝像頭設備，可指定分辨率、幀率。
- 支持各種視頻流格式，比如rtp、rtsp、rtmp、http等。
- 本地音視頻文件和網絡音視頻文件，自動識別文件長度、播放進度、音量大小、靜音狀態等。
- 文件可以指定播放位置、調節音量大小、設置靜音狀態等。
- 支持倍速播放文件，可選0.5倍、1.0倍、2.5倍、5.0倍等速度，相當於慢放和快放。
- 支持開始播放、停止播放、暫停播放、繼續播放。
- 支持抓拍截圖，可指定文件路徑，可選抓拍完成是否自動顯示預覽。
- 支持錄像存儲，手動開始錄像、停止錄像，部分內核支持暫停錄像後繼續錄像，跳過不需要錄像的部分。
- 支持無感知切換循環播放、自動重連等機制。
- 提供播放成功、播放完成、收到解碼圖片、收到抓拍圖片、視頻尺寸變化、錄像狀態變化等信號。
- 多線程處理，一個解碼一個線程，不卡主界面。
5.2 特色功能
- 同時支持多種解碼內核，包括qmedia內核（Qt4/Qt5/Qt6）、ffmpeg內核（ffmpeg2/ffmpeg3/ffmpeg4/ffmpeg5）、vlc內核（vlc2/vlc3）、mpv內核（mpv1/mp2）、海康sdk、easyplayer內核等。
- 非常完善的多重基類設計，新增一種解碼內核只需要實現極少的代碼量，就可以應用整套機制。
- 同時支持多種畫面顯示策略，自動調整（原始分辨率小於顯示控件尺寸則按照原始分辨率大小顯示，否則等比例縮放）、等比例縮放（永遠等比例縮放）、拉伸填充（永遠拉伸填充）。所有內核和所有視頻顯示模式下都支持三種畫面顯示策略。
- 同時支持多種視頻顯示模式，句柄模式（傳入控件句柄交給對方繪製控制）、繪製模式（回調拿到數據後轉成QImage用QPainter繪製）、GPU模式（回調拿到數據後轉成yuv用QOpenglWidget繪製）。
- 支持多種硬件加速類型，ffmpeg可選dxva2、d3d11va等，mpv可選auto、dxva2、d3d11va，vlc可選any、dxva2、d3d11va。不同的系統環境有不同的類型選擇，比如linux系統有vaapi、vdpau，macos系統有videotoolbox。
- 解碼線程和顯示窗體分離，可指定任意解碼內核掛載到任意顯示窗體，動態切換。
- 支持共享解碼線程，默認開啓並且自動處理，當識別到相同的視頻地址，共享一個解碼線程，在網絡視頻環境中可以大大節約網絡流量以及對方設備的推流壓力。國內頂尖視頻廠商均採用此策略。這樣只要拉一路視頻流就可以共享到幾十個幾百個通道展示。
- 自動識別視頻旋轉角度並繪製，比如手機上拍攝的視頻一般是旋轉了90度的，播放的時候要自動旋轉處理，不然默認是倒着的。
- 自動識別視頻流播放過程中分辨率的變化，在視頻控件上自動調整尺寸。比如攝像機可以在使用過程中動態配置分辨率，當分辨率改動後對應視頻控件也要做出同步反應。
- 音視頻文件無感知自動切換循環播放，不會出現切換期間黑屏等肉眼可見的切換痕跡。
- 視頻控件同時支持任意解碼內核、任意畫面顯示策略、任意視頻顯示模式。
- 視頻控件懸浮條同時支持句柄、繪製、GPU三種模式，非絕對座標移來移去。
- 本地攝像頭設備支持指定設備名稱、分辨率、幀率進行播放。
- 錄像文件同時支持打開的視頻文件、本地攝像頭、網絡視頻流等。
- 瞬間響應打開和關閉，無論是打開不存在的視頻或者網絡流，探測設備是否存在，讀取中的超時等待，收到關閉指令立即中斷之前的操作並響應。
- 支持打開各種圖片文件，支持本地音視頻文件拖曳播放。
- 視頻控件懸浮條自帶開始和停止錄像切換、聲音靜音切換、抓拍截圖、關閉視頻等功能。
- 音頻組件支持聲音波形值數據解析，可以根據該值繪製波形曲線和柱狀聲音條，默認提供了聲音振幅信號。
- 各組件中極其詳細的打印信息提示，尤其是報錯信息提示，封裝的統一打印格式。針對現場複雜的設備環境測試極其方便有用，相當於精確定位到具體哪個通道哪個步驟出錯。
- 代碼框架和結構優化到最優，性能強悍，持續迭代更新升級。
- 源碼支持Qt4、Qt5、Qt6，兼容所有版本。
5.3 視頻控件
- 可動態添加任意多個osd標籤信息，標籤信息包括名字、是否可見、字號大小、文本文字、文本顏色、標籤圖片、標籤座標、標籤格式（文本、日期、時間、日期時間、圖片）、標籤位置（左上角、左下角、右上角、右下角、居中、自定義座標）。
- 可動態添加任意多個圖形信息，這個非常有用，比如人工智能算法解析後的圖形區域信息直接發給視頻控件即可。圖形信息支持任意形狀，直接繪製在原始圖片上，採用絕對座標。
- 圖形信息包括名字、邊框大小、邊框顏色、背景顏色、矩形區域、路徑集合、點座標集合等。
- 每個圖形信息都可指定三種區域中的一種或者多種，指定了的都會繪製。
- 內置懸浮條控件，懸浮條位置支持頂部、底部、左側、右側。
- 懸浮條控件參數包括邊距、間距、背景透明度、背景顏色、文本顏色、按下顏色、位置、按鈕圖標代碼集合、按鈕名稱標識集合、按鈕提示信息集合。
- 懸浮條控件一排工具按鈕可自定義，通過結構體參數設置，圖標可選圖形字體還是自定義圖片。
- 懸浮條按鈕內部實現了錄像切換、抓拍截圖、靜音切換、關閉視頻等功能，也可以自行在源碼中增加自己對應的功能。
- 懸浮條按鈕對應實現了功能的按鈕，有對應圖標切換處理，比如錄像按鈕按下後會切換到正在錄像中的圖標，聲音按鈕切換後變成靜音圖標，再次切換還原。
- 懸浮條按鈕單擊後都用名稱唯一標識作爲信號發出，可以自行關聯響應處理。
- 懸浮條空白區域可以顯示提示信息，默認顯示當前視頻分辨率大小，可以增加幀率、碼流大小等信息。
- 視頻控件參數包括邊框大小、邊框顏色、焦點顏色、背景顏色（默認透明）、文字顏色（默認全局文字顏色）、填充顏色（視頻外的空白處填充黑色）、背景文字、背景圖片（如果設置了圖片優先取圖片）、是否拷貝圖片、縮放顯示模式（自動調整、等比例縮放、拉伸填充）、視頻顯示模式（句柄、繪製、GPU）、啓用懸浮條、懸浮條尺寸（橫向爲高度、縱向爲寬度）、懸浮條位置（頂部、底部、左側、右側）。