騰訊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等領域相關的原創優質技術文章：

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