Question

如何在 angular 2 中的 getUserMedia 回调函数中更改变量值

2017-02-27

1417

javascript angular

我的应用程序使用的是 angular 2。我使用 getUserMedia 访问网络摄像头。如果网络摄像头可用，则调用成功函数，如果网络摄像头不可用，则调用失败函数。检查下面的函数。

var n = <any>navigator;
n.getUserMedia  = n.getUserMedia || n.webkitGetUserMedia || n.mozGetUserMedia || n.msGetUserMedia;
n.getUserMedia({video: true, audio:true}, this.onSuccess, this.onFail);

我定义了一个变量 isCamera : boolean 。

export class CameraComponent implements OnInit {    
   public isCamera: boolean;
   ...
}

我已在 onSuccess 函数中将此变量设置为 true，在 onFail 函数中将此变量设置为 false。但这会出现错误。我无法在回调 onSuccess 和 onFail 函数中设置值。这两个函数的代码是

public onSuccess(){
  this.isCamera = true;
}

public onFail(){
  this.isCamera = false;
}

有人能告诉我如何在 onSuccess 函数中将 true 值分配给 isCamera 函数吗？我收到此错误：- 未捕获 TypeError：无法设置未定义的属性“isCamera”

Answer 1

这里有 2 件事，您确实应该从 mediaDevices 接口使用 getUserMedia，直接在导航器上使用已被弃用（ https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia ）

您无法设置它的原因是因为在回调中，“this”不是您认为的那样。因此，请在回调中使用箭头函数或将回调绑定到“this”。

箭头函数：

n.getUserMedia({video: true, audio:true}, () => this.isCamera = true, () => this.camera = false);

绑定：

n.getUserMedia({video: true, audio:true}, this.onSuccess.bind(this), this.onFail.bind(this));

Answer 2

回调函数不允许您使用 typescript 的 this 范围解决方法在这里

n.getUserMedia({video: true, audio:true}, 
    function(){ // success
        n.isCamera = true;
    } , 
    function(){ //fail
        n.isCamera = false;
    }
);