javascript - navigatormediaDevicesgetUserMedia를 사용하는 동안 TypeError

사용되지 않는 navigator.getUserMedia 를 대체하려고합니다.   navigator.mediaDevices.getUserMedia 와 함께  그러나 시도하는 동안이 오류가 발생합니다 :

TypeError: Cannot set property 'localStream' of undefined

이것은 내 HTML입니다 :

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

Aurelia Environment를 사용하고 있으며 자바 스크립트는 다음과 같습니다.

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을 사용하여 앱을 만들고 있습니다.

인터넷에서 비슷한 문제를 겪고있어 스트림을 인쇄했습니다 :

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와 함께 주석 처리 된 부분을 사용하면 모든 것이 작동합니다