Question

以前我已将工作的网络摄像头代码放入我的应用程序中，但现在当我更新到AngularJS v1.5.0时，它无法正常工作。我正在使用webcam-directive，它与v1.3.0完美配合。

这是我的代码：

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

但是现在它给AngularJS v1.5.0发出以下错误：

未捕获错误：[$ parse：isecdom]在Angular中引用DOM节点表达是不允许的！表达式：onSuccess（视频） http://errors.angularjs.org/1.5.0/ $解析/ isecdom？P0 =的onSuccess（视频）

我还尝试使用AngularJS ng-Camera的不同解决方案，但即使它的演示页面也不适用于我。

注意：我知道问题是我们无法从较新版本的AngularJS访问DOM，但相同的代码适用于旧版本。我需要知道如何将“Video”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;
        });
    };

这是工作Working Example ..

Answer 2

当表达式试图访问DOM节点时，通常会发生潜在错误，因为它受AngularJS限制访问DOM节点，因为它可能导致执行任意Javascript代码。

3px与事件处理程序在返回DOM节点的事件处理程序时对函数的调用有关，如下所示：

$parse:isecdom error

要解决此问题，请避免访问DOM节点，并避免从事件处理程序返回DOM节点。（参考：https://docs.angularjs.org/error/ $ parse / isecdom）

添加显式返回可能会解决此问题，详见此处：CoffeeScript - Referencing DOM nodes in Angular expressions is disallowed

Answer 3

根据github page上的示例，我能够使用上面评论中的频道建议来使用网络摄像头指令。

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）回调中，video的{{1}}属性已填写视频DOM元素（然后它显然也可用于控制器中的其他所有内容）。根据示例代码中的注释，您应该等到访问它至少myChannel。 Here is a working example

如何使用AngularJS进行网络摄像头操作？

3 个答案: