現在主流的視頻會議軟件都有屏幕標注功能,屏幕標注功能給屏幕分享者講解分享內容時提供了極大的方便。那我們以傲瑞視頻會議(OrayMeeting)為例,來講解屏幕標注是如何實現的。
傲瑞會議的PC端(Windows、信創Linux、銀河麒麟、統信UOS)在分享自己的屏幕時,可在屏幕上進行標注、繪制功能。如下圖,是傲瑞會議在銀河麒麟V10SP1上演示的屏幕標注功能:
屏幕標注的工具有:自由曲線(涂鴉)、箭頭、矩形、圓和橢圓、文本。并且可設置它們的顏色、線條粗細、字體大小。
那么,這樣的屏幕標注功能是怎么實現的了?
細想一下,這個屏幕標注實際上就像是一個可以在上面繪制涂鴉的電子白板,只要將電子白板的背景設置為透明,然后,重新定義其工具欄就可以了。而我們的OMCS實時音視頻框架內置了電子白板的功能,所以,可以直接使用OMCS來實現標注功能。
為了方便講解其代碼層面是如何實現的,我們在OMCS入門demo的白板功能(使用WhiteBoardConnector
)演示的窗口上,增加一個動態桌面連接器(DynamicDesktopConnector),并預定動態桌面連接器相關事件。
public WhiteBoardForm(string _ownerID){InitializeComponent();this.whiteBoardConnector1.WatchingOnly = false;this.ownerID = _ownerID;this.Text = string.Format("正在訪問{0}的電子白板", this.ownerID);// 需要在設計界面將電子白板連接器的背景改為透明(屬性已修改)this.whiteBoardConnector1.ConnectEnded += new CbGeneric<ConnectResult>(whiteBoardConnector1_ConnectEnded);this.whiteBoardConnector1.BeginConnect(this.ownerID); this.dynamicDesktopConnector1.ConnectEnded += new CbGeneric<ConnectResult>(DynamicDesktopConnector1_ConnectEnded); // 將動態桌面連接器控件設置在當前窗口this.dynamicDesktopConnector1.SetViewer(this);this.dynamicDesktopConnector1.BeginConnect(this.ownerID); }private void DynamicDesktopConnector1_ConnectEnded(ConnectResult obj){if (this.InvokeRequired){this.BeginInvoke(new CbGeneric<ConnectResult>(this.DynamicDesktopConnector1_ConnectEnded), obj);}else{if (obj != ConnectResult.Succeed){MessageBox.Show("連接失敗!" + obj.ToString());} }}
在Demo的UI上點擊開始“遠程桌面(標繪)”按鈕時,我們開始初始化電子白板連接器及動態桌面連接器,連接到目標會議室的房間ID。
這里有幾點要注意一下:
(1)電子白板連接器控件的背景色 BackgroundColor 要設置成透明。
(2)必須要使用DynamicDesktopConnector組件,而不能使用DesktopConnector控件。
(3)DynamicDesktopConnector組件所使用的顯示屏幕圖像的Viewer必須是Form,而不能是Control,否則,電子白板連接器控件的背景透明就無法實現(可能是WinForm的限制)。
(4)所以,UI的整體結構層次是:底層是Form(DynamicDesktopConnector使用該Form的表面來繪制屏幕圖像),上層是WhiteBoardConnector控件,背景透明,用于實現標注。
上面的這個Demo已經比較具體的說明了屏幕標注功能的代碼實現,傲瑞視頻會議的屏幕標繪功能也正是基于同樣的思路實現的,只不過其不僅僅支持Windows,同時也適配了信創操作系統,包括銀河麒麟、統信UOS等。