如何让网络摄像头与 AngularJS 一起工作？

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 出现以下错误：

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，但相同的代码有效与旧版本。我需要知道如何将 "Video" DOM 对象传递给控制器。

Answer 1

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

当 return 是 DOM 节点的事件处理程序时，$parse:isecdom error 与事件处理程序对函数的调用有关，如下所示：

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

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

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

Answer 2

根据 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 属性 of myChannel 填充了视频 DOM 元素（然后它显然也可用于控制器中的所有其他内容）。不过，根据示例代码中的注释，您应该至少等到 onSuccess 才能访问它。 Here is a working example

Answer 3

我找到了问题的解决方案。需要做两件事：

第一个 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;
        });
    };

这是一个有效的 example。

如何让网络摄像头与 AngularJS 一起工作？

How do I get a webcam working with AngularJS?

javascript

angularjs

dom

webcam