![](/img/trans.png)
[英]How do I get a Browserfied AngularJS application working with Karma?
[英]How do I get a webcam working with 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 对象传递给控制器。
我已经找到了问题的解决方案。 需要做两件事:
首先在 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;
});
};
这是一个工作示例。
这是一个潜在的错误,通常在表达式尝试访问 DOM 节点时发生,因为它被 AngularJS 通过表达式限制访问 DOM 节点,因为它可能导致执行任意 Javascript 代码。
$parse:isecdom error
与当事件处理程序返回 DOM 节点时事件处理程序对函数的调用有关,如下所示:
<button ng-click="myFunction()">Click</button>
$scope.myFunction = function() {
return DOM;
}
要解决此问题,请避免访问 DOM 节点并避免从事件处理程序返回 DOM 节点。 (参考: https ://docs.angularjs.org/error/$parse/isecdom)
添加显式返回可能会解决此问题,详情如下: CoffeeScript - 不允许在 Angular 表达式中引用 DOM 节点
根据github 页面上的示例,我能够使用上述评论中的频道建议使网络摄像头指令正常工作。
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) 回调中, myChannel
的video
属性被填充了 video DOM 元素(然后它显然也可用于控制器中的其他所有内容)。 但是,根据示例代码中的注释,您应该至少等到onSuccess
才能访问它。 这是一个工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.