HTML is not a programming language, but this does not prevent front-end engineers from playing with it. For example, someone takes HTML to access the user's camera. On the webpage, click the button to directly open the front camera of the phone to take pictures. (Yes, it is the front lens! The little brother may have a mirror or something).
You can also call the rear camera of the phone to turn on the camera mode.
It is worth noting that here, the little brother only uses the HTML language to achieve the above functions. He uses HTML's capture attribute, just set a few input parameters, plus a few lines of code to get it done. Compared with other implementations, this makes it easier to obtain user camera permissions; and there are no security issues. Unsurprisingly, a large number of programmers came to watch. Someone said: Accessing the camera directly using the HTML capture attribute is indeed more convenient than using JavaScript.
The little brother's online name is Austin Gil, and he is an engineer engaged in web development.
How to open a camera with HTML?
The first, of course, is the writing part. The little brother created an index.html document, with the accept attribute of HTML, to specify the specific attributes of the files to be captured by different tags. Here, he sets two tags "environment" and "user". When the user clicks on the environment, the rear camera of the device can be called and has the video recording function; when the user clicks on the user, the front camera of the device can be opened to take a picture. The specific code is as follows:
<!DOCTYPE html> <html lang = "en" >
<head> <meta charset = "UTF-8" /> <meta name = "viewport" content = "width=device-width,initial-scale=1" /> <style> * {
font - size : 1.5rem ; } </style> </head>
<body> <label for = "environment" > Capture environment: </label> <br> <input type = "file" id = "environment" capture = "environment" accept = "video/*" > <br>< br> <label for = "user" > Capture user: </label> <br> <input type = "file" id = "user" capture = "user" accept = "image/*" > </body>
</html>At this point, sharp-eyed people may have discovered that the web page directly calls the camera without prompting the user to open the permission to access the camera. Is there any security risk in doing this? In this regard, the little brother gave the answer: no additional risk.
Because the browser doesn't actually control the user's camera (although it looks like it has direct access), but simply uploads new files generated by the camera. Speaking of human words - For users, the browser can only open the camera through HTML; if you need to display photos or videos to the website, or save them, you still need to use the MediaDevices API of JavaScript. Some netizens added that this method of operation is safer than pure JavaScript.
Because using JS, after the user allows access to the camera, the browser can directly control the camera. After the Web 3.0 standard (now mainly using the Web 5 standard), it is stipulated that web pages cannot directly access the user's lens.
However, the little brother also pointed out that this method of directly opening the user's camera through HTML instructions still has shortcomings, such as poor compatibility.
The qubit personally tested this code of the little brother, and the result showed. Click the environment and user buttons to open files in video format and picture format respectively on MacBook. On the iPhone, using a browser such as Baidu, you can really open the front and rear cameras directly.
Comments