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.

Here is my code:

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

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

Uncaught Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: onSuccess(video)
.5.0/$parse/isecdom?p0=onSuccess(video)

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

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.

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.

Here is my code:

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

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

Uncaught Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: onSuccess(video)
http://errors.angularjs/1.5.0/$parse/isecdom?p0=onSuccess(video)

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

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.

• javascript
• angularjs
• dom
• webcam

• What is video in the expression onSuccess(video)? It's obviously a DOM element, but I'm just making sure. The solution is not to include the DOM element in that expression. But to really solve your problem, you're going to need to provide more context so we understand how/why the DOM element is being used in the expression and e up w/a work around. – Sunil D. Commented Mar 26, 2016 at 19:08
• PS: I just took a look at the webcam-directive on Github. It sounds like you might be able to use this channel thing to get access to the video element. – Sunil D. Commented Mar 26, 2016 at 19:11
• Yes "video" is DOM object. Actually "video" Will reference the video element on success. channel thing also not working :( – Imran Commented Mar 27, 2016 at 6:53
• In my answer, I provided an example for how to use the channel attribute to get access to the video DOM element. – CShark Commented Mar 31, 2016 at 21:33

3 Answers 3

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/error/$parse/isecdom)

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

I was able to get webcam-directive working using the channel suggestion from the ment above, based on the example on the 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
    };
}

In the onSuccess(on-streaming attr) and onStream(on-stream attr) callback the video property of myChannel was filled in with the video DOM element (and then it would obviously be available to everything else in the controller too). According to the ment in the example code though, you should wait to access it at least until onSuccess. Here is a working example