使用Angular访问网络摄像头

import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-camera',
  templateUrl: './camera.component.html',
  styleUrls: ['./camera.component.css']
})
export class CameraComponent {
  videoStream: MediaStream;
  videoUrl: SafeUrl;

  constructor(private sanitizer: DomSanitizer) { }

  startCamera() {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(stream => {
        this.videoStream = stream;
        this.videoUrl = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(stream));
      })
      .catch(error => {
        console.error('Error accessing camera:', error);
      });
  }

  stopCamera() {
    if (this.videoStream) {
      this.videoStream.getTracks().forEach(track => track.stop());
      this.videoStream = null;
      this.videoUrl = null;
    }
  }
}

<div>
  <button (click)="startCamera()">Start Camera</button>
  <button (click)="stopCamera()">Stop Camera</button>
</div>

<div *ngIf="videoUrl">
  <video [src]="videoUrl" autoplay></video>
</div>