使用 navigator.mediaDevices.getUserMedia 来自用户网络摄像头的角度视频

Question

我正在尝试使用带有视频元素的 navigator.mediaDevices.getUserMedia 从用户网络摄像头获取运行的视频。我想从网络摄像头捕获图像并制作图像文件。但我在将网络摄像头连接到视频元素时遇到了困难。这是 html :

<button (click)="startCamera()">Get access to camera</button> 
<div style="width: 640px; height: 480px; border: 1px solid black;">
    <video id="videoC" #videoC height="480px" width="640px" autoplay="true" loop="true" muted="true"></video>
</div>

这是我的 .ts 文件：

@ViewChild("videoC")
videoC! : HTMLVideoElement;

sync startCamera(){

console.log(navigator.mediaDevices.enumerateDevices());

await navigator.mediaDevices.getUserMedia({
  video: {
    aspectRatio: 1.33,
    frameRate: 60,
    width: 640,
    height: 480
  },
  audio: false
}).then((stream) =>{
  this.videoC.srcObject = new MediaStream(stream.getTracks());
  this.videoC.play;
})
.catch((err) => {
  console.error(`An error occurred: ${err}`);
});
console.log(this.videoC);
console.log('Video run');
}

Answer 1

我将 videoC 的 HTMLVideoElement 更改为 ElementRef 并且它有效。这是变化：

@ViewChild("videoC")
videoC! : ElementRef;

以及 this.videoC 部分的 startCamera() 的一些更改。这是：

  this.videoC.nativeElement.srcObject = stream;
  this.videoC.nativeElement.play;

这是我得到答案的参考资料。 使用 Angular 访问网络摄像头