本文經(jīng)AI新媒體量子位（公眾號ID:QbitAI）授權(quán)轉(zhuǎn)載，轉(zhuǎn)載請聯(lián)系出處。

HTML不是編程語言，但這并不妨礙前端工程師把它玩出花兒來。

比如，有人就拿HTML來訪問用戶的相機(jī)——

在網(wǎng)頁上，點擊按鈕即可直接打開手機(jī)前置鏡頭來拍照。

（沒錯，就是前置鏡頭！小哥可能有鏡子之類的）

也可以調(diào)用手機(jī)的后置鏡頭，開啟攝像模式。

值得注意的是，在這里，小哥只用了HTML語言就實現(xiàn)了上述功能。

他利用HTML的capture屬性，只需設(shè)置幾個input參數(shù)，再加上幾行代碼搞定了。

比起別的實現(xiàn)方式，這樣可以更便捷地獲取用戶相機(jī)權(quán)限；而且沒什么安全問題。

不出所料，一大波程序員紛紛前來圍觀。有人表示：

用HTML capture屬性直接訪問相機(jī)，確實比用JavaScript更方便。

這位小哥的網(wǎng)名叫Austin Gil，他是一位從事網(wǎng)頁開發(fā)的工程師。

下面就跟隨小哥分享的內(nèi)容，一起來看看具體實現(xiàn)步驟吧。

如何用HTML打開相機(jī)？

首先當(dāng)然是寫代環(huán)節(jié)。

小哥創(chuàng)建了一個index.html文檔，配合HTML的accpet屬性，來指定不同標(biāo)簽所要capture的文件的具體屬性。

在這里，他設(shè)置了“environment”和“user”兩個標(biāo)簽。

當(dāng)用戶點擊environment時，可以調(diào)用設(shè)備的后置鏡頭，并擁有錄像功能；而當(dāng)用戶點擊user時，就能打開設(shè)備前置鏡頭來拍照了。

具體代碼如下：

到這里，眼尖的人可能已經(jīng)發(fā)現(xiàn)：沒有提示用戶是否打開訪問相機(jī)的權(quán)限，網(wǎng)頁就直接調(diào)用了相機(jī)。

那這樣操作，有沒有安全風(fēng)險?。?/p>

對此，小哥給出答案：無額外風(fēng)險。

因為瀏覽器其實并不能真正控制用戶相機(jī)（雖然看起來好像可以直接訪問），而不過是能輕松上傳相機(jī)生成的新文件罷了。

說人話——對用戶而言，瀏覽器通過HTML只能打開攝像頭；如果需要把照片或者視屏展示到網(wǎng)站，或者保存下來，仍然需要用到JavaScript的MediaDevices API。

有網(wǎng)友補(bǔ)充道，這種操作方式比純用JavaScript更安全。

因為運用JS的話，在用戶允許訪問相機(jī)后，瀏覽器就能直接控制攝像頭。

而在Web 3.0標(biāo)準(zhǔn)之后（現(xiàn)在主要用的是Web 5標(biāo)準(zhǔn)），規(guī)定網(wǎng)頁不能直接訪問用戶的鏡頭。

不過，小哥也指出：這種直接通過HTML指令打開用戶用戶攝像頭的方式還存在目前不足，比如兼容性不太好。

△圖源caniuse.com：紅色框表示不支持；綠色框表示支持；棕色框表示部分支持；灰色框表示未知

量子位親測了一下小哥的這段代碼，結(jié)果顯示：

點擊environment和user按鈕，在MacBook上分別可以打開視頻格式和圖片格式的文件；

而在iPhone上，使用百度等瀏覽器，真的可以直接打開前置和后置攝像頭。

感興趣的伙伴們可以用下面鏈接中的代碼試試~

傳送門：
?https://austingil.com/html-capture-attribute/?