How do I get a webcam working with AngularJS?

I've found the solution to the problem. Two things need to be done:

First In HTML:

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

Secondly, in the controller, you can access the DOM video with the following code:

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

Here is a working example.


It is a potential error generally occurs when an expression tries to access a DOM node since it is restricted accessing to DOM nodes via expressions by AngularJS because it might cause to execute arbitrary Javascript code.

The $parse:isecdom error is related to an invoke to a function by event handler when an event handler which returns a DOM node, like below:

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

To fix this issue, avoid access to DOM nodes and avoid returning DOM nodes from event handlers. (Reference: https://docs.angularjs.org/error/$parse/isecdom)

Adding an explicit return might solve this issue as detailed here: CoffeeScript - Referencing DOM nodes in Angular expressions is disallowed