angular 笔记 之 页面调用摄像头拍照

直接上代码:
html:

<video *ngIf="!avatarUrl" id="video" width="360" height="540" autoplay="">视频流不可用.</video>
<img style="width: 360px;" *ngIf="avatarUrl" [src]="avatarUrl" class="avatar" />
<canvas id="canvas" [style.display]="'none'">
</canvas>

ts:

avatarUrl;
mediaStream: MediaStream;
/**打开摄像头 */
  getUserMedia() {
    // 选择最接近360x540的分辨率
    var constraints = { video: { width: 360, height: 540 } };
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(mediaStream => {
        this.mediaStream = mediaStream;
       
        /* var video = document.querySelector('video'); */
        var video: any = document.getElementById('video');
        video.srcObject = this.mediaStream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
      .catch(function(err) {
        console.log(err.name + ': ' + err.message);
      }); // 最后一定要检查错误。
  }

  /**关闭摄像头 */
  closeCamera() {
    this.mediaStream.getTracks().forEach(track => track.stop());
  }

  /**照相 */
  takepicture() {
    var canvas = document.querySelector('canvas');
    var video = document.querySelector('video');
    var context = canvas.getContext('2d');
    canvas.width = 360;
    canvas.height = 540;
    /**
     * 在画布上定位图像，并规定图像的宽度和高度
     * 参数1:图像来源
     * 参数2: 在画布上放置图像的 x 坐标位置。
     * 参数3: 在画布上放置图像的 y 坐标位置。
     * 参数4: 图像的宽
     * 参数5: 图像的高
     */
    context.drawImage(video, 0, 0, 360, 540);
	// data就是拍出照片的base64
    var data = canvas.toDataURL('image/png');
    this.avatarUrl = data;
  }