https://www.html5rocks.com/zh/tutorials/getusermedia/intro/
截取屏幕截图:
<canvas>
API 的 ctx.drawImage(video, 0, 0)
方法可以轻松地将 <video>
帧绘制到 <canvas>
上。当然,既然我们通过 getUserMedia()
获得了视频输入,就可轻松地使用即时视频创建照相亭应用了。
<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
// "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
document.querySelector('img').src = canvas.toDataURL('image/webp');
}
}
video.addEventListener('click', snapshot, false);
// Not showing vendor prefixes or code that works cross-browser.
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, onFailSoHard);