Preface
The reason for writing this article, mainly because the leader to mention a new requirement-the use of the browser to call the computer's camera, to achieve the function of instant photography. A lot of information on the Internet, for such a reason, finally chose to use the Flash plugin to call the PC's camera. Of course, this requirement is based on the B/s architecture, so you want to embed it in the front-end HTML page.
Off Topic
of course, there is no consideration for encapsulation, mainly for the purpose of implementation, the subsequent work is then abstracted according to the business, encapsulated into a common component. All right, nonsense, don't say much, look at the point.
Embed Plugins
- Using the object and EMBED tags
Code Show
<span style= "Font-family:microsoft Yahei;" ><div style= "margin-top:-30px;margin-left:-120px;" > <object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= "http// fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0 " width=" 490 "height=" 390 "id= "Untitled-1" align= "middle" > <param name= "allowscriptaccess" value= "Samedomain"/> <param name= "Movie" value= "cam.swf"/> <param name= "quality" value= "High"/> <param name= "bgcolor" value= "# Ffffff "/> <embed src=" cam.swf "quality=" High "bgcolor=" #ffffff "width=" 490 "height=" 390 "name=" Cam "align=" Middle "allowscriptaccess=" Samedomain " type=" Application/x-shockwave-flash "pluginspage="/HTTP/ Www.macromedia.com/go/getflashplayer "/> </object></div></span>
This method uses the object and Embed tags, you can see many parameters of object and Embed many of the properties are duplicated. browser compatibility, some browsers support object, and some support embed, which is why to modify the parameters of Flash two places to change the reason. This method is Macromedia has been the official method, the maximum guarantee the function of Flash, no compatibility issues.
But for now, it still has a big problem.
First, it is not possible to verify that the embed tags embedded for compatibility are non-compliant. Of course, if you do not care about what norms are not standardized, another matter.
Second, Microsoft for various reasons, after SP2 restrictions on the use of IE ActiveX mode, that is, in the page ActiveX has a virtual box, users need to click once to normal interaction. Flash is embedded as an ActiveX in the Web page, so it will also be implicated, only by JS embedded Flash to solve this problem.
Again, no flash version detection, if the version of the browser Flash plugin version is not enough, or can not display your SWF file normally, or will pop up an ActiveX confirmation installation box-this box for many users is very scary.
Code Show
<span style= "Font-family:microsoft Yahei;" ><div style= "margin-top:-30px;margin-left:-120px;" > <object type= "Application/x-shockwave-flash data=" c.swf?path=cam.swf "width=" 490 "height=" 390 "> <param name= "Cam" value= "c.swf?path=cam.swf"/> </object></div></span>
This method only uses the Object tag, which is actuallyFlash Satay. because there is no embed tag, can be verified, is the standard embedded Flash method, browser compatibility is also good, looks almost perfect, but still have a problem.
first of all, you need a holder SWF to load your target SWF to ensure the stream capability in IE, if you need to pass the flashvars to the parameter, or the page JS interaction, it will be very troublesome.
next, as with the first method, an ActiveX prompt will pop up, with no version detection.
again, some of the lower versions of the browser (such as the low version of Safari, etc.) do not agree with this approach and are not compatible with it.
Code Show
<span style= "Font-family:microsoft Yahei;" ><div style= "margin-top:0px;margin-left:-70px;" ><embed id= "Cam" src= "cam.swf" loop= "false" menu= "false" quality= "Best" bgcolor= "#ffffff" width= "height=" "Name=" webcam "align=" middle "wmode=" Transparent "allowscriptaccess=" Always "allowfullscreen=" false "type=" Application/x-shockwave-flash "pluginspage=" http://www.macromedia.com/go/getflashplayer "flashvars=" width=490 &height=390&objid=cameradialog "></div></span>
This method only uses the Embed label, the contrast effect, is still very good, the browser compatibility is also good, can be loaded. Of course, it is not recommended to use this method because the embed tag is not in line with the specifications.
Use JS to load Flash plug-ins, online has a lot of methods, but also have a lot of good JS plugin for everyone to choose. I only take swfobject here to introduce briefly.
First, you need to download a swfobject plug-in package that contains a JS script, which is the footstep file you need to introduce. Also includes two examples of HTML, you can imitate. Of course, you can also go to SWFObject's website to find out, please click here.
Code Show
<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>
<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"/><!--[if! Ie]>--><object type= "Application/x-shockwave-flash" Data= "cam.swf" width= "490" height= "390" ><!-- <! [Endif]--><div>
Conclusion
Compared to these ways, I would prefer to use JS embedded mode to load the Flash plug-in, this way not only to ensure that all the functions of flash, but also in the compatibility of the browser performance is good, and JS can also provide more extended functions, more mainly can be reused by more people, Reduce unnecessary redundant code.
Plugin: SWFObject
