Using Windows controls in the Web to implement camera functionality

A recent web-based video conferencing project that needs to play live video from a remote camera in a Web page, we already have a Windows control written in C # that plays remote live video, how do I embed it in a Web page? This requires the use of an ancient technique, ActiveX.

1. Convert. NET controls to ActiveX controls

The first thing to do is to convert our Windows video playback controls into ActiveX controls. First look at the definition of our video playback controls, which are based on the OMCS implementation and are fairly straightforward:

[CSharp]View PlainCopy

2. Public partial class Cameravideoplayer:usercontrol
4. {
6. private Imultimediamanager Multimediamanager;
8. Public Cameravideoplayer ()
10. {
12. InitializeComponent ();
14. }
18. public void Test ()
20. {
22. Random ran = new Random ();
24. string userID = "BB" + ran. Next (1001,9999).  ToString ();
26. This .  Initialize ("223.4.*.*", 9900, UserID, "Aa01");
28. }
32. public void Initialize (string serverip, int port, string UserID, string targetuserid)
34. {
36. Try
38. {
40. This.multimediamanager = Multimediamanagerfactory.getsingleton ();
42. this.multimediaManager.Initialize (UserID, "", ServerIP, Port);
44. This.cameraConnector1.BeginConnect (Targetuserid);
46. }
48. catch (Exception ee)
50. {
52. MessageBox.Show (EE. Message);
54. }
58. }
60. ｝

When its initialize method is called, it connects to the target user's camera and plays the video on its included CameraConnector1 control. This control works well in the Windows Form application, and now we step through the process to convert it to an ActiveX control.

(1) GUID

The ActiveX control is first a COM component, and the COM component has a unique GUID. As we can see later, in the Web, you need to locate and load the registered ActiveX control through a GUID.

If you are using VS2010, there is a "Create GUID" menu under the Tools menu, click it to create a new GUID, and then copy it as the Cameravideoplayer feature:

[CSharp]View PlainCopy

1. [Guid ("d9906b42-56b3-4b94-b4f9-a767194a382f")]
2. Public partial class Cameravideoplayer:usercontrol

(2) Implement IObjectSafety interface

When an ActiveX control is called in a browser, a warning box appears, prompting the unsafe control to be running. This is limited by the browser security policy, and the control implements the IObjectSafety interface to show the browser that it is legitimate. Add the definition of the IObjectSafety interface in the project:

[CSharp]View PlainCopy

1. [guid ( "cb5bdc81-93c1-11cf-8f20-00805f2cd064"),  interfacetype (Cominterfacetype.interfaceisiunknown)]  
2. 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. }  

And let Cameravideoplayer implement this interface:

[CSharp]View PlainCopy

2. [Guid ("d9906b42-56b3-4b94-b4f9-a767194a382f")]
4. Public partial class Cameravideoplayer:usercontrol, IObjectSafety
6. {
8. private Imultimediamanager Multimediamanager;
10. Public Cameravideoplayer ()
12. {
14. InitializeComponent ();
16. }
20. public void Test ()
22. {
24. Random ran = new Random ();
26. string userID = "BB" + ran. Next (1001,9999).  ToString ();
28. This .  Initialize ("223.4.180.116", 9900, UserID, "Aa01");
30. }
34. public void Initialize (string serverip, int port, string UserID, string targetuserid)
36. {
38. Try
40. {
42. This.multimediamanager = Multimediamanagerfactory.getsingleton ();
44. this.multimediaManager.Initialize (UserID, "", ServerIP, Port);
46. This.cameraConnector1.BeginConnect (Targetuserid);
48. }
50. catch (Exception ee)
52. {
54. MessageBox.Show (EE. Message);
56. }
60. }
64. public void getinterfaccesafyoptions (int riid, out int pdwsupportedoptions, out int pdwenabledoptions)
66. {
68. Pdwsupportedoptions = 1;
70. Pdwenabledoptions = 2;
72. }
76. public void setinterfacesafetyoptions (int riid, int dwoptionssetmask, int dwenabledoptions) /c3>
78. {
82. }
84. }

The implementation of the two methods of the IObjectSafety interface can be done using the code above.

(3) Assembly settings

Next, we need to make a setting for the control's Assembly (Omcs_activex) to indicate that it will be used as a COM component. Open the AssemblyInfo.cs file, and first set the ComVisible attribute to True. Second, increase the allowpartiallytrustedcallers characteristics. As shown below:

[CSharp]View PlainCopy

1. Set ComVisible to False to make the types in this Assembly
2. //is not visible to COM components. If you need to access the types in this assembly from COM,
3. //sets the ComVisible attribute on the type to true.
4. [Assembly:comvisible (true)]
5. [Assembly:allowpartiallytrustedcallers ()]

Finally, on the build page of the project properties, check the checkbox for COM Interop registration.

Thus, in addition to Omcs_activex.dll, the generated product of the compilation has omcs_activex.tlb (the type library file used by COM).

2. Making the installation program

The converted Cameravideoplayer ActiveX control is deployed on the IIS server, the first time a user opens a Web page, the control does not exist on the user's machine, so it is necessary to download the installation and register the ActiveX control on the user's machine. These can be achieved through the features of the VS bring-your-own setup program, and it's fairly straightforward.

(1) Add a new Setup project to the current solution.

(2) Import the main output of the Omcs_activex project into the installation project under "Application Folder".

(3) Modify the main output the file installation property of the register entry is vsdrpcom.

(4) Set the project properties of the Setup project, primarily the "Install URL" entry, to be set as the deployment-time address.

(5) If necessary, tick or remove some of the items in prerequisites.

(6) Compile the installation project, will generate two files Setup.exe, Setup1.msi. Copy them to the root directory of the Web site virtual directory.

3.Web Integration

Now let's write one of the simplest HTML to try to load the video playback of the ActiveX control Cameravideoplayer. As shown below:

[HTML]View PlainCopy

2. <HTML xmlns="http://www.w3.org/1999/xhtml" >
4. <head>
6. <title> Webcam video player Test </title>
8. </head>
10. <body>
12. <form id="Form1">
14. <table>
16. <tr>
18. <TD Align="center">
20. <object id="Cameravideoplayer"
22. <strong> classid="clsid:{d9906b42-56b3-4b94-b4f9-a767194a382f}" codebase=" Setup.exe "</strong> width=" " height=">
24. </Object>
26. </td>
28. </tr>
30. <tr>
32. <TD Align="center">
34. <input type=button id="Button1" value="Connect webcam" onclick="javascript: Dotest () "/>
36. </td>
38. </tr>
40. </table>
44. <script type="Text/javascript">
46. function Dotest ()
48. {
50. var obj = document.getElementById ("Cameravideoplayer");
52. Obj. Test ();
54. }
56. </Script>
58. </form>
60. </Body>
62. </html>

Note the bold section, which shows two points:

(1) The browser uses the GUID to locate the ActiveX control.

(2) If the target ActiveX control does not exist on this computer, the installation program that is indicated by the CodeBase property is automatically downloaded.

After you have deployed the HTML file, open the Web page for the first time, as follows:

After you run the installation, the page refreshes and you can see that the ActiveX control has been successfully loaded in. Then, click on the "Connect webcam" button to test if the ActiveX control can display the video captured by the remote camera as follows:

This way, ActiveX controls that are embedded in a Web page run as normal as normal Windows controls:)

Using Windows controls in the Web to implement camera functionality