如何讓網絡攝像頭與 AngularJS 一起工作？

Question

以前我已經將工作網絡攝像頭代碼放入我的應用程序中，但現在當我更新到 AngularJS v1.5.0 時它不起作用。 我正在使用與 v1.3.0 完美配合的網絡攝像頭指令。

這是我的代碼：

<webcam placeholder="selfiePlaceHolder"
  on-stream="onStream(stream)"
  on-access-denied="onError(err)" on-streaming="onSuccess(video)">
</webcam>

但現在 AngularJS v1.5.0 出現以下錯誤：

Uncaught Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: onSuccess(video)
http://errors.angularjs.org/1.5.0/$parse/isecdom?p0=onSuccess(video)

我還嘗試對AngularJS ng-Camera使用不同的解決方案，但即使它的演示頁面也不適合我。

注意：我知道問題是我們無法從較新版本的 AngularJS 訪問 DOM，但相同的代碼適用於舊版本。 我需要知道如何將“視頻”DOM 對象傳遞給控制器​​。

Answer 1

我已經找到了問題的解決方案。 需要做兩件事：

首先在 HTML 中：

<webcam channel="channel" 
        on-streaming="onSuccess()" 
        on-error="onError(err)" 
        on-stream="onStream(stream)"></webcam>

其次，在控制器中，您可以使用以下代碼訪問 DOM 視頻：

 $scope.onSuccess = function () {
        // The video element contains the captured camera data
        _video = $scope.channel.video;
        $scope.$apply(function() {
            $scope.patOpts.w = _video.width;
            $scope.patOpts.h = _video.height;
            //$scope.showDemos = true;
        });
    };

這是一個工作示例。

Answer 2

這是一個潛在的錯誤，通常在表達式嘗試訪問 DOM 節點時發生，因為它被 AngularJS 通過表達式限制訪問 DOM 節點，因為它可能導致執行任意 Javascript 代碼。

$parse:isecdom error與當事件處理程序返回 DOM 節點時事件處理程序對函數的調用有關，如下所示：

<button ng-click="myFunction()">Click</button>
$scope.myFunction = function() {
  return DOM;
}

要解決此問題，請避免訪問 DOM 節點並避免從事件處理程序返回 DOM 節點。 （參考： https ://docs.angularjs.org/error/$parse/isecdom）

添加顯式返回可能會解決此問題，詳情如下： CoffeeScript - 不允許在 Angular 表達式中引用 DOM 節點

Answer 3

根據github 頁面上的示例，我能夠使用上述評論中的頻道建議使網絡攝像頭指令正常工作。

function MyController($scope) {
    $scope.myChannel = {
        // the fields below are all optional
        videoHeight: 800,
        videoWidth: 600,
        video: null // Will reference the video element on success
    };
}

在onSuccess ( on-streaming attr) 和onStream ( on-stream attr) 回調中， myChannel的video屬性被填充了 video DOM 元素（然后它顯然也可用於控制器中的其他所有內容）。 但是，根據示例代碼中的注釋，您應該至少等到onSuccess才能訪問它。 這是一個工作示例