如何使用AngularJS进行网络摄像头操作？ [英] How do I get a webcam working with AngularJS?

问题描述

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

Previously I've put working webcam code into my application , but now it's not working when I updated to AngularJS v1.5.0. I am using webcam-directive which was working perfectly with v1.3.0.

这是我的代码：

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

但现在它给AngularJS v1.5.0带来以下错误：

But now it's giving following error with AngularJS v1.5.0:

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

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 但是它的演示页面对我来说都不适用。

I also tried to used a different solution with AngularJS ng-Camera but even its demo page is not working for me.

注意：我知道问题是我们无法从较新版本的AngularJS访问DOM，但相同的代码适用于旧版本。我需要知道如何将VideoDOM对象传递给控制器​​。

Note: I know the issue is that we can't access the DOM from the newer version of AngularJS, but the same code works with the older version. I need to know how to pass the "Video" DOM object to the controller.

推荐答案

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

I've found the solution of problem: Two thing need to done :

首先在HTML中：

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

在控制器中，您可以访问DOM视频：

Second in controller, you can access DOM video:

 $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;
        });
    };

这是工作工作示例 ..

这篇关于如何使用AngularJS进行网络摄像头操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！