使用 navigator.mediaDevices.getUserMedia 时出现类型错误

Question

我正在尝试用 navigator.mediaDevices.getUserMedia 替换已弃用的 navigator.getUserMedia 但在尝试时出现此错误：

TypeError: Cannot set property 'localStream' of undefined

这是我的 HTML:

   <video ref="videoPlayer" hide.bind="screenSharing" id="videoPlayer" autoplay muted></video>

我正在使用 Aurelia 环境，我的 javascript 是这样的：

attached() {

 if (!this.localStream) {
  this.getLocalMedia();
 }
}    

getLocalMedia() {
 let constraints: MediaStreamConstraints = {
   video: true,
   audio: true
 };

navigator.mediaDevices.getUserMedia(constraints)
  .then(function (stream) {
    console.log('Got mic+video stream', stream);
    this.localStream = stream;
    this.videoPlayer.srcObject = this.localStream;
    this.videoPlayer.srcObject = stream;
   })
   .catch (function (err) {
     console.error(err);
 });
// navigator.getUserMedia(constraints, (stream) => {
//   console.log('Got mic+video stream', stream);
//   this.localStream = stream;
//   this.videoPlayer.srcObject = this.localStream;
// },
//   (err) => {
//     console.error(err);
//   }
// );

  }

有人能想象出这是什么问题吗？我正在使用 Electron 创建一个应用程序。

我在 Internet 上看到其他人遇到了类似的问题，所以我打印了流：

Got mic+video stream 
MediaStream {id: "EIGkOQeyfsaRpweVgRG8eQiZfiuJ2HV3QZqW", active: true,     onaddtrack: null, onremovetrack: null, onactive: null…}
active: true
id: "EIGkOQeyfsaRpweVgRG8eQiZfiuJ2HV3QZqW"
onactive: null
onaddtrack: null
oninactive: null
onremovetrack: null
__proto__: MediaStream

我也尝试过在文档准备好时添加一个 EventListener，但我仍然遇到这个问题；如果我将注释部分与已弃用的 navigator.getUserMedia 一起使用，一切正常

Answer 1

您在旧 navigator.getUserMedia 中使用箭头函数，但在 navigator.mediaDevices.getUserMedia 中使用经典函数。由于、this 不是您想象的那样，这些样式之间的行为是不同的。

使用 navigator.mediaDevices.getUserMedia 时出现类型错误

TypeError while using navigator.mediaDevices.getUserMedia

javascript

node.js

webrtc

mediadevices