如何使用AngularJS使用网络摄像头？

一尘不染

如何使用AngularJS使用网络摄像头？

angularjs

以前，我已经将可运行的网络摄像头代码放入我的应用程序中，但是现在当我更新到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对象传递给控制器。

阅读 393

2020-07-04

共1个答案

一尘不染

我找到了解决问题的方法。需要完成两件事：

HTML中的First：

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

这是一个工作示例。

2020-07-04