HTML 不是編程語言，但這并不妨礙前端工程師把它玩出花兒來。
比如，有人就拿 HTML 來訪問用戶的相機——
在網(wǎng)頁上，點擊按鈕即可直接打開手機前置鏡頭來拍照。
（沒錯，就是前置鏡頭！小哥可能有鏡子之類的）
也可以調用手機的后置鏡頭，開啟攝像模式。
值得注意的是，在這里，小哥只用了 HTML 語言就實現(xiàn)了上述功能。
他利用HTML 的 capture 屬性，只需設置幾個 input 參數(shù)，再加上幾行代碼搞定了。
比起別的實現(xiàn)方式，這樣可以更便捷地獲取用戶相機權限；而且沒什么安全問題。
不出所料，一大波程序員紛紛前來圍觀。有人表示：
用 HTML capture 屬性直接訪問相機，確實比用 JavaScript 更方便。
這位小哥的網(wǎng)名叫 Austin Gil，他是一位從事網(wǎng)頁開發(fā)的工程師。
下面就跟隨小哥分享的內容，一起來看看具體實現(xiàn)步驟吧。
首先當然是寫代環(huán)節(jié)。
小哥創(chuàng)建了一個 index.html 文檔，配合 HTML 的 accpet 屬性，來指定不同標簽所要 capture 的文件的具體屬性。
在這里，他設置了"environment"和"user"兩個標簽。
當用戶點擊 environment 時，可以調用設備的后置鏡頭，并擁有錄像功能；而當用戶點擊 user 時，就能打開設備前置鏡頭來拍照了。
具體代碼如下：
<!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)：沒有提示用戶是否打開訪問相機的權限，網(wǎng)頁就直接調用了相機。
那這樣操作，有沒有安全風險啊？
對此，小哥給出答案：無額外風險。
因為瀏覽器其實并不能真正控制用戶相機（雖然看起來好像可以直接訪問），而不過是能輕松上傳相機生成的新文件罷了。
說人話——對用戶而言，瀏覽器通過 HTML 只能打開攝像頭；如果需要把照片或者視屏展示到網(wǎng)站，或者保存下來，仍然需要用到 JavaScript 的 MediaDevices API。
有網(wǎng)友補充道，這種操作方式比純用 JavaScript 更安全。
因為運用 JS 的話，在用戶允許訪問相機后，瀏覽器就能直接控制攝像頭。
而在 Web 3.0 標準之后（現(xiàn)在主要用的是 Web 5 標準），規(guī)定網(wǎng)頁不能直接訪問用戶的鏡頭。
不過，小哥也指出：這種直接通過 HTML 指令打開用戶用戶攝像頭的方式還存在目前不足，比如兼容性不太好。
△圖源 caniuse.com：紅色框表示不支持；綠色框表示支持；棕色框表示部分支持；灰色框表示未知
量子位親測了一下小哥的這段代碼，結果顯示：
點擊 environment 和 user 按鈕，在 MacBook 上分別可以打開視頻格式和圖片格式的文件；
而在 iPhone 上，使用百度等瀏覽器，真的可以直接打開前置和后置攝像頭。
原文地址：http://www.myzaker.com/article/6340269a8e9f095a1f25d6cb
相關文章
川公網(wǎng)安備51012402001058號 注意：本站僅收錄網(wǎng)站，不對其網(wǎng)站內容或交易負責。若收錄的站點侵害到您的利益，請聯(lián)系我們刪除收錄。 郵箱： admin@hifast.cn