将lambdaj与String.matches方法一起使用(Using lambdaj with String.matches method)

 等待loadedmetadata事件： 
 
 
 
 
 
  
navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => video.srcObject = stream)
  .then(() => 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中你也可以这样做 - 但是play()在任何其他浏览器中都没有返回承诺。 
 
 另请注意，不推荐使用URL.createObjectURL(stream) 。 使用srcObject 。 

Wait for the loadedmetadata event:
 
 
 
 
 
  
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>
 
 
 
 
 
The above should work in all browsers (that do WebRTC).
 
In Chrome you can also do this - but play() doesn't return a promise in any other browser yet.
 
Also note that URL.createObjectURL(stream) is deprecated. Use srcObject.
 
Update: Thanks to @KyleMcDonald in comments for pointing out the importance of registering the loadedmetadata listener synchronously with setting the srcObject!—Code updated.