碼上快樂

相關內容    簡體    繁體

在web中使用windows控件，實現攝像頭功能

本文轉載自   查看原文   2016-03-06 14:55   2083 

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

 

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

 

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

[csharp]  view plain  copy
 
  1. public partial class CameraVideoPlayer : UserControl  
  2.    {  
  3.        private IMultimediaManager multimediaManager;  
  4.        public CameraVideoPlayer()  
  5.        {  
  6.            InitializeComponent();  
  7.        }  
  8.   
  9.        public void Test()  
  10.        {  
  11.            Random ran = new Random();  
  12.            string userID = "bb" + ran.Next(1001,9999).ToString();  
  13.            this.Initialize("223.4.*.*", 9900, userID, "aa01");  
  14.        }  
  15.   
  16.        public void Initialize(string serverIP, int port, string userID, string targetUserID)  
  17.        {  
  18.            try  
  19.            {  
  20.                this.multimediaManager = MultimediaManagerFactory.GetSingleton();  
  21.                this.multimediaManager.Initialize(userID, "", serverIP, port);  
  22.                this.cameraConnector1.BeginConnect(targetUserID);  
  23.            }  
  24.            catch (Exception ee)  
  25.            {  
  26.                MessageBox.Show(ee.Message);  
  27.            }  
  28.   
  29.        }  
  30.      ｝   

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

（1）GUID

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

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

[csharp]  view plain  copy
 
  1. [Guid("D9906B42-56B3-4B94-B4F9-A767194A382F")]  
  2. public partial class CameraVideoPlayer : UserControl  

（2）實現IObjectSafety接口

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

[csharp]  view plain  copy
 
  1. [Guid("CB5BDC81-93C1-11CF-8F20-00805F2CD064"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]  
  2. public interface IObjectSafety  
  3. {         
  4.     void GetInterfacceSafyOptions(System.Int32 riid,out System.Int32 pdwSupportedOptions,out System.Int32 pdwEnabledOptions);  
  5.   
  6.     void SetInterfaceSafetyOptions(System.Int32 riid, System.Int32 dwOptionsSetMask, System.Int32 dwEnabledOptions);  
  7. }  

      並讓CameraVideoPlayer實現這個接口：

[csharp]  view plain  copy
 
  1. [Guid("D9906B42-56B3-4B94-B4F9-A767194A382F")]  
  2. public partial class CameraVideoPlayer : UserControl, IObjectSafety  
  3. {  
  4.     private IMultimediaManager multimediaManager;  
  5.     public CameraVideoPlayer()  
  6.     {  
  7.         InitializeComponent();  
  8.     }  
  9.   
  10.     public void Test()  
  11.     {  
  12.         Random ran = new Random();  
  13.         string userID = "bb" + ran.Next(1001,9999).ToString();  
  14.         this.Initialize("223.4.180.116", 9900, userID, "aa01");  
  15.     }  
  16.   
  17.     public void Initialize(string serverIP, int port, string userID, string targetUserID)  
  18.     {  
  19.         try  
  20.         {  
  21.             this.multimediaManager = MultimediaManagerFactory.GetSingleton();  
  22.             this.multimediaManager.Initialize(userID, "", serverIP, port);  
  23.             this.cameraConnector1.BeginConnect(targetUserID);  
  24.         }  
  25.         catch (Exception ee)  
  26.         {  
  27.             MessageBox.Show(ee.Message);  
  28.         }  
  29.   
  30.     }  
  31.   
  32.     public void GetInterfacceSafyOptions(int riid, out int pdwSupportedOptions, out int pdwEnabledOptions)  
  33.     {  
  34.         pdwSupportedOptions = 1;  
  35.         pdwEnabledOptions = 2;  
  36.     }  
  37.   
  38.     public void SetInterfaceSafetyOptions(int riid, int dwOptionsSetMask, int dwEnabledOptions)  
  39.     {  
  40.   
  41.     }  
  42. }  

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

（3）程序集設定

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

[csharp]  view plain  copy
 
  1. // 將 ComVisible 設置為 false 使此程序集中的類型  
  2.  // 對 COM 組件不可見。如果需要從 COM 訪問此程序集中的類型，  
  3.  // 則將該類型上的 ComVisible 特性設置為 true。  
  4.  [assembly: ComVisible(true)]  
  5. [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]  view plain  copy
 
  1. <html xmlns="http://www.w3.org/1999/xhtml" >  
  2. <head>  
  3.     <title>攝像頭視頻播放器測試</title>  
  4. </head>  
  5. <body>  
  6. <form id="form1">  
  7.        <table>  
  8.   <tr>  
  9.    <td align="center">  
  10.     <object id="cameraVideoPlayer"   
  11.     <strong> classid="clsid:{D9906B42-56B3-4B94-B4F9-A767194A382F}" codebase="setup.exe"</strong> width="320" height="240">   
  12.     </object>  
  13.    </td>  
  14.   </tr>  
  15.   <tr>  
  16.    <td align="center">  
  17.     <input type=button id="Button1" value="連接攝像頭" onclick="javascript:doTest()"/>  
  18.   </td>  
  19. </tr>  
  20. </table>   
  21.   
  22. <script type="text/javascript">  
  23. function doTest()  
  24. {  
  25.   var obj = document.getElementById("cameraVideoPlayer");   
  26.   obj.Test();  
  27. }  
  28. </script>  
  29. </form>  
  30.     </body>   
  31. </html>   

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

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

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

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

      

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

      

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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 網頁HTML調用攝像頭功能 遠程服務器環境調用本地JS啟動攝像頭功能遇見的問題 網站建設中使用HTML5實現使用手機攝像頭拍照上傳的功能 在DevExpress中使用CameraControl控件進行攝像頭圖像采集 GB28181協議攝像頭WEB無插件直播並實現語音對講功能 HTML之調用攝像頭實現拍照和攝像功能 windows下攝像頭的使用 ROS中使用Kinect攝像頭和usb攝像頭 FFmpeg + nginx+asp.net實現網絡攝像頭RTSP視頻流WEB端在線播放功能 MFC中使用OpenCV顯示攝像頭圖像
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM