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

Regarding the problem of using webpack instructions in vscode showing "Because running scripts is prohibited in this system" (perfect solution)

Blog

Steps to install MySQL 8.0.23 under Centos7 (beginner level)

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

Regarding the problem of using webpack instructions in vscode showing "Because running scripts is prohibited in this system" (perfect solution)

Steps to install MySQL 8.0.23 under Centos7 (beginner level)

Optimal web page width and its compatible implementation method

How to obtain a permanent free SSL certificate from Let's Encrypt in Docker

How to configure the Runner container in Docker

Calculation of percentage value when the css position property is absolute

JavaScript to achieve calendar effect

Founder font library Chinese and English file name comparison table

MySQL spatial data storage and functions

How to create, start, and stop a Docker container

Recommend

How to migrate mysql storage location to a new disk

Several magical uses of JS ES6 spread operator

Solution to the failure of loading dynamic library when Linux program is running

TypeScript installation and use and basic data types

Mysql implementation of full-text search and keyword scoring method example

Solve the problem that MySQL read-write separation causes data not to be selected after insert

Detailed explanation of CSS text decoration text-decoration & text-emphasis

Native JS to achieve digital table special effects

MySQL 8.0.13 download and installation tutorial with pictures and text

Implementation of Linux command line wildcards and escape characters

Explanation of nginx load balancing and reverse proxy

How to add vim implementation code examples in power shell

Sample code for implementing 3D book effect with CSS

How to install SVN server under Linux

MySQL 8.0.15 winx64 installation and configuration method graphic tutorial