getUserMedia() 的回调事件

Question

我正在尝试使用 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);
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="debug.js"></script>
</head>
<body onload="init()">
    <div id="mainContainer">
        <video id="myVideo" width="640" height="480" autoplay style="display: inline;"></video>
        <canvas id="myCanvas" width="640" height="480" style="display: inline;"></canvas>
        <input type="button" id="snapshotButton" value="Snapshot" onclick="snapshot()"/>
    </div>
</body>
</html>

问题是，我不想使用单击按钮来拍摄快照，而是在加载相机流后立即拍摄快照。我试过设置视频源后直接调用snapshot()函数：

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);
}

但是没用。我的 canvas 保持白色。我猜是因为此时相机流没有完全加载。

那么是否有任何其他事件被触发，我可以在加载相机源后立即使用它来绘制快照？还是我完全走错了路？

提前致谢！

Answer 1

等待 loadedmetadata 事件：

navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => {
    video.srcObject = stream;
    return new Promise(resolve => video.onloadedmetadata = resolve);
  })
  .then(() => canvas.getContext('2d').drawImage(video, 0, 0, 160, 120))
  .catch(e => console.log(e));

<video id="video" width="160" height="120" autoplay></video>
<canvas id="canvas" width="160" height="120"></canvas>

以上应该适用于所有浏览器（支持 WebRTC）。

在 Chrome 中，您还可以执行 this - but play() 还没有 return 在任何其他浏览器中的承诺。

另请注意，URL.createObjectURL(stream) 已弃用。使用 srcObject.

更新：感谢@KyleMcDonald 在评论中指出在设置srcObject 的同时注册loadedmetadata 侦听器的重要性！—代码已更新.

getUserMedia() 的回调事件

Callback event for getUserMedia()

javascript

getusermedia