lex 發(fā)自 凹非寺
量子位 | 公眾號(hào) QbitAI
HTML不是編程語言,但這并不妨礙前端工程師把它玩出花兒來。
比如,有人就拿HTML來訪問用戶的相機(jī)——
在網(wǎng)頁上,點(diǎn)擊按鈕即可直接打開手機(jī)前置鏡頭來拍照。
(沒錯(cuò),就是前置鏡頭!小哥可能有鏡子之類的)
也可以調(diào)用手機(jī)的后置鏡頭,開啟攝像模式。
值得注意的是,在這里,小哥只用了HTML語言就實(shí)現(xiàn)了上述功能。
他利用HTML的capture屬性,只需設(shè)置幾個(gè)input參數(shù),再加上幾行代碼搞定了。
比起別的實(shí)現(xiàn)方式,這樣可以更便捷地獲取用戶相機(jī)權(quán)限;而且沒什么安全問題。
不出所料,一大波程序員紛紛前來圍觀。有人表示:
用HTML capture屬性直接訪問相機(jī),確實(shí)比用JavaScript更方便。
這位小哥的網(wǎng)名叫Austin Gil,他是一位從事網(wǎng)頁開發(fā)的工程師。
下面就跟隨小哥分享的內(nèi)容,一起來看看具體實(shí)現(xiàn)步驟吧。
首先當(dāng)然是寫代環(huán)節(jié)。
小哥創(chuàng)建了一個(gè)index.html文檔,配合HTML的accpet屬性,來指定不同標(biāo)簽所要capture的文件的具體屬性。
在這里,他設(shè)置了“environment”和“user”兩個(gè)標(biāo)簽。
當(dāng)用戶點(diǎn)擊environment時(shí),可以調(diào)用設(shè)備的后置鏡頭,并擁有錄像功能;而當(dāng)用戶點(diǎn)擊user時(shí),就能打開設(shè)備前置鏡頭來拍照了。
具體代碼如下:
到這里,眼尖的人可能已經(jīng)發(fā)現(xiàn):沒有提示用戶是否打開訪問相機(jī)的權(quán)限,網(wǎng)頁就直接調(diào)用了相機(jī)。
那這樣操作,有沒有安全風(fēng)險(xiǎn)啊?
對此,小哥給出答案:無額外風(fēng)險(xiǎn)。
因?yàn)闉g覽器其實(shí)并不能真正控制用戶相機(jī)(雖然看起來好像可以直接訪問),而不過是能輕松上傳相機(jī)生成的新文件罷了。
說人話——對用戶而言,瀏覽器通過HTML只能打開攝像頭;如果需要把照片或者視屏展示到網(wǎng)站,或者保存下來,仍然需要用到JavaScript的MediaDevices API。
有網(wǎng)友補(bǔ)充道,這種操作方式比純用JavaScript更安全。
因?yàn)檫\(yùn)用JS的話,在用戶允許訪問相機(jī)后,瀏覽器就能直接控制攝像頭。
而在Web 3.0標(biāo)準(zhǔn)之后(現(xiàn)在主要用的是Web 5標(biāo)準(zhǔn)),規(guī)定網(wǎng)頁不能直接訪問用戶的鏡頭。
不過,小哥也指出:這種直接通過HTML指令打開用戶用戶攝像頭的方式還存在目前不足,比如兼容性不太好。
△圖源caniuse.com:紅色框表示不支持;綠色框表示支持;棕色框表示部分支持;灰色框表示未知
量子位親測了一下小哥的這段代碼,結(jié)果顯示:
點(diǎn)擊environment和user按鈕,在MacBook上分別可以打開視頻格式和圖片格式的文件;
而在iPhone上,使用百度等瀏覽器,真的可以直接打開前置和后置攝像頭。
感興趣的伙伴們可以用下面鏈接中的代碼試試~
傳送門:
https://austingil.com/html-capture-attribute/
參考鏈接
[1]https://www.youtube.com/watch?v=DSTXUEHZRiU&t=1s
[2]https://news.ycombinator.com/item?id=32738501
— 完 —
量子位 QbitAI · 頭條號(hào)簽約
關(guān)注我們,第一時(shí)間獲知前沿科技動(dòng)態(tài)
嘍,寶貝們
我是今天依舊愛你們的O妹呀~
前幾天O妹看到一則新聞:
小伙手機(jī)丟失被盜刷31萬
報(bào)警后結(jié)局大反轉(zhuǎn)
給O妹嚇得一個(gè)激靈
想起來從來沒和大家說過
手機(jī)丟失后應(yīng)該如何做這件事
開啟這個(gè)話題前
首先需要明確一件事
互聯(lián)社交如此發(fā)達(dá)的如今
對于O妹這種人來說
手機(jī)丟了就差不多=我丟了
是一件極其危險(xiǎn)的事情
再買一個(gè)新的都是后話了
最關(guān)鍵是我的支付寶、微信付款
以及馬云爸爸的螞蟻花唄
查找手機(jī)功能
為了防止以上情況的發(fā)生,一般大家拿到新手機(jī),O妹都會(huì)建議大家打開【查找手機(jī)】功能。
這個(gè)功能可不是擺設(shè),當(dāng)你手機(jī)丟失,TA可是有大用處的!若你的手機(jī)不慎丟失,可以對手機(jī)進(jìn)行定位、鎖死手機(jī)、抹掉數(shù)據(jù)、播放聲音操作。
查找手機(jī)功能使用必須滿足三個(gè)條件:
1、手機(jī)必須登錄OPPO賬號(hào)并打開查找手機(jī)功能;
2、手機(jī)處于開機(jī)狀態(tài);
3、手機(jī)處于數(shù)據(jù)網(wǎng)絡(luò)或無線網(wǎng)連接狀態(tài)。
? 查找手機(jī)定位最高精準(zhǔn)度約在10米左右,可以查看手機(jī)的大概位置,可自定義選擇響鈴提醒、鎖屏、格式化清除數(shù)據(jù),幫助您確定手機(jī)的具體位置、保證您的手機(jī)的信息安全。
手機(jī)設(shè)置路徑
根據(jù)不同的系統(tǒng),OPPO手機(jī)打開查找功能操作路徑也有稍微的差別:
? ColorOS 2.1及以上版本版本,進(jìn)入“設(shè)置”--“云服務(wù)”--登錄OPPO帳號(hào)--“查找手機(jī)”;
? 其他ColorOS 版本,桌面--“云服務(wù)”--登錄OPPO帳號(hào)--“查找手機(jī)”。
點(diǎn)擊按鈕打開查找手機(jī)功能,按照頁面提示步驟設(shè)置,設(shè)置完成后手機(jī)端就打開了。若手機(jī)不慎丟失,可登陸以下網(wǎng)址進(jìn)行查找手機(jī)操作:
https://cloud.oppo.com/login.html
查找手機(jī) - 功能介紹
進(jìn)入云服務(wù)網(wǎng)頁,登錄OPPO賬號(hào)之后選擇“查找手機(jī)”你會(huì)發(fā)現(xiàn)這樣的界面——
定位功能
選擇需要定位的手機(jī),可以自動(dòng)快速定位到您手機(jī)當(dāng)前所在大概位置↓
選擇播放聲音
手機(jī)會(huì)以最大聲音播放嘀嘀嘀的聲音。(忘記手機(jī)放在哪個(gè)位置的時(shí)候也可以通過這個(gè)方法快速確定手機(jī)位置哦)
鎖死手機(jī)功能
失主可以設(shè)置新的鎖屏密碼,開啟鎖死手機(jī)后手機(jī)將被鎖死,同時(shí)開啟數(shù)據(jù)網(wǎng)絡(luò)和定位功能,便于定位手機(jī)。撿到手機(jī)的人需要驗(yàn)證設(shè)定好的鎖屏密碼【解除鎖死】,手機(jī)才能正常使用。
選擇抹掉數(shù)據(jù)
手機(jī)全部內(nèi)容都將被抹除,抹除后不能再通過“查找手機(jī)”定位、響鈴、鎖死或抹除。但仍需要驗(yàn)證你的OPPO帳號(hào)密碼才能激活使用。
最后提示大家一點(diǎn):
在被查手機(jī)沒網(wǎng)時(shí),可通過短信定位:若需使用短信定位,需要手機(jī)已插入能收發(fā)短信的中國大陸境內(nèi)運(yùn)營商SIM卡;
ColorOS 3.1-5.0,手機(jī)沒網(wǎng)絡(luò)的時(shí)候,默認(rèn)可以使用短信進(jìn)行定位;
ColorOS 5.1及之后系統(tǒng),需在設(shè)置--云服務(wù)--查找手機(jī),打開“手機(jī)無網(wǎng)絡(luò)時(shí)用短信查找”開關(guān)(默認(rèn)關(guān)閉),沒網(wǎng)絡(luò)時(shí)才可以使用短信定位。
以上就是O妹今天為大家?guī)淼娜績?nèi)容啦,老話說得好:不怕一萬就怕萬一!學(xué)完今天的課程,趕緊打開手機(jī)設(shè)置起來吧√
近有需求要實(shí)現(xiàn)用一個(gè)網(wǎng)址,在手機(jī)和電腦上實(shí)現(xiàn)不一樣的效果。這種需求最好是使用響應(yīng)式來實(shí)現(xiàn),但我只有一個(gè)頁面有這種需求,寫響應(yīng)式工作量太大,直接寫2個(gè)頁面做個(gè)移動(dòng)端跳轉(zhuǎn)。
同一個(gè)網(wǎng)址,在電腦和手機(jī)上展示不一樣的效果
只有當(dāng)手機(jī)打開時(shí)才需要跳轉(zhuǎn)到指定頁面,電腦打開時(shí)不用跳轉(zhuǎn)。這樣同一個(gè)鏈接就在電腦端和手機(jī)端實(shí)現(xiàn)不一樣的展示效果。
試了試下面2個(gè)方法:
<meta http-equiv="mobile-agent" content="format=xhtml;url=http://www.XX.com/1.html">
<script type="text/javascript">uaredirect("http://www.XX.com/1.html");</script>
<script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="http://www.XX.com/1.html";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>
保存記錄!
*請認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。