最近有个需求需要截取视频通话的客户界面传给后台做业务处理，百度了一下最多的都是html2canvas。

html2canvas 其实是遍历dom元素 将html内容渲染成canvas图片。

当我选取video标签时发现 渲染出来的只有一张白色的图片，才知道视频并不能直接渲染成图片。百度一番，发现解决方案都是将视频当前帧渲染成canvas图片，直接上代码吧。

//将视频通话当前帧画入canvas画布
let video = $("#remote_stream").find("video")[0];
			video.style.backgroundImage = "";
			if (video.style.backgroundImage == "") {
				let width = $(video).width();
				let height = $(video).height();
				$(video).after('<canvas width="' + width + '" height="' + height + '"></canvas>');
				let canvas = $(video).next('canvas').css({
					display: 'none'
				});
				let ctx = canvas.get(0).getContext('2d');
				ctx.drawImage(video, 0, 0, width, height);
				try {
					video.style.backgroundImage = "url(" + canvas.get(0).toDataURL('image/png') + ")";
				} catch (e) {
					console.log(e)
				} finally {
					canvas.remove();
				}
			}
			//html2canvas根据video标签渲染截图
			html2canvas($("#remote_stream").find("video")[0]).then(canvas => {
				base64Str = canvas.toDataURL('image/jpeg', 1.0);
			});