一年經(jīng)驗(yàn)在二線城市面試后端的經(jīng)驗(yàn)分享
忠告這篇文章只適合2年內(nèi)工作經(jīng)驗(yàn)、甚至沒(méi)有工作經(jīng)驗(yàn)的朋友閱讀。如果你是2年以上工作經(jīng)驗(yàn)，請(qǐng)果斷劃走，對(duì)你沒(méi)啥幫助~主人公這篇文章內(nèi)容來(lái)自 「升職加薪」星球星友 的投稿，坐
Hello，大家好，我是 Sunday。
昨天有個(gè)同學(xué)問(wèn)我：“Sunday 老師，我們公司要做一個(gè)動(dòng)作捕捉的功能，竟然要前端去做！這玩意前端弄不了吧？”
這樣的功能，如果完全從 0 去寫(xiě)，自然是非常復(fù)雜，但是目前早已有了對(duì)應(yīng)的實(shí)現(xiàn)類(lèi)庫(kù)，它就是 HandtrackJS！基于它，我們可以很輕松的實(shí)現(xiàn)對(duì)應(yīng)的功能！
HandtrackJS 是一個(gè)基于 JavaScript 的開(kāi)源庫(kù)，用于實(shí)時(shí)手部檢測(cè)和手勢(shì)識(shí)別。它利用了機(jī)器學(xué)習(xí)模型來(lái)檢測(cè)手的位置和姿勢(shì)，使得開(kāi)發(fā)者可以在網(wǎng)頁(yè)和其他 JavaScript 環(huán)境中輕松地實(shí)現(xiàn)手勢(shì)控制和交互功能。
HandtrackJS 提供了對(duì)應(yīng)的案例，我們可以一起來(lái)看下對(duì)應(yīng)的效果：
圖片
根據(jù)示例 DEMO 我們可以發(fā)現(xiàn)，利用 HandtrackJS 可以直接捕獲到人像與手勢(shì)，同時(shí)還可以根據(jù)不同的手勢(shì)進(jìn)行識(shí)別，如下圖所示：
圖片
整個(gè)手勢(shì)的狀態(tài)被識(shí)別并分為了：open、pinch、closed 三種不同的狀態(tài)
整個(gè) HandtrackJS 使用也非常方便，根據(jù)官方文檔所示，我們可以分別通過(guò) npm 或 cdn 的形式直接進(jìn)行安裝，這里為了方便，直接通過(guò) cdn 的形式引入：
<body class="bx--body p20"> <div class="mb10"> <button id="trackbutton" class="bx--btn bx--btn--secondary" type="button" disabled > 點(diǎn)擊啟動(dòng) </button> </div> <!-- 捕捉和展示實(shí)時(shí)視頻流 --> <video class="videobox canvasbox" autoplay="autoplay" id="myvideo" style="display: none" ></video> <!-- 視頻流渲染到 canvas 之中 --> <canvas id="canvas" class="border canvasbox"></canvas> <!-- cdn 引入 handtrack --> <script src="lib/handtrack.min.js"></script> <script src="js/index.js"></script></body>在上面代碼中，核心有兩個(gè)標(biāo)簽：
搞定了 html 之后，接下來(lái)我們來(lái)處理 js 的內(nèi)容
handTrack 是 HandtrackJS 的核心類(lèi)，可以利用它的 load 方法加載配置、模型：
let model = null // 存儲(chǔ)加載的模型let trackButton = document.getElementById('trackbutton') // 獲取按鈕元素// 模型參數(shù)配置const modelParams = { maxNumBoxes: 20, // 最大檢測(cè)框數(shù)量 iouThreshold: 0.5, // IOU閾值 scoreThreshold: 0.6 // 分?jǐn)?shù)閾值}// 加載模型handTrack.load(modelParams).then((lmodel) => { model = lmodel // 保存加載的模型 trackButton.disabled = false // 啟用按鈕})監(jiān)聽(tīng) trackButton 按鈕的點(diǎn)擊行為，利用 video 開(kāi)啟攝像頭
// 獲取HTML中的video和canvas元素const video = document.getElementById('myvideo')const canvas = document.getElementById('canvas')const context = canvas.getContext('2d') // 獲取canvas的2D繪圖上下文let isVideo = false // 標(biāo)記視頻是否正在播放// 開(kāi)始視頻捕捉function startVideo() { handTrack.startVideo(video).then(function (status) { if (status) { // 如果視頻啟動(dòng)成功 isVideo = true // 設(shè)置視頻狀態(tài)為正在播放 runDetection() // 開(kāi)始檢測(cè) } else { // 視頻啟動(dòng)失敗處理（未實(shí)現(xiàn)） } })}// 運(yùn)行檢測(cè)function runDetection() { model.detect(video).then((predictions) => { model.renderPredictions(predictions, canvas, context, video) // 在canvas上繪制檢測(cè)結(jié)果 if (isVideo) { requestAnimationFrame(runDetection) // 如果視頻正在播放，繼續(xù)檢測(cè) } })}// 切換視頻播放狀態(tài)function toggleVideo() { if (!isVideo) { startVideo() // 如果視頻未播放，則啟動(dòng)視頻 } else { handTrack.stopVideo(video) // 停止視頻 isVideo = false // 設(shè)置視頻狀態(tài)為未播放 }}// 按鈕點(diǎn)擊事件監(jiān)聽(tīng)，點(diǎn)擊按鈕時(shí)切換視頻狀態(tài)trackButton.addEventListener('click', function () { toggleVideo()})至此整個(gè)的檢測(cè)就已經(jīng)全部完成了，是不是還是挺簡(jiǎn)單的。咱們來(lái)看看效果！
圖片
本文鏈接：http://www.www897cc.com/showinfo-26-93347-0.html前端實(shí)現(xiàn)人類(lèi)動(dòng)作捕捉，怎么辦？幾十行代碼輕松搞定！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 日本 Rapidus 宣布將同 IBM 開(kāi)發(fā) 2nm 制程芯粒封裝量產(chǎn)技術(shù)
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)