騰訊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是比較理想的解決方案。