直接看代码。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正在播放的视频进行截图。
webRTC结合canvas截图
原文地址：https://www.cnblogs.com/superxuezhazha/p/8338075.html