getUserMedia（）的回调事件

我正在尝试使用navigator.mediaDevices.getUserMedia()和canvas.getContext('2d').drawImage()函数从网络摄像头拍摄快照。

当我这样做时，它可以完美地工作：

function init(){
  myVideo = document.getElementById("myVideo") 
  myCanvas = document.getElementById("myCanvas");
  videoWidth = myCanvas.width;
  videoHeight = myCanvas.height;
    
  startVideoStream();
}

function startVideoStream(){
  navigator.mediaDevices.getUserMedia({audio: false, video: { width: videoWidth, height: videoHeight }}).then(function(stream) {
    myVideo.src = URL.createObjectURL(stream);
  }).catch(function(err) {
      console.log("Unable to get video stream: " + err);
  });
}

function snapshot(){
  myCanvas.getContext('2d').drawImage(myVideo, 0, 0, videoWidth, videoHeight);
}

function init(){
  myVideo = document.getElementById("myVideo") 
  myCanvas = document.getElementById("myCanvas");
  videoWidth = myCanvas.width;
  videoHeight = myCanvas.height;
    
  startVideoStream();
}

function startVideoStream(){
  navigator.mediaDevices.getUserMedia({audio: false, video: { width: videoWidth, height: videoHeight }}).then(function(stream) {
    myVideo.src = URL.createObjectURL(stream);
    snapshot();
  }).catch(function(err) {
      console.log("Unable to get video stream: " + err);
  });
}

function snapshot(){
  myCanvas.getContext('2d').drawImage(myVideo, 0, 0, videoWidth, videoHeight);
}