如何實現共享螢幕標註功能?

zhuweisky發表於2021-07-05

   在視訊會議系統中,經常會有這樣的需求:參會人員A共享了自己的螢幕給大家觀看,人員B則需要在螢幕影像上做標註,並且希望所有的與會人員都能看到他做的標註。

        這個功能通常被稱為共享螢幕標註、或螢幕標註、或帶標繪功能的遠端桌面。

一.實現方案

   將這個功能拆解開來,實際上就是 遠端桌面 + 電子白板,我們可以在遠端桌面的控制元件上疊加一個背景透明的電子白板就可以實現這樣的效果。

   接下來,我們嘗試使用 OMCS 的遠端桌面元件和電子白板元件,來實現這個功能。具體而言,我們在 OMCS入門Demo 的電子白板示例元件上,再增加一個動態桌面聯結器,就可以在觀看對方桌面的同時進行標繪。

  Demo最終的執行效果如下圖所示:

  

二.具體實現    

   我們在OMCS入門demo的白板功能演示的視窗上,增加一個動態桌面聯結器(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());           }                   }       }   

      在點選開始“遠端桌面(標繪)”按鈕時,我們開始初始化電子白板聯結器及動態桌面聯結器,連線到目標會議室的房間ID。

      有幾點要注意一下:     

(1)電子白板聯結器控制元件的背景色 BackgroundColor 要設定成透明。

(2)必須要使用DynamicDesktopConnector元件,而不能使用DesktopConnector控制元件。

(3)DynamicDesktopConnector元件所使用的顯示螢幕影像的Viewer必須是Form,而不能是Control,否則,電子白板聯結器控制元件的背景透明就無法實現(可能是WinForm的限制)。

(4)所以,UI的整體結構層次是:底層是Form(DynamicDesktopConnector使用該Form的表面來繪製螢幕影像),上層是WhiteBoardConnector控制元件,背景透明,用於實現標註。

三.原始碼下載

  在理解了螢幕標註功能的具體實現原理之後,再看Demo原始碼就非常容易瞭解了。

       共享螢幕標註Demo(原始碼)

 

相關文章