由於公司要開發一個考試類型的項目用到了人臉比對,我就研究了一下相關了知識。
1.最開始想的是用微信小程序的媒體組件camera。
const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success: (res) => { this.setData({ src: res.tempImagePath }) } })
用ctx.takePhoto()拍照來獲取實時圖片和數據庫中的人臉作比對,比對成功進入考試頁面,一個demo做下來后效果還算理想,但是當用IOS系統測試的時候拍照時會發出‘咔咔咔’的響聲,這很影響用戶體驗,於是我尋思找一找資料看有沒有辦法,當我看完所有camera的屬性后,發現並沒有能關閉拍照聲音的屬性,最后已失敗告終。
2.然后我又看到了同是媒體組件的live-pusher
利用這個屬性獲取實時截圖然后發送給后台與數據庫比對不也很完美,於是我就開始着手寫demo,一開始我沒打算推流,只是想一直在預覽畫面然后獲取截圖,但是后來發現不推流就沒法進入到預覽畫面,而且與推流地址鏈接不上后會關閉預覽畫面,考慮到公司沒有開啟接受推流的地址,這個方法也暫時行不通(如果有接受推流的服務器的小伙伴這個方法是可以使用的,只是使用live-pusher需要開通相應的權限)
3.我又把目光聚焦到camera組件上
在眾多的api中我發現了這么一個api-獲取 Camera 實時幀數據,得到幀數據后轉化成base64豈不美哉
導入插件:
var UPNG = app.require('util/UPNG.js');
const context = wx.createCameraContext(); const listener = context.onCameraFrame((frame) => { let base64= wx.arrayBufferToBase64(UPNG.upng.encode([frame.data], frame.width, frame.height, 256)) })
把得到的base64發送到后台,完事