HTML 不是編程語(yǔ)言，但這并不妨礙前端工程師把它玩出花兒來(lái)。
比如，有人就拿 HTML 來(lái)訪問(wèn)用戶的相機(jī) ——
在網(wǎng)頁(yè)上，點(diǎn)擊按鈕即可直接打開(kāi)手機(jī)前置鏡頭來(lái)拍照。
（沒(méi)錯(cuò)，就是前置鏡頭！小哥可能有鏡子之類的）
也可以調(diào)用手機(jī)的后置鏡頭，開(kāi)啟攝像模式。
值得注意的是，在這里，小哥只用了 HTML 語(yǔ)言就實(shí)現(xiàn)了上述功能。
他利用 HTML 的 capture 屬性，只需設(shè)置幾個(gè) input 參數(shù)，再加上幾行代碼搞定了。
比起別的實(shí)現(xiàn)方式，這樣可以更便捷地獲取用戶相機(jī)權(quán)限；而且沒(méi)什么安全問(wèn)題。
不出所料，一大波程序員紛紛前來(lái)圍觀。有人表示：
用 HTML capture 屬性直接訪問(wèn)相機(jī)，確實(shí)比用 JavaScript 更方便。
這位小哥的網(wǎng)名叫 Austin Gil，他是一位從事網(wǎng)頁(yè)開(kāi)發(fā)的工程師。
下面就跟隨小哥分享的內(nèi)容，一起來(lái)看看具體實(shí)現(xiàn)步驟吧。
如何用 HTML 打開(kāi)相機(jī)？
首先當(dāng)然是寫(xiě)代碼環(huán)節(jié)。
小哥創(chuàng)建了一個(gè) index.html 文檔，配合 HTML 的 accpet 屬性，來(lái)指定不同標(biāo)簽所要 capture 的文件的具體屬性。
在這里，他設(shè)置了“environment”和“user”兩個(gè)標(biāo)簽。
當(dāng)用戶點(diǎn)擊 environment 時(shí)，可以調(diào)用設(shè)備的后置鏡頭，并擁有錄像功能；而當(dāng)用戶點(diǎn)擊 user 時(shí)，就能打開(kāi)設(shè)備前置鏡頭來(lái)拍照了。
具體代碼如下：
<!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>到這里，眼尖的人可能已經(jīng)發(fā)現(xiàn)：沒(méi)有提示用戶是否打開(kāi)訪問(wèn)相機(jī)的權(quán)限，網(wǎng)頁(yè)就直接調(diào)用了相機(jī)。
那這樣操作，有沒(méi)有安全風(fēng)險(xiǎn)??？
對(duì)此，小哥給出答案：無(wú)額外風(fēng)險(xiǎn)。
因?yàn)闉g覽器其實(shí)并不能真正控制用戶相機(jī)（雖然看起來(lái)好像可以直接訪問(wèn)），而不過(guò)是能輕松上傳相機(jī)生成的新文件罷了。
說(shuō)人話 —— 對(duì)用戶而言，瀏覽器通過(guò) HTML 只能打開(kāi)攝像頭；如果需要把照片或者視屏展示到網(wǎng)站，或者保存下來(lái)，仍然需要用到 JavaScript 的 MediaDevices API。
有網(wǎng)友補(bǔ)充道，這種操作方式比純用 JavaScript 更安全。
因?yàn)檫\(yùn)用 JS 的話，在用戶允許訪問(wèn)相機(jī)后，瀏覽器就能直接控制攝像頭。
而在 Web 3.0 標(biāo)準(zhǔn)之后（現(xiàn)在主要用的是 Web 5 標(biāo)準(zhǔn)），規(guī)定網(wǎng)頁(yè)不能直接訪問(wèn)用戶的鏡頭。
不過(guò)，小哥也指出：這種直接通過(guò) HTML 指令打開(kāi)用戶用戶攝像頭的方式目前還存在不足，比如兼容性不太好。
量子位親測(cè)了一下小哥的這段代碼，結(jié)果顯示：
點(diǎn)擊 environment 和 user 按鈕，在 MacBook 上分別可以打開(kāi)視頻格式和圖片格式的文件；
而在 iPhone 上，使用百度等瀏覽器，真的可以直接打開(kāi)前置和后置攝像頭。
感興趣的伙伴們可以用下面鏈接中的代碼試試~
傳送門(mén)：
https://austingil.com/html-capture-attribute/
參考鏈接
[1]https://www.youtube.com/watch?v=DSTXUEHZRiU&amp;amp;amp;amp;amp;t=1s
[2]https://news.ycombinator.com/item?id=32738501
本文來(lái)自微信公眾號(hào)：量子位 （ID：QbitAI），作者：Alex
廣告聲明：文內(nèi)含有的對(duì)外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時(shí)間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。