网页视频实时截图-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>获取视频</title>
    <style>
        #video{
            /*镜子模式*/
            transform: rotateY(-180deg);
        }
    </style>
</head>
<body>
 <video id="video" width="500" height="500" autoplay></video>
 <button id="snap">截图</button>
 <canvas id="canvas" width="640" height="480"></canvas>
 <h2>拍照模式</h2>
</body>
<script>
 var video = document.getElementById('video');
 var aCanvas = document.getElementById('canvas');
 var ctx = aCanvas.getContext('2d');
 navigator.mediaDevices.getUserMedia({
	audio: true,
	video: true
 }).then(stream => {
	// 这里就要用到srcObject属性了，可以直接播放流资源
	video.srcObject = stream
 }).catch(err => {
	console.log(err) // 错误回调
 })
 document.getElementById("snap").addEventListener("click", function() {
    ctx.drawImage(video, 0, 0, 640, 480); //将获取视频绘制在画布上
 });
</script>

转载于:https://www.cnblogs.com/zhaozhou/p/8602200.html