How to use the flash plug-in to call the PC's camera and embed it into the TML page

Preface

The reason for writing this article is mainly because the team leader put forward a new requirement - using the browser to call the computer's camera to realize the function of instant photo taking. I checked a lot of information on the Internet, and for various reasons, I finally chose to use the flash plug-in to call the PC's camera. Of course, this requirement is based on the B/S architecture, so I was thinking about how to embed it into the front-end HTML page.

Off topic

Of course, encapsulation has not been considered here. The main purpose is implementation first, and subsequent work will be abstracted according to the business and encapsulated into common components. Okay, enough nonsense, let’s get to the point.

Embed plugin

Using the object and embed tags

Code Showcase

Copy code

The code is as follows:

This method uses the Object and Embed tags. You can see that many parameters of the object and many attributes of the embed are repeated. Browser compatibility: some browsers support object, some support embed, which is why you need to modify both places when modifying Flash parameters. This method is the official method of Macromedia, which guarantees the functionality of Flash to the greatest extent and has no compatibility issues.

But now it seems that there are still big problems.

First, it cannot pass validation because the embed tag embedded for compatibility does not comply with the W3C specification. Of course, if you don’t care about standards or not, that’s another matter.

Secondly, for various reasons, Microsoft restricted the usage mode of IE's ActiveX after SP2, that is, there is a virtual box in the ActiveX on the page, and the user needs to click once to interact normally. Flash is embedded into the web page as an ActiveX, so it will also be implicated. This problem can only be solved by embedding Flash through JS.

Again, there is no Flash version detection. If the browser's flash plug-in version is not enough, your swf file may not be displayed normally, or an ActiveX confirmation installation box may pop up - this box is very scary for many users.

Use only the object tag

Code Showcase

Copy code

The code is as follows:

This method only uses the Object tag, which is actually Flash satay. Since there is no embed tag, it can pass the verification. It is a standard method of embedding Flash. The browser compatibility is also good. It looks almost perfect, but there are still problems.

First, you need a holder swf to load your target swf to ensure the stream capability in IE. If you need to pass parameters through flashvars, or interact with the JS of the page, it will be very troublesome.

Secondly, like the first method, an ActiveX prompt box will pop up without version detection.

Again, some lower-version browsers (such as lower-version Safari, etc.) do not recognize this approach and are not compatible with it.

Use only the embed tag

Code Showcase

Copy code

The code is as follows:

This method only uses the Embed tag. Compared with the effect, it is still very good. The browser compatibility is also good and can be loaded. Of course, since the embed tag does not comply with W3C specifications, this method is not recommended.

Embed using JavaScript

There are many ways to use JS to load Flash plug-ins on the Internet, and there are also many good JS plug-ins for you to choose from. I will only briefly introduce SWFObject here.

First, you need to download a SWFObject plug-in package, which contains a JS script, which is the script file you need to import. It also includes two HTML examples that you can imitate. Of course, you can also go to SWFObject's website to learn more. Please click here.

Code Showcase

Copy code

The code is as follows:

<span style="font-family:Microsoft YaHei;"><script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "cam.swf");
</script></span>

Copy code

The code is as follows:

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="490" height="390">
<param name="movie" value="cam.swf" />

<object type="application/x-shockwave-flash" data="cam.swf" width="490" height="390">

<div>
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>

</object>

</object>
</div></span>

Rendering

Conclusion <br />Compared with these methods, I recommend using JS embedding to load the Flash plug-in. This method not only ensures the realization of all the functions of Flash, but also performs well in terms of compatibility with various browsers. JS can also provide more extended functions, and more importantly, it can be reused by more people, reducing unnecessary redundant code.

Plug-in download address: SWFObject

<<: Enterprise-level installation tutorial using LAMP source code

>>: How to create Baidu dead link file