web AR探索和總結

騰訊DeepOcean原創文章：dopro.io/web-ar.html

導語 AR浪潮正滾滾而來，Web 瀏覽器做爲人們最唾手可得的人機交互終端，AR技術又有那些進展，下面做者將本身在項目內AR的探索總結了一下，和你們分享。

AR實現原理分析三要素：

1.攝像頭的調用 2.視頻流內容識別 3.虛擬物體的疊加在畫面上

技術實現一：攝像頭的調用

1.使用getUsermedia獲取攝像頭內容

2.截取當前幀的內容：canvas toDataURL 目前的瀏覽器支持狀況以下：

技術實現第二步：視頻流內容識別

方案1:純JS識別庫：js-aruco，tracking.js ，jsartoolkit5, ar.js進行識別 js-aruco和tracking.js在處理識別主要應用了：canvas來讀取分析對應的圖片信息。在處理視頻流，視頻若是尺寸大了，則識別速度慢，卡頓明顯。目前主流分辨率都在750*1334左右，直接處理這個大小的視頻，速度確定不夠。下圖附上參考和網址：

jsartoolkit5和 AR.js：主要是將artoolkit c++庫經過 Emscripten編譯成對應的js文件（asm.js）文件，在性能和計算上獲得了提高。可是對應視頻流的解析會有輕微的抖動。

觀看對應的幀頻，js-aruco = tracking.js <jsartoolkit5+ar.js

方案2:websocket + opencv 既然前端處理視頻流不夠快，那咱們是否直接後端處理就好？ 爲了減小網絡請求：主要用上了websocket來網絡請求處理， 後臺主要適用了node-opencv

問題：網絡傳輸會影響識別速度。 1.圖片數據轉化耗時：視頻轉成當前幀圖片，toDataURL()，750*1334，耗時大概在80ms左右。 優化方法：toDataURL('image/jpeg')會加快速度，由於這裏不須要計算Alpha通道。在20ms左右。速度會高於toDataURL(); 2.圖片傳輸耗時：websocket在傳輸圖片信息大約在50ms左右。

#技術實現第三步：實現虛擬場景和視頻結合

2D內容和視頻結合：canvas，利用 Canvas API 在相應座標上進行繪製，展現一個實現的demo: 3D內容和視頻結合：three.js或者layabox,利用webgl API在對應位置增長3D模型。 最後附上demo：

總結

最近在AR項目探索，在web端的實現AR已經有了很好基礎，解析耗時都是能夠接受的。後端解析，前端結合3D是比較理想的解決方案。

歡迎關注"騰訊DeepOcean"微信公衆號,每週爲你推送前端、人工智能、SEO/ASO等領域相關的原創優質技術文章：

看小編搬運這麼辛苦，關注一個唄：)