直接看代码。css基础弱鸡，将就看吧。慢慢学习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas</title> <style type="text/css"> body{ display: block; width: 50%; margin-left: auto; margin-right: auto; } a{ color: black; } canvas{ background: gray; } button{ background: red; } </style> </head> <body> <div id='container'> <h1><a href="39.106.209.45/VideoTalk/webRTCCavans">getUserMedia with Canvas</a></h1> <video autoplay="true"></video> <button>Take snapshot</button> <canvas></canvas> <p>Draw a frame from the video onto the canvas element using the <code>drawImage()</code></p> </div> <script type="text/javascript" src=".//js//main.js"></script> </body> </html>
var video=document.querySelector('video');
var canvas=window.canvas=document.querySelector('canvas');
canvas.width=480;
canvas.height=360;
var button =document.querySelector('button');
button.onclick=function(){
canvas.width=video.videoWidth;
canvas.height=video.videoHeight;
canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);
};
var constraints={
audio:false,
video:true
};
function handleSuccess(stream){
window.stream=stream;
video.srcObject=stream;
}
function handleError(error){
console.log('navigator.getUserMedia error: ',error);
}
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
通过canvas的darwImage方法，把video正在播放的视频进行截图。