Foreword

The reason why I wrote this article is mainly because of a new requirement raised by the team leader - to use the browser to call the computer's camera to realize the function of taking pictures instantly. I checked a lot of information on the Internet, and for one reason or another, I finally chose to use a flash plug-in to call the PC's camera. Of course, this requirement is based on B/S architecture, so I am thinking about how to embed it into the front-end HTML page.

Digression

Of course, encapsulation has not been considered here. It is mainly for implementation first, and subsequent work will be abstracted according to the business and encapsulated into general components. . Okay, without further ado, let’s focus on the key points.

Embed plugin

Use object and embed tags

Code display


This method The Object and Embed tags are used. You can see that many parameters of object and many attributes of embed are repeated. Browser compatibility, some browsers support object, and some support embed, which is why you need to change both places when you want to modify Flash parameters. This method has always been the official method of Macromedia, ensuring the functionality of Flash to the greatest extent without compatibility issues.

But looking at it now, it still has big problems.

First of all, it fails the verification because the embed tag embedded for compatibility does not comply with the W3C specification. Of course, if you don’t care about the rules or regulations, that’s another matter.

Secondly, due to various reasons, Microsoft has restricted the usage mode of IE's ActiveX after sp2. That is, there is a virtual box in the ActiveX on the page, which requires the user to click once for normal interaction. Flash is embedded into the web page as an ActiveX, so it will also be affected. Only embedding Flash through JS can solve this problem.

Again, there is no Flash version detection. If the flash plug-in version of the browser is not enough, or your swf file cannot be displayed normally, or an ActiveX installation confirmation box will pop up - this box is annoying to many users. It's scary to say.

Only use object tag

Code display


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 of all, a holder swf is needed to load. Your target swf ensures 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, it will also pop up. An ActiveX prompt box without version detection.

Again, some lower version browsers (such as lower versions of Safari, etc.) do not agree with this method and are not compatible with it.

Only use embed tags

Code display


This method only uses the Embed tag. In terms of comparative effects, it is still very good. Browser compatibility is also pretty good, and everything can be loaded. Of course, since the embed tag does not comply with W3C specifications, this method is not recommended.

Use JavaScript to embed

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

First, you need to download a SWFObject plug-in package, which contains a JS script. This 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 the SWFObject website to learn more. Please click here.

Code display




Rendering

Conclusion
Comparing these methods, I prefer to use the JS embedding method to load the Flash plug-in. This method not only ensures that all functions of Flash are realized, but also can be used in every browser. The compatibility of browsers is also good, and 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