o語(yǔ)言中文網(wǎng),致力于每日分享編碼、開源等知識(shí),歡迎關(guān)注我,會(huì)有意想不到的收獲!
使用你的臉授權(quán)解鎖你的手機(jī)正在成為一種趨勢(shì),但是在 Web 上,這種情況看到的并不多,也許是因?yàn)檫@種功能對(duì) Web 來(lái)說(shuō)不太重要,不足以被實(shí)現(xiàn)。那么,僅通過(guò) HTML5,Javascript 和一些 Go 語(yǔ)句,能夠?qū)崿F(xiàn)人臉識(shí)別的功能么?答案是肯定的,我使用 Facebox在一個(gè)小時(shí)完成了這個(gè)工作,并將 代碼作為一個(gè)名為 Web Face ID 的開源項(xiàng)目發(fā)布。
你怎么從使用人臉識(shí)別的網(wǎng)站上獲益?
通過(guò) Machinebox 使用 Web Face ID 來(lái)驗(yàn)證自己。
作為一個(gè)通用的方法,我們將會(huì)使用 HTML5 通過(guò)網(wǎng)絡(luò)攝像頭來(lái)獲取用戶頭像,用 Javascript 發(fā)送一張照片到服務(wù)器端。一旦照片到了服務(wù)器上,我們將使用 Go 解碼照片并使用 Facebox 進(jìn)行檢查,以便能夠發(fā)出響應(yīng)。
我們把整個(gè)過(guò)程分成以下幾個(gè)步驟。
你需要啟動(dòng) Facebox 并運(yùn)行,為此您 只需注冊(cè)一個(gè)賬戶 即可將 Facebox 作為 Docker 容器運(yùn)行。還需要使用你想要識(shí)別的人的照片給 Facebox 進(jìn)行訓(xùn)練,一張照片就夠,但多張照片會(huì)使結(jié)果更準(zhǔn)確。
使用 HTML5 和 Javascript 捕捉攝像頭
對(duì)于網(wǎng)站,我們可以利用 HTML5 的 video 標(biāo)簽和 canvas 標(biāo)簽。
我們將使用 video 標(biāo)簽去捕捉攝像頭,并使用 canvas 標(biāo)簽拍攝照片,然后發(fā)送到服務(wù)器端,下面是 Javascript 代碼
上面的代碼基本上實(shí)現(xiàn)了這樣的過(guò)程,當(dāng)你單擊該按鈕時(shí),將攝像頭的照片信息捕獲到 canvas 中,并將照片發(fā)送到服務(wù)器端的斷點(diǎn)(endpoint) /webFaceID。這張照片將是一個(gè)以 base64 編碼的 PNG。
現(xiàn)在我們?cè)诜?wù)器端有了你的臉部圖像,我們只需要解碼圖像,將解碼后的數(shù)據(jù)發(fā)送給 Facebox with the SDK 完成后面復(fù)雜的工作,然后將處理后的結(jié)果返回給前端. 這里我們可以寫一個(gè) Go http handler 來(lái)做這個(gè)工作。
通過(guò)這幾行代碼,我們可以在任何網(wǎng)站上使用人臉驗(yàn)證。
那么,任何類型的生物識(shí)別(比如使用你的臉,虹膜或是指紋)只能作為 “用戶名”,而不能作為 “密碼”。所以如果你的網(wǎng)站要實(shí)現(xiàn)這個(gè)功能,那么它可以作為一個(gè)理想的第二身份認(rèn)證,或是某種降低風(fēng)險(xiǎn)的工作,但是它不能取代密碼。
另外請(qǐng)記住,惡意攻擊者可以拍下你的照片,并用你的照片來(lái)仿照你的身份。
重點(diǎn)提示:Facebox 經(jīng)過(guò)優(yōu)化,可以在任何類型的場(chǎng)景下識(shí)別任何照片中的人物,但是端點(diǎn) /check 具有可以調(diào)整的可選參數(shù) tolerance。如果您的臉部驗(yàn)證的條件不會(huì)改變(例如相同的位置,相同的環(huán)境照明),您可以減小容差,使得驗(yàn)證時(shí)系統(tǒng)更加嚴(yán)格。
如果你想看看整個(gè)代碼,請(qǐng)?jiān)L問(wèn) Github 上的 Web Face ID。它是開源的。
你可以很容易地使用我們的盒子來(lái)實(shí)現(xiàn)這樣的功能。立即注冊(cè)并免費(fèi)開始使用此功能。https://machinebox.io/
via: https://blog.machinebox.io/introducing-web-face-id-how-to-use-html5-go-and-facebox-to-verify-your-face-b75cf2aee5e8
作者:David Hernandez 譯者:Titanssword 校對(duì):rxcai
本文由 GCTT 原創(chuàng)編譯,Go語(yǔ)言中文網(wǎng) 榮譽(yù)推出
家是否好奇,資深前端工程師,甚至前端專家的簡(jiǎn)歷究竟是怎么寫的,又有哪些優(yōu)化的技巧呢?
今天我們就根據(jù)實(shí)際的輔導(dǎo)案例,來(lái)看看一位工作了 7 年的前端大佬的簡(jiǎn)歷情況。
這份簡(jiǎn)歷的主人公,是在近期報(bào)名的簡(jiǎn)歷輔導(dǎo)。他在互聯(lián)網(wǎng)公司工作了 7 年,并且在團(tuán)隊(duì)中擔(dān)任重要角色,帶領(lǐng)團(tuán)隊(duì)完成過(guò)從 0 到 1 的大項(xiàng)目,技術(shù)能力和工作經(jīng)驗(yàn)都很豐富。
本篇點(diǎn)評(píng)經(jīng)過(guò)本人的的授權(quán),部分個(gè)人信息也做了脫敏處理,感謝這位小伙伴對(duì)我們的支持。
先來(lái)看看進(jìn)行簡(jiǎn)歷輔導(dǎo)的主要方向:
來(lái)看看修改前的簡(jiǎn)歷
這塊寫的太過(guò)簡(jiǎn)單了些,可以把「年齡、學(xué)歷、工作年限、所在城市」等信息加上,HR 篩選簡(jiǎn)歷時(shí)會(huì)看。
“個(gè)人優(yōu)勢(shì)”可以改成“專業(yè)技能”,畢竟都是一些前端的通用技能,大部分都算不上優(yōu)勢(shì)。
參考修改如下:
1. 熟練掌握前端基礎(chǔ)(JavaScript、CSS3、HTML5),能夠快速實(shí)現(xiàn)Web端和移動(dòng)端頁(yè)面搭建。
2. 熟悉小程序開發(fā),包括云函數(shù)、云數(shù)據(jù)庫(kù)、云存儲(chǔ)和云托管以及 H5 頁(yè)面開發(fā)。
3. 熟練使用 Vue 框架以及相關(guān)生態(tài)技術(shù),能夠獨(dú)立完成項(xiàng)目搭建和項(xiàng)目部署,熟悉相關(guān)框架原理。
4. 了解 React 和 Angular 框架技術(shù),有相關(guān)實(shí)踐經(jīng)驗(yàn)。
5. 熟悉瀏覽器原理以及計(jì)算機(jī)網(wǎng)絡(luò)相關(guān)技術(shù),在性能優(yōu)化方面有實(shí)踐經(jīng)驗(yàn)。
6. 對(duì)前端工程模塊化有一定理解,熟悉webpack、vite等打包工具及其日常開發(fā)配置,可以從0到1獨(dú)立搭建項(xiàng)目,并優(yōu)化構(gòu)建流程。
7. 了解Node.js 和 java 服務(wù)端語(yǔ)言,能夠快速構(gòu)建后端接口和處理服務(wù)器端邏輯,保證項(xiàng)目的順利推進(jìn)。
8. 在多個(gè)項(xiàng)目中獨(dú)立負(fù)責(zé),具備設(shè)計(jì)和實(shí)施前端架構(gòu)的能力。
最后總結(jié)一下,專業(yè)技能需要注意幾點(diǎn):
工作經(jīng)歷部分,可以列舉重點(diǎn)工作方向,最好以自己主導(dǎo)、負(fù)責(zé)等關(guān)鍵字開頭的描述,最好是加上數(shù)據(jù),把具體收益也寫上。
另外工作經(jīng)歷時(shí)間倒序排列,最近的放前面。
以最近的一份工作為例,參考修改如下:
深圳市**** 高級(jí)前端開發(fā) 2019.xx -2023.xx
* 主導(dǎo)OA系統(tǒng)和社區(qū)項(xiàng)目的從 0 到 1 建設(shè),成功實(shí)現(xiàn)了平臺(tái)的快速上線和穩(wěn)定運(yùn)行。
* 搭建高效的項(xiàng)目腳手架并集成框架全家桶,顯著提升團(tuán)隊(duì)的開發(fā)效率和代碼質(zhì)量。
* 實(shí)施持續(xù)集成與自動(dòng)化測(cè)試,對(duì)接內(nèi)部平臺(tái)的CI/CD和質(zhì)量監(jiān)控系統(tǒng),將錯(cuò)誤率降低30%,發(fā)布時(shí)間縮短50%。
遵循 STAR 法則展開描述一個(gè)項(xiàng)目:
以 OA 系統(tǒng)為例,參考修改如下:
項(xiàng)目名稱:xxOA系統(tǒng)
項(xiàng)目描述:xxOA系統(tǒng)是一個(gè)面向XX的XX系統(tǒng),該系統(tǒng)包括個(gè)人門戶、人事中心、財(cái)務(wù)中心、法務(wù)中心、行政中心、服務(wù)中心、學(xué)習(xí)培訓(xùn)等7個(gè)子系統(tǒng),支撐公司所有部門的辦公自動(dòng)化需求。
主要職責(zé):
1. 負(fù)責(zé)整個(gè)系統(tǒng)前端架構(gòu)的搭建,設(shè)計(jì)了高效的代碼結(jié)構(gòu)和模塊劃分,提高了開發(fā)效率和可維護(hù)性。
2. 采用 vue生態(tài) + webpack + qiankun 搭建了 ** OA系統(tǒng)。
3. 開發(fā)了適配設(shè)計(jì)風(fēng)格的Vue前端組件庫(kù)"**-oa-ui",其中包含基礎(chǔ)組件和專為業(yè)務(wù)場(chǎng)景設(shè)計(jì)的定制組件。
4. 設(shè)計(jì)并開發(fā)了核心模塊,如表單生成器和流程設(shè)計(jì)器,并沉淀了相關(guān)文檔。
5. 持續(xù)學(xué)習(xí)和分享,積極推進(jìn)公司內(nèi)部前端框架的升級(jí)工作,規(guī)范了團(tuán)隊(duì)的編碼風(fēng)格,提高了項(xiàng)目開發(fā)效率;
項(xiàng)目成果:
* 成功按計(jì)劃完成**OA系統(tǒng)的上線,提供了全方位的辦公自動(dòng)化支持,提高了工作效率和數(shù)據(jù)準(zhǔn)確性。
* 開發(fā)效率提升 30% ,通過(guò)組件庫(kù)和優(yōu)化的前端架構(gòu),減少了重復(fù)代碼編寫和維護(hù)工作。
* 成功創(chuàng)建并部署 10 個(gè)微前端子系統(tǒng),實(shí)現(xiàn)了并行開發(fā)和獨(dú)立部署的目標(biāo)。
* 表單生成器和流程設(shè)計(jì)器的應(yīng)用范圍擴(kuò)大到4個(gè)部門,通過(guò)簡(jiǎn)單的拖拽和配置,平均每個(gè)部門的OA流程開發(fā)時(shí)間減少了60%,顯著提高了業(yè)務(wù)部門的自主開發(fā)能力。
* 規(guī)范化的eslint規(guī)范、commit規(guī)則以及Cz工具集的使用,提高了代碼質(zhì)量和團(tuán)隊(duì)協(xié)作效率,減少了代碼錯(cuò)誤和沖突。
我們的簡(jiǎn)歷輔導(dǎo),會(huì)根據(jù)修改后的項(xiàng)目經(jīng)歷,給出的一些常見的面試題,今天也貼出來(lái)讓大家參考下。
以 OA 系統(tǒng)為例:
最后,建議大家在面試之前多刷刷面試題,八股文有需要的小伙伴可以轉(zhuǎn)發(fā)+關(guān)注后私信【學(xué)習(xí)】即可免費(fèi)獲取
王寶強(qiáng)個(gè)人博客首頁(yè)
個(gè)人博客簡(jiǎn)介頁(yè)面
個(gè)人避開聯(lián)系我們頁(yè)面
首頁(yè)HTML代碼
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。