search
HomeWeb Front-endHTML TutorialHow to use the flash plug-in to call the PC's camera and embed it into the TML page_HTML/Xhtml_Web page production

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

Copy code
The code is as follows:


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">




type="application/x-shockwave-flash" pluginspage=" http://www.macromedia.com/go/getflashplayer" />



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

Copy code
The code is as follows:




How to use the flash plug-in to call the PC's camera and embed it into the TML page_HTML/Xhtml_Web page productionwidth="550" style="max-width:90%" alt= "" />



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

Copy code
Code As follows:





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

Copy code
The code is as follows:

< ;span style="font-family:Microsoft YaHei;">



Copy code
The code is as follows:








Alternative content


Get Adobe Flash player









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
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Explain the importance of using consistent coding style for HTML tags and attributes.Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AM

A consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.

How to implement multi-project carousel in Bootstrap 4?How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

How does deepseek official website achieve the effect of penetrating mouse scroll event?How does deepseek official website achieve the effect of penetrating mouse scroll event?Apr 30, 2025 pm 03:21 PM

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

How to modify the playback control style of HTML videoHow to modify the playback control style of HTML videoApr 30, 2025 pm 03:18 PM

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

What problems will be caused by using native select on your phone?What problems will be caused by using native select on your phone?Apr 30, 2025 pm 03:15 PM

Potential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...

What are the disadvantages of using native select on your phone?What are the disadvantages of using native select on your phone?Apr 30, 2025 pm 03:12 PM

What are the disadvantages of using native select on your phone? When developing applications on mobile devices, it is very important to choose the right UI components. Many developers...

How to optimize collision handling of third-person roaming in a room using Three.js and Octree?How to optimize collision handling of third-person roaming in a room using Three.js and Octree?Apr 30, 2025 pm 03:09 PM

Use Three.js and Octree to optimize collision handling of third-person roaming in the room. Use Octree in Three.js to implement third-person roaming in the room and add collisions...

What problems will you encounter when using native select on your phone?What problems will you encounter when using native select on your phone?Apr 30, 2025 pm 03:06 PM

Issues with native select on mobile phones When developing applications on mobile devices, we often encounter scenarios where users need to make choices. Although native sel...

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor