OMCS 使用技巧 -- 在Web程序中使用OMCS控件

    当我们在实现类似Web版视频会议系统时,就需要在网页中播放来自远程摄像头采集的实时视频或在网页中嵌入电子白板,OMCS已经提供的这些控件,但它们都是windows控件,如何将其嵌入到网页中去了?这需要使用一种古老的技术,ActiveX。

1.将OMCS控件转化为ActiveX控件

    我们以OMCS提供的摄像头连接器控件CameraConnector为例,来说明如何在网页中嵌入它们。 首先要做的就是将CameraConnector控件转化为ActiveX控件。我们先对CameraConnector做个简单的封装,形成一个视频播放控件,其定义相当简单:

    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);
    }

      请特别注意: IObjectSafety上 的 Guid 要固定为 CB5BDC81-93C1-11CF-8F20-00805F2CD064,不可更改!

      并让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控件一样正常运行了:) 

      像OMCS提供的其它几个控件:麦克风连接器控件、电子白板控件、远程桌面控件等,都可以以类似的方式转发为ActiveX控件,并嵌入到Web中运行。  

4.Demo源码下载

      OMCS_ActivexDemo.rar 

注:如果测试demo时,发现无法看到视频,则可能是需要安装 VC++运行时

 

5.立即体验

我们已经部署好了网站和OMCS服务端,您可以直接在IE浏览器中测试了。

(1)测试地址:http://115.29.163.42:8001/test.html

(2)IE设置中添加信任站点:IE -> “工具”菜单 -> Internet选项 -> 安全 -> 可信站点 -> 站点

          

(3)IE设置中允许下载未签名的ActiveX:IE -> “工具”菜单 -> Internet选项 -> 安全  -> 可信站点 -> 自定义级别

        

(4)这些设定完成后,在浏览器中输入上面的网址,即可以下载安装OMCS  ActiveX控件,并测试了。

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------  

下载免费版本的OMCS以及 demo源码

阅读 更多OMCS开发手册系列文章

Q Q:168757008

官网:www.oraycn.com

导航

首页

官方网站

联系我们

站内搜索

OrayTalk 企业即时通讯系统

傲瑞通官网

详细说明

客户端下载

OrayMeeting 视频会议系统

详细说明

客户端下载

ESFramework 通信框架

详细说明

SDK与Demo下载

ESFramework FAQ

版本变更记录

OMCS 语音视频框架

详细说明

SDK与Demo下载

OMCS FAQ

版本变更记录

OVCS 视频会议Demo

详细说明

源码下载

傲瑞实用组件

SDK下载

H5Media 纯网页音视频交互

NPusher 推流组件

MCapture 语音视频采集组件

MFile 语音视频录制组件

MPlayer 语音视频播放组件

OAUS 自动升级系统

StriveEngine 轻量级的通信引擎

傲瑞组件 FAQ

授权

授权流程

产品选购指南

授权方案说明

授权SDK使用说明

其它

支持信创国产化

SDK使用技巧

联系我们