最近做的一個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.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);
            }

        }

      當呼叫其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控制元件一樣正常運行了：）