如何通過 Web 技術實現一個簡單但有趣的 AR 效果

發表於2017-03-29

Web

擴增實境（Augmented Reality，簡稱AR）：是一種實時地計算攝影機影像的位置及角度並加上相應影象、視訊、3D模型的技術，這種技術的目標是在螢幕上把虛擬世界套在現實世界並進行互動。

本文將讓你瞭解“如何通過 Web 技術實現一個簡單但有趣的 AR 效果”。

實現分析

正如文章開頭說道：AR 是將真實環境與虛擬物體實時地疊加到一個畫面。因此我們需要通過攝像頭實時獲取真實環境，並通過識別演算法識別與分析真實環境中特定的物體，然後結合得到的資料，將虛擬物體以某種方式結合到畫面中。

結合我們的案例，可得出以下步驟：

獲取視訊源
分析源，並識別出 Marker 位置
將虛擬物體疊加在 Marker 上
將最終畫面顯示在螢幕上

下面我們就根據以上步驟逐點分析。

技術分析

獲取視訊源

不依賴 Flash 或 Silverlight，我們使用 navigator.getUserMedia() API，該 API 允許 web 應用獲取使用者的攝像頭與麥克風流（stream）。

<!-- 若不加 autoplay，則會停留在第一幀 -->
<video autoplay></video>
navigator.getUserMedia  = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia;
var video = document.querySelector('video');
var constraints = {
  video: true
}
function successCallback(stream) {
  // 此處利用該 window.URL 物件的 createObjectURL 方法將 blob 轉為 url。
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream); // 用來建立 video 可以播放的 src
  } else {
    video.src = stream;
  }
}
function errorCallback(error) {
  console.log('navigator.getUserMedia error: ', error);
}
if (navigator.getUserMedia) {
  navigator.getUserMedia({video: true}, successCallback, errorCallback);
} else {
  console.log('getUserMedia() is not supported in your browser')
  video.src = 'somevideo.webm'; // fallback.
}

navigator.getUserMedia = navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia;

var video = document.querySelector('video');

var constraints = {

video: true

}

function successCallback(stream) {

// 此處利用該 window.URL 物件的 createObjectURL 方法將 blob 轉為 url。

if (window.URL) {

video.src = window.URL.createObjectURL(stream); // 用來建立 video 可以播放的 src

} else {

video.src = stream;

}

function errorCallback(error) {

console.log('navigator.getUserMedia error: ', error);

}

if (navigator.getUserMedia) {

navigator.getUserMedia({video: true}, successCallback, errorCallback);

} else {

console.log('getUserMedia() is not supported in your browser')

video.src = 'somevideo.webm'; // fallback.

}

上述 API 已不被推薦，建議使用新標準 API：navigator.mediaDevices.getUserMedia()。

navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
  /* use the stream */
}).catch(function(err) {
  /* handle the error */
});

navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {

/* use the stream */

}).catch(function(err) {

/* handle the error */

});

另外，可通過 constraints 引數設定以下選項：

啟用 video、audio 二者其一或兩者同時啟用
匹配攝像頭解析度（若裝置擁有不止一個攝像頭）
選擇前後攝像頭

navigator.getUserMedia() 相容性問題

目前 IOS 裝置的微信和 Safari 均不支援，較新的安卓和桌面端瀏覽器均支援。

另外，出於安全問題考慮，Chrome 只支援 HTTPS 頁面啟用攝像頭。因此，我們可以用 Firefox，或者藉助一些線上編輯器，如 jsbin、jsFiddle 等進行開發測試。

識別

得到視訊源後，我們需要對影象中的物體（本案例是 Marker）進行實時識別。下面提供兩個可實現識別的庫：

正如其名，它們是 aruco 和 artoolkit 的 JavaScript 版本。本文僅對第一個庫進行介紹。

ArUco 是一個基於 OpenCV 的 AR 輕量庫。

OpenCV（Open Source Computer Vision Library）：是一個跨平臺的計算機視覺庫。它可用於開發實時的影象處理、計算機視覺以及模式識別程式。

jsaruco 能識別視訊每幀畫面中的 Marker 位置（含 4 個角座標）。獲取座標後，我們就能將虛擬物體放在真實環境的適當位置了。關於 jsaruco 的介紹和用法，可到這裡檢視。

結合真實環境和虛擬物體

對影象的處理，Canvas（WebGL）無疑是目前 Web 的最佳選擇。

虛擬物件若是 2D 的，則直接利用 Canvas 2D API 在相應座標上進行繪製。若虛擬物件是 3D 的，則可使用 Three.js 或 A-Frame 等 3D 庫（當然，你也可以直接用 WebGL）。

如果你對 Three.js 還不瞭解，可以看看《Three.js入門指南》。

Marker 分析

每個識別庫都有其自身的實現方式。因此，一些 Marker 可能只適用於某個庫。對於 jsaruco，它對 Marker 的要求如下：

一個 7×7 的正方形，其外層是“不用”的黑邊。內部 5×5 單元格則組成了 ID 資訊。其中，每行需要遵循以下模式：

white - black - black - black - black
white - black - white - white - white
black - white - black - black - white
black - white - white - white - black

因此，根據上述資訊，我們可以得出該庫最多可識別 1024（4的5次方）個 Marker。也就是說：每個 Marker 對應唯一一個 ID，然後我們可以利用 ID 指定顯示的虛擬物件。

一個合格的 Marker 應該是這樣子：
Marker 分析