在Web中如何使用Windows控件？

    最近做的一個Web版的視頻會議項目，需要在網頁中播放來自遠程攝像頭采集的實時視頻，我們已經有了播放遠程實時視頻的使用C#編寫的windows控件，如何將其嵌入到網頁中去了？這需要使用一種古老的技術，ActiveX。

1.將.Net控件轉化為ActiveX控件

    首先要做的就是將我們的windows視頻播放控件轉化為ActiveX控件。先看看我們視頻播放控件的定義，其基於OMCS實現，相當簡單：

    public partial class CameraVideoPlayer : UserControl
    {
        private IMultimediaManager multimediaManager;
        public CameraVideoPlayer()
        {
            InitializeComponent();
        }

        public void Test()
        {
            Random ran = new Random();
            string userID = "bb" + ran.Next(1001,9999).ToString();
            this.Initialize("223.4.*.*", 9900, userID, "aa01");
        }

        public void Initialize(string serverIP, int port, string userID, string targetUserID)
        {
            try
            {
                this.multimediaManager = MultimediaManagerFactory.GetSingleton();
                this.multimediaManager.Initialize(userID, "", serverIP, port);
                this.cameraConnector1.BeginConnect(targetUserID);
            }
            catch (Exception ee)
            {
                MessageBox.Show(ee.Message);
            }

        }

      ｝

      當調用其Initialize方法時，將連接到目標用戶的攝像頭，並在其內含的cameraConnector1控件上播放視頻。這個控件在Windows Form應用程序中工作良好，現在我們一步步來將其轉換為ActiveX控件。

（1）GUID

      ActiveX控件首先是COM組件，COM組件有唯一的GUID。后面我們可以看到，在Web中，需要通過GUID定位並加載已經注冊的ActiveX控件。

      如果使用的是VS2010，工具菜單下有個“創建GUID”菜單，點擊它可以創建一個新的GUID，然后把其復制作為CameraVideoPlayer的特性：

    [Guid("D9906B42-56B3-4B94-B4F9-A767194A382F")]
    public partial class CameraVideoPlayer : UserControl

（2）實現IObjectSafety接口

      當ActiveX控件在瀏覽器中調用的時候，往往會出現警告框，提示不安全的控件正在運行。這是由瀏覽器安全策略所限定的，控件通過實現IObjectSafety接口以向瀏覽器表明自己是合法的。在項目中增加IObjectSafety接口的定義：

    [Guid("CB5BDC81-93C1-11CF-8F20-00805F2CD064"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
    public interface IObjectSafety
    {       
        void GetInterfacceSafyOptions(System.Int32 riid,out System.Int32 pdwSupportedOptions,out System.Int32 pdwEnabledOptions);

        void SetInterfaceSafetyOptions(System.Int32 riid, System.Int32 dwOptionsSetMask, System.Int32 dwEnabledOptions);
    }

      並讓CameraVideoPlayer實現這個接口：

    [Guid("D9906B42-56B3-4B94-B4F9-A767194A382F")]
    public partial class CameraVideoPlayer : UserControl, IObjectSafety
    {
        private IMultimediaManager multimediaManager;
        public CameraVideoPlayer()
        {
            InitializeComponent();
        }

        public void Test()
        {
            Random ran = new Random();
            string userID = "bb" + ran.Next(1001,9999).ToString();
            this.Initialize("223.4.180.116", 9900, userID, "aa01");
        }

        public void Initialize(string serverIP, int port, string userID, string targetUserID)
        {
            try
            {
                this.multimediaManager = MultimediaManagerFactory.GetSingleton();
                this.multimediaManager.Initialize(userID, "", serverIP, port);
                this.cameraConnector1.BeginConnect(targetUserID);
            }
            catch (Exception ee)
            {
                MessageBox.Show(ee.Message);
            }

        }

        public void GetInterfacceSafyOptions(int riid, out int pdwSupportedOptions, out int pdwEnabledOptions)
        {
            pdwSupportedOptions = 1;
            pdwEnabledOptions = 2;
        }

        public void SetInterfaceSafetyOptions(int riid, int dwOptionsSetMask, int dwEnabledOptions)
        {

        }
    }

      IObjectSafety接口的兩個方法的實現都可以采用上面的代碼來做。

（3）程序集設定

      接下來，我們需要對控件的程序集（OMCS_ActiveX）做一個設置，以表明其將作為一個COM組件使用。打開AssemblyInfo.cs文件，首先將ComVisible特性設置為true。其次，增加AllowPartiallyTrustedCallers特性。如下所示：

    // 將 ComVisible 設置為 false 使此程序集中的類型
    // 對 COM 組件不可見。如果需要從 COM 訪問此程序集中的類型，
    // 則將該類型上的 ComVisible 特性設置為 true。
    [assembly: ComVisible(true)]
    [assembly: AllowPartiallyTrustedCallers()]

      最后，在項目屬性的“生成”頁中，將“為COM互操作注冊”的CheckBox勾上。

     

      這樣，編譯生成的產物中除了OMCS_ActiveX.dll外，還有OMCS_ActiveX.tlb（COM用到的類型庫文件）。

2.制作安裝程序

      轉化后的CameraVideoPlayer ActiveX控件會被部署在IIS服務器上，用戶第一次打開網頁時，在用戶的機器上是不存在這個控件的，所以，需要下載安裝並在用戶的機器上注冊該ActiveX控件。這些可以通過VS自帶的制作安裝程序的功能來實現，也相當簡單。

（1）在當前解決方案中添加一個新的安裝項目。

（2）將OMCS_ActiveX項目的主輸出導入到安裝項目的“應用程序文件夾”下面。

     

（3）修改主輸出的文件安裝屬性中的Register項為vsdrpCOM。

（4）設置安裝項目的項目屬性，主要是“安裝URL”項，要設置為部署時地址。     

     

（5）如果需要，將“系統必備”中的一些項目勾上或去掉。

（6）編譯安裝項目，將會生成兩個文件setup.exe、Setup1.msi。將它們拷貝到網站虛擬目錄的根目錄下。

3.Web集成

      現在我們寫一個最簡單的HTML來試試加載視頻播放的ActiveX控件CameraVideoPlayer。如下所示：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>攝像頭視頻播放器測試</title>
</head>
<body>
<form id="form1">
       <table>
  <tr>
   <td align="center">
    <object id="cameraVideoPlayer" 
     classid="clsid:{D9906B42-56B3-4B94-B4F9-A767194A382F}" codebase="setup.exe" width="320" height="240"> 
    </object>
   </td>
  </tr>
  <tr>
   <td align="center">
    <input type=button id="Button1" value="連接攝像頭" onclick="javascript:doTest()"/>
  </td>
</tr>
</table> 

<script type="text/javascript">
function doTest()
{
  var obj = document.getElementById("cameraVideoPlayer"); 
  obj.Test();
}
</script>
</form>
    </body> 
</html> 

      注意加粗的部分，說明了兩點：

（1）瀏覽器是通過GUID來定位ActiveX控件的。

（2）如果本機不存在目標ActiveX控件，則自動下載codebase屬性指示的安裝程序進行安裝。

      將HTML文件部署好后，第一次打開網頁，如下所示：      

     

     運行安裝，完成后，頁面會刷新，並可以看到ActiveX控件已經成功加載進來了。然后，點擊“連接攝像頭”按鈕，測試一下ActiveX控件是否可以顯示遠程攝像頭采集的視頻，如下所示：     

     

       這樣，嵌入到網頁中的ActiveX控件就像普通的windows控件一樣正常運行了：）