跳轉到

Windows 自訂螢幕佈局

arctos links Windows SDK 提供方便的自訂螢幕佈局功能。我們可以在程式碼中建立螢幕佈局,讓該次通訊中的主持人只要透過介面操作,呼叫一個簡單的方法就可即時完成切換。

本文件會詳細解釋自訂螢幕佈局主持人切換螢幕佈局的流程。


自訂螢幕佈局

基本觀念

在 arctos links Windows SDK 中,螢幕佈局的實作是透過數個區塊定義與對應的影音串流順序來達成的。

與其他作業系統不同,Windows SDK 無法直接以 Layer 進行放置,只能透過 YUVFrame 的疊放處理來達成。

因此,我們設計了三個 C++ 的 Map 變數,位於 Media Class 當中,它們分別是: - allLayoutMargins_ - allFrameLayoutSequence_ - allFrameFitFill_

要使用它們,可以直接呼叫 arctos::ArctosQt instance 的 media() 來使用:

arctos_app.media().allLayoutMargins
arctos_app.media().allFrameLayoutSequence
arctos_app.media().allFrameFitFill_

模板定義範例

以下,讓我們直接定義一個新的佈局作為示範:

std::vector<QMargins> layoutMargins7;
std::vector<int> frameLayoutSequence7;
std::vector<std::string> frameFitFill7;

// 區塊定義, 以 QMargins 定義每個區塊, // 其定義是 (left, top, right, bottom) // 這個 vector 當中, 較先被 push_back 的區塊會被較後 push_back 的區塊 overlap, 以 C++ 的 index 來說, 0 是最底層, 1 比 0 高一層, 後面的序號則依此類推。

layoutMargins7.push_back(QMargins(0, 0, template_frame_width_, template_frame_height_));
layoutMargins7.push_back(QMargins(0, 0, topLeftRectWidth, topLeftRectHeight));

// 串流的順序定義為: // -1: 主持人, 0: 第一位與會者, 1: 第二位與會者, 2: 第三位與會者

frameLayoutSequence7.push_back(2);
frameLayoutSequence7.push_back(-1);

// 影像 fit 或是 fill 的順序定義如下, 其順序也要跟串流順序搭配定義:

frameFitFill7.push_back("fill");
frameFitFill7.push_back("fit");

allLayoutMargins_["7"] = layoutMargins7;
allFrameLayoutSequence_["7"] = frameLayoutSequence7;
allFrameFitFill_["7"] = frameFitFill7;

上述的這個新的排列,會顯示兩個影像,第一區塊會顯示 2 號影像 (第三位),第二區塊會顯示主持人的影像。

而影像顯示的方式,則分別是第一區塊以 fill,第二區塊以 fit 方式顯示,以 fit 方式顯示時,會自動調整大小,以顯示整個影像。以 fill 方式顯示時,則會直接把影像填滿該區塊,有可能只能顯示中央區域的影像。

切換模板

在 allFrameLayoutSequence_,allLayoutMargins_ 跟 allFrameFitFill_ 當中,同一個 index 的 instance 必須要有同樣數量的元素。

例如有三個區塊,就要有三個影像串流定義。

需要切換模板的時候,請先確認 allFrameLayoutSequence_ 當中特定 key 的 index,以 Media::setTemplate(int id) 進行切換。

目前在 Demo 程式當中,有預設定義 24 個模板,我們可以直接呼叫

arctos_app.media().setTemplate(3);

把模板切成序號為 3 的排列。

全數自訂

如果想要全數自訂畫面排列,可以在程式初始化完成後,從 App 清除 allFrameLayoutSequence_,allLayoutMargins_ 跟 allFrameFitFill_,並新增您想要自訂的區塊定義與對應的影音串流。

區塊可否重疊?

可以的,在前述的定義當中,每個區塊可以重疊,先定義的區塊會先被繪製,也就是在視覺效果中,會在較底層,如果多個區塊有重疊的話,越先定義的區塊會被壓在越下面。

區塊透明度?

抱歉,由於是 YUVFrame 直接覆蓋,各個區塊之間沒有辦法自訂其透明度,只能讓整個畫面的透明度一致。